- Published on
How to copy object in javascript
Shallow Copy
A shallow copy refers to the fact that only one level is copied, and that will work fine for an array or object containing only primitive values.
1) spread operator (...)
const array = [3, 4, 5];
const copyWithEquals = array;
console.log(copyWithEquals === array); // true
const copyWithSpread = [...array];
console.log(copyWithSpread === array); // false
console.log(...copyWithSpread); // 3, 4, 5
2) array.slice()
const array = [3, 4, 5];
const copyWithEquals = array;
console.log(copyWithEquals === array); // true
const copyWithSlice = array.slice();
console.log(copyWithSlice === array); // false
console.log(...copyWithSlice); // 3, 4, 5
3) Object.assign()
const array = [3, 4, 5];
const copyWithEquals = array;
const copyWithAssign = [];
Object.assign(copyWithAssign, array);
console.log(...copyWithAssign); // 3, 4, 5
Deep Copy
for objects and arrays containing other objects or arrays, copying these objects requires a deep copy
1) lodash.cloneDeep(nestedArray)
2) custom function
const deepCopyFunction = (inObject) => {
let outObject, value, key;
if (typeof inObject !== 'object' || inObject === null) {
return inObject; // Return the value if inObject is not an object
}
outObject = Array.isArray(inObject) ? [] : {};
for (key in inObject) {
value = inObject[key];
outObject[key] = deepCopyFunction(value);
}
return outObject;
};
let originalArray = [37, 3700, { hello: 'world' }];
console.log('Original array:', ...originalArray); // 37 3700 Object { hello: "world" }
let deepCopiedArray = deepCopyFunction(originalArray);
console.log('Deep copy:', ...deepCopiedArray); // 37 3700 Object { hello: "world" }
3) JSON.parse/stringify
If you do not use Dates, functions, undefined, Infinity, NaN, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays or other complex types within your object, a very simple one liner to deep clone an object is: JSON.parse(JSON.stringify(object))