Master JavaScript Object Cloning: Deep, Shallow, and JSON Methods

Unlock the Power of JavaScript Objects

When working with JavaScript, understanding objects is crucial. A JavaScript object is a complex data type that can hold various data types, making it a versatile tool for developers. Take, for instance, the person object:


let person = {
name: 'John',
age: 25,
occupation: 'Developer'
}


The Challenge of Cloning Objects

You might think that cloning an object is as simple as creating a new variable and assigning it the value of the original object. However, this approach has a catch. When you do something like let copy = person, both copy and person point to the same object. This means that changing the value of copy will also affect person.

Deep Copying with Object.assign()

Fortunately, JavaScript provides a solution to this problem. The Object.assign() method, introduced in ES6, allows you to perform a deep copy of an object. This means that it copies all the properties from one or more objects, creating a new, independent object.

“`
let person = {
name: ‘John’,
age: 25,
occupation: ‘Developer’
}

let clone = Object.assign({}, person);

console.log(clone); // Output: { name: ‘John’, age: 25, occupation: ‘Developer’ }
“`

Shallow Copying with Spread Syntax

Another approach to cloning objects is using the spread syntax, introduced in ES6. This method creates a shallow copy of an object, which means it copies the top-level properties but references deeper objects.

“`
let person = {
name: ‘John’,
age: 25,
occupation: ‘Developer’,
math: {
score: 90
}
}

let clonePerson = {…person };

clonePerson.math.score = 100;

console.log(person.math.score); // Output: 100
“`

Cloning with JSON.parse()

Lastly, you can use the JSON.parse() method to clone an object. However, this approach only works with objects that contain number and string literals. It does not support objects with function or symbol properties.

“`
let person = {
name: ‘John’,
age: 25,
occupation: ‘Developer’
}

let clone = JSON.parse(JSON.stringify(person));

console.log(clone); // Output: { name: ‘John’, age: 25, occupation: ‘Developer’ }
“`

By mastering these techniques, you’ll be able to work with JavaScript objects with confidence, unlocking the full potential of your code.