JavaScript Copy Array Cloning an Array of Objects in JavaScript

#es6 #arrays #objects #performance

If you looking for a better understanding of objects, arrays and their references and creating a copy of them then you are at the right place.

Javascript Objects and Arrays are mutable, which means their state can be modified after it is being created. Objects and arrays are being compared by references rather than values, unlike string and number types. If these are not handled carefully and the state isn’t maintained properly then there is a higher chance that you are going to mess up big time in your application.

There are multiple ways to copy arrays and objects to have different references from their original object. Copying an array of, let’s say 100000 objects is going to be expensive as hell.

Here we are going to talk about few methods to properly clone objects/arrays and the best performative way to copy an Array of Objects.

Cloning an Object

ES6 way:

const originalObj = { name: 'cloning' }; 
const clonedObj = Object.assign({}, obj);
originalObj === clonedObj //false

Or you could simple use the spread operator

const originalObj = { name: 'cloning' }; 
const clonedObj = {...obj};
originalObj === clonedObj //false

Cloning an Array

ES5 way:

const originalArr = ['a', 'b', 'c'];
const clonedArr = originalArr.slice(0); // slice with index is FASTER
originalArr === clonedArr // false

ES6 way:

const originalArr = ['a', 'b', 'c'];
const clonedArr = [...originalArr];
originalArr === clonedArr // false

Cloning using JSON Object

const originalArr = ['a', 'b', 'c'];
const clonedArr = JSON.parse(JSON.stringify(originalArr)); 
originalArr === clonedArr // false

const originalObj = { name: 'cloning' }; 
const clonedObj = JSON.parse(JSON.stringify(originalObj));
originalObj === clonedObj //false

However cloning using JSON methods is quite an expensive operation.

Cloning an Array of Objects is simple and easy but most of the time we forget the fact that cloning only the array(which has objects) doesn’t do a deep clone and the objects in the new array still refer to the same old objects.

Example:

const arrayObj = [{name: 'clone'}, {name: 'array'}, {name: 'object'}];
const copy = [...arrayObj];
copy === arrayObj // false
copy[0] === arrayObj[0] //true

There are multiple ways to do this but most of them aren’t performative and can completely blow out your application. The most simplest and commonly used method among developers is by using JSON methods, which is apparently the slowest method of all. I tested out few of the commonly used methods to clone and copy arrays and objects and below are the results with a sample size of an array with 10000 objects of 1 key-value pair each.

There might be many other ways to do the exact operation but in all the test cases I tested with, I found Map with Spread Operator shown better performance than other ways.

NOTE: Object.assign() or {...} doesn't do deep cloning.

Hope this is helpful. If you had any questions by the end of this post then let me know so that I can improve this article.