Search This Blog

2018/03/18

Javascript - cloning An object array



consider following code snippet.We will check different ways to clone an object array and check if cloning is deep or shallow.
var game_popularity = [
    { game: "fruit ninja", popularity: 78 },
    { game: "road runner", popularity: 20 },
    { game: "maze runner", popularity: 40 },
    { game: "ludo", popularity: 75 },
    { game: "temple runner", popularity: 86 }
];
console.log("sorted original array before clonning");
game_popularity.sort((a, b) => a.popularity < b.popularity);
console.log(game_popularity);


console.log("clone using object assign");
const cl2 = game_popularity.map(a => Object.assign({}, a));
cl2[1].game = "clash of titan";
cl2.push({ game: "logan", popularity: 57 });
console.log(cl2);


//adding new array element doesnt reflect in original array
console.log("clone using concat");
var ph = []
var cl = ph.concat(game_popularity);

//copied by reference ?
cl[0].game = "rise of civilization";

game_popularity[0].game = 'ping me';
cl.push({ game: "angry bird", popularity: 67 });
console.log(cl);

console.log("clone using ellipses");
var cl3 = [...game_popularity];
cl3.push({ game: "blue whale", popularity: 67 });
cl3[2].game = "harry potter";
console.log(cl3);

console.log("clone using json.parse");
var cl4 = JSON.parse(JSON.stringify(game_popularity));
cl4.push({ game: "home alone", popularity: 87 });
cl4[3].game ="lockhead martin";
console.log(cl4);

console.log("clone using Object.create");
var cl5 = Array.from(Object.create(game_popularity));
cl5.push({ game: "fish ville", popularity: 87 });
cl5[3].game ="veto power";
console.log(cl5);


console.log("clone using lodash-->cloneDeep");
var cl6 = _.cloneDeep(game_popularity);
cl6.push({ game: "crop ville", popularity: 67 });
cl6[3].game ="shooter";
console.log(cl6);

console.log("clone using lodash-->clone");
var cl7 = _.clone(game_popularity);
cl7.push({ game: "ice age", popularity: 61 });
cl7[3].game ="car theft";
console.log(cl7);

//array function
console.log("sorted original array after clonning");
game_popularity.sort((a, b) => a.popularity < b.popularity);
console.log(game_popularity);


console.log("Object.assign deep clone object array");
console.log("json.parse deep clone object array");
console.log("concat does not deep clone object array");
console.log("ellipses does not deep clone object array");
console.log("Object.create does not deep clone object array");
console.log("lodash-->cloneDeep deep clone object array");
console.log("lodash-->clone shallow copy object array");


output:


sorted original array before clonning
[ { game: 'temple runner', popularity: 86 },
  { game: 'fruit ninja', popularity: 78 },
  { game: 'ludo', popularity: 75 },
  { game: 'maze runner', popularity: 40 },
  { game: 'road runner', popularity: 20 } ]
clone using object assign
[ { game: 'temple runner', popularity: 86 },
  { game: 'clash of titan', popularity: 78 },
  { game: 'ludo', popularity: 75 },
  { game: 'maze runner', popularity: 40 },
  { game: 'road runner', popularity: 20 },
  { game: 'logan', popularity: 57 } ]
clone using concat
[ { game: 'ping me', popularity: 86 },
  { game: 'fruit ninja', popularity: 78 },
  { game: 'ludo', popularity: 75 },
  { game: 'maze runner', popularity: 40 },
  { game: 'road runner', popularity: 20 },
  { game: 'angry bird', popularity: 67 } ]
clone using ellipses
[ { game: 'ping me', popularity: 86 },
  { game: 'fruit ninja', popularity: 78 },
  { game: 'harry potter', popularity: 75 },
  { game: 'maze runner', popularity: 40 },
  { game: 'road runner', popularity: 20 },
  { game: 'blue whale', popularity: 67 } ]
clone using json.parse
[ { game: 'ping me', popularity: 86 },
  { game: 'fruit ninja', popularity: 78 },
  { game: 'harry potter', popularity: 75 },
  { game: 'lockhead martin', popularity: 40 },
  { game: 'road runner', popularity: 20 },
  { game: 'home alone', popularity: 87 } ]
clone using Object.create
[ { game: 'ping me', popularity: 86 },
  { game: 'fruit ninja', popularity: 78 },
  { game: 'harry potter', popularity: 75 },
  { game: 'veto power', popularity: 40 },
  { game: 'road runner', popularity: 20 },
  { game: 'fish ville', popularity: 87 } ]
clone using lodash-->cloneDeep
[ { game: 'ping me', popularity: 86 },
  { game: 'fruit ninja', popularity: 78 },
  { game: 'harry potter', popularity: 75 },
  { game: 'shooter', popularity: 40 },
  { game: 'road runner', popularity: 20 },
  { game: 'crop ville', popularity: 67 } ]
clone using lodash-->clone
[ { game: 'ping me', popularity: 86 },
  { game: 'fruit ninja', popularity: 78 },
  { game: 'harry potter', popularity: 75 },
  { game: 'car theft', popularity: 40 },
  { game: 'road runner', popularity: 20 },
  { game: 'ice age', popularity: 61 } ]
sorted original array after clonning
[ { game: 'ping me', popularity: 86 },
  { game: 'fruit ninja', popularity: 78 },
  { game: 'harry potter', popularity: 75 },
  { game: 'car theft', popularity: 40 },
  { game: 'road runner', popularity: 20 } ]
Object.assign deep clone object array
json.parse deep clone object array
concat does not deep clone object array
ellipses does not deep clone object array
Object.create does not deep clone object array
lodash-->cloneDeep deep clone object array



Conclusion:

json.parse,lodash-->cloneDeep are doing deep copy of object array.

Object.assign does not do deep copy  please refer below link

http://msdotnetbuddy.blogspot.com/2018/09/objectassign-in-javascipt.html
 

No comments:

Post a Comment