Mastering Object Copying in JavaScript and TypeScript
Creating new objects instead of modifying existing ones is a fundamental principle in functional programming. This approach ensures that changes to an object’s structure do not have unintended consequences on other parts of the application. In this article, we will explore five techniques for copying objects in JavaScript and TypeScript, including shallow copying, deep copying, assigning, merging, and structured cloning.
Shallow Copying
A shallow copy of an object creates a new object with the same references as the original object. This means that changes to either the original or the copy can affect the other object. Shallow copying is suitable when working with objects that only contain primitive data types, such as strings or numbers.
In JavaScript, you can use the spread operator (...) or Object.assign() to create a shallow copy of an object. For example:
javascript
const original = { a: 1, b: 2 };
const copy = { ...original };
In TypeScript, you can use the same approach or create a new object and copy each property individually.
Deep Copying
A deep copy of an object creates a new object with its own references, ensuring that changes to either the original or the copy do not affect the other object. Deep copying is necessary when working with objects that contain non-primitive data types, such as functions or arrays.
In JavaScript, you can use JSON.parse(JSON.stringify(obj)) to create a deep copy of an object. However, this method has limitations, as it does not support functions or circular references.
In TypeScript, you can create a recursive function to deep copy an object. For example:
“`typescript
function deepCopy
if (typeof obj !== ‘object’) {
return obj;
}
const copy: any = {};
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
copy[key] = deepCopy(obj[key]);
}
}
return copy;
}
“`
Assigning
The Object.assign() method can be used to copy properties from one or more source objects to a target object. This method returns the target object.
In JavaScript, you can use Object.assign() to assign properties from one object to another. For example:
“`javascript
const target = {};
const source = { a: 1, b: 2 };
Object.assign(target, source);
“`
In TypeScript, you can use the same approach or create a new object and assign properties individually.
Merging
Merging objects combines their properties into a single object. If two objects have the same property name, the latter object’s property overwrites the former.
In JavaScript, you can use the spread operator (...) or Object.assign() to merge objects. For example:
“`javascript
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { …obj1, …obj2 };
“`
In TypeScript, you can create a function to merge objects recursively. For example:
“`typescript
function merge
if (typeof obj1 !== ‘object’ || typeof obj2 !== ‘object’) {
return obj2;
}
const merged: any = {};
for (const key in obj1) {
if (Object.prototype.hasOwnProperty.call(obj1, key)) {
merged[key] = obj1[key];
}
}
for (const key in obj2) {
if (Object.prototype.hasOwnProperty.call(obj2, key)) {
merged[key] = obj2[key];
}
}
return merged;
}
“`
Structured Cloning
Structured cloning is a new technique for copying objects in JavaScript. It uses the structured clone algorithm to create a deep copy of a specified item. This technique is useful for asynchronously validating and transferring object data.
In JavaScript, you can use the structuredClone() function to create a deep copy of an object. For example:
javascript
const original = { a: 1, b: 2 };
const copy = structuredClone(original);
Conclusion
In this article, we explored five techniques for copying objects in JavaScript and TypeScript: shallow copying, deep copying, assigning, merging, and structured cloning. Each technique has its own use cases and limitations. By understanding these techniques, you can choose the best approach for your specific needs and ensure that your code is efficient and