Javascript » Object cloning

Cloning an object means creating its exact copy. Cloned object would have the same properties and methods as the source object. There are different ways of creating a clone of an object in javascript.

Method 1: Iterating over source object
Iterate over the object which needs to be cloned using for–in loop and assign its key and value in each iteration to the target object. Example,

// source object
let car = {
           color: 'red',
           brand: 'BMW',
           print: function() {
                    console.log('Car object');
           }
};
// declare the target object
const clone = {};
// iterate over properties of source object
for(let key in car) {
   // create a new property in target object
   clone[key] = car[key];
}
console.log(clone);

Source object has two properties and a function. Note that the syntax clone[key] = car[key] assigns the value of the key from the right side object to the corresponding property of the left side object. A new property in the left object is created if it does not exist.
Thus, in the first iteration, this syntax is evaluated to clone[color] = car[color]
When the cloned object is printed to the console, following is the output.

As you can see, the cloned object has same properties and function.
Method 2: Using Object class
Above method is the older and longer way of cloning an object. Modern javascript provides a more concise way of cloning an object using assign method of Object class. This method copies the properties from one or more source objects to a target object and returns the new object.
It takes at least 2 arguments, the first one being the target object and the second is source object. There may be more than 1 source objects also, in which case, they will be supplied as arguments 2, 3, 4…so on. Example,

// source object
let car = {
           color: 'red',
           brand: 'BMW',
           print: function() {
                    console.log('Car object');
           }
};
// copy car object into a new object
const clone = Object.assign({}, car);
console.log(clone);

Note that we are passing an empty object as the target object to the assign method but we may also pass an existing object. In this case, the properties and functions of the source object(s) are added to the pre-existing properties of the target object.
If the target object has some property names that match with the source object, then their values are overwritten with source values.

This method can also be used to copy(or clone) an array. The first argument to assign method should be empty square brackets([]) which is the symbol for an array and you will get a cloned array. Example,

let arr = [1, 3, 45];
const clone = Object.assign([],arr);
console.log(clone);

Method 3: Using spread operator
Spread operator allows the object to be expanded. Its syntax is a simple three dots(...) followed by the name of object and can be used to copy and object. Example,

// source object
let car = {
           color: 'red',
           brand: 'BMW',
           print: function() {
                    console.log('Car object');
           }
};
// copy using spread operator
const clone = {...car};

This method can be used to copy(or clone) an array. The only difference is that the spread operator will be surrounded by square brackets instead of curly braces since square brackets are the symbol of an array. Example,

let arr = [1, 3, 45];
const clone = [...arr];
console.log(clone);

Method 4: Converting to JSON
JSON stands for JavaScript Object Notation. A JSON object is similar to a javascript object that we have been dealing in this section. It has properties in key-value format and functions.
Javascript’s JSON class has methods that can be used to clone an object. Example,

// source object
let car = {
           color: 'red',
           brand: 'BMW',
           print: function() {
                    console.log('Car object');
           }
};
const clone = JSON.parse(JSON.stringify(car)));

JSON.stringify takes an object as argument and converts it into its string representation while JSON.parse takes a string as argument and returns its object representation. Both these methods are clubbed together to create a copy of an object.
Use this method only when the source object is convertible(can be parsed) to a JSON object else it will throw an error.

This method can also be used to clone an array. Just supply an array in place of an object to JSON.stringify method and the returned object will be the copy of the source array. Example,

let arr = [1, 3, 45];
const clone = JSON.parse(JSON.stringify(arr)));
console.log(clone);