Understanding When to Make Copies of Data Before Modifications in JS
2024
In JavaScript, the behavior of reference types extends beyond just arrays. Here’s a list of reference types where the same behavior applies—changes to nested structures will impact all references:
- Objects: Objects are reference types. When you assign an object to another variable, both variables refer to the same object.
let originalObject = { a: 1, b: { c: 2 } };
let referencedObject = originalObject;
// Modify nested object
referencedObject.b.c = 99;
console.log(originalObject); // Output: { a: 1, b: { c: 99 } }
2.Arrays: Arrays are reference types. Similar to objects, assigning an array to another variable means both refer to the same array.
let originalArray = [1, 2, [3, 4]];
let referencedArray = originalArray;
// Modify nested array
referencedArray[2][0] = 99;
console.log(originalArray); // Output: [1, 2, [99, 4]]
3.Dates: Date objects are reference types. Assigning a date to another variable means both variables refer to the same date object.
let originalDate = new Date();
let referencedDate = originalDate;
// Modify date
referencedDate.setFullYear(2000);
console.log(originalDate.getFullYear()); // Output: 2000
4.RegExp: Regular expressions are reference types. Assigning a RegExp object to another variable means both variables refer to the same RegExp object.\
let originalRegExp = /abc/;
let referencedRegExp = originalRegExp;
// Modify RegExp (not directly possible in JavaScript, but reassigning can affect both)
referencedRegExp = /def/;
console.log(originalRegExp); // Output: /abc/
console.log(referencedRegExp); // Output: /def/
To avoid unintentional modifications to reference types in JavaScript, you can create deep copies of objects and arrays. Here are several methods to achieve this
1. Using Object.assign for Shallow Copy
For objects, you can use Object.assign to create a shallow copy. Note that this only copies properties at the first level; nested objects or arrays will still be referenced.
let originalObject = { a: 1, b: { c: 2 } };
let copiedObject = Object.assign({}, originalObject);
// Modify the nested object
copiedObject.b.c = 99;
console.log(originalObject.b.c); // Output: 2
console.log(copiedObject.b.c); // Output: 99
2.Using Spread Syntax for Shallow Copy
The spread syntax (...) can also be used to create a shallow copy of objects or arrays.
let originalArray = [1, 2, [3, 4]];
let copiedArray = [...originalArray];
// Modify the nested array
copiedArray[2][0] = 99;
console.log(originalArray[2][0]); // Output: 3
console.log(copiedArray[2][0]); // Output: 99
3.3. Using JSON.parse and JSON.stringify for Deep Copy
For a deep copy of objects or arrays (including nested structures), you can use JSON.parse and JSON.stringify. However, this method has limitations (e.g., it doesn’t handle functions, undefined, or special objects like Date).
let originalObject = { a: 1, b: { c: 2 } };
let deepCopiedObject = JSON.parse(JSON.stringify(originalObject));
// Modify the nested object
deepCopiedObject.b.c = 99;
console.log(originalObject.b.c); // Output: 2
console.log(deepCopiedObject.b.c); // Output: 99
4.4. Using Libraries
Libraries like Lodash offer methods for deep copying objects:
// Using lodash
const _ = require('lodash');
let originalObject = { a: 1, b: { c: 2 } };
let deepCopiedObject = _.cloneDeep(originalObject);
// Modify the nested object
deepCopiedObject.b.c = 99;
console.log(originalObject.b.c); // Output: 2
console.log(deepCopiedObject.b.c); // Output: 99
