The Javascript Asign() Method to Merge and Clone Objects

In this article, we will be covering Object.assign() method in javascript in detail with examples.
A javascript object is a collection of key-value pairs. Keys are also known as properties of object.
Keys are unique but values may be duplicate. Example of a javascript object is

let car = {
brand: 'Hyundai',
fuel: 'Petrol',
model: 'i20'
}

Here, car is an object with three properties or keys.
Object.assign
Object.assign() is used on javascript objects for copying or adding properties of one or more objects to another object. Object.assign() was introduced in javascript ES6.
It can be used to

1. Merge properties of multiple objects into one object.
2. Clone a javascript object.

Definition of Object.assign() as per the javascript docs is

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object.

where enumerable means the properties which can be loop over or iterated using a for-in loop and own properties means the properties which belong directly to the object and not to the parent object.

Syntax to use Object.assign() is

• sources are one or more object separated by a comma.
  Object.assign will copy the properties of all source objects into target object.
• target may be a new object or an already existing object.

Object.assign() returns the target object with all the properties from source objects copied into it.
If any of the source objects contain same properties or keys with different values, then the value of last source object overwrites the previous value.

const objectOne = { x:1,y:2 };
const objectTwo = { z:3 };
const objectThree = {};
Object.assign(objectThree, objectOne, objectTwo);
console.log(objectThree);

Above example prints

It copied the properties from two objects into the third or target object. Note that the first argument to Object.assign() is the target object.
Another way of using Object.assign() is by supplying an empty object as first argument and assigning the returned value to a variable as

const objectThree = Object.assign({}, objectOne, objectTwo);

The example above shows how to merge objects with Object.assign() .
Object.assign with common properties
Below example shows the behavior when source objects have a property in common.

const objectOne = { x:1,y:2 };
const objectTwo = { z:3,y:4 };
const objectThree = {};
Object.assign(objectThree, objectOne, objectTwo);
console.log(objectThree);

In the above example, source objects have a property in common. It prints

{ x:1, y:4, z:3 }

Property of later object overwrites the earlier one. If you reverse the order of source objects as

Object.assign(objectThree, objectTwo, objectOne);

then the result will be

{ x:1, y:2, z:3 }

It is not necessary that target object is always empty, it may already have some properties. In this case, all the properties of source objects are merged into its own properties.
If the target object has common properties as source objects, then their values are overwritten by source properties.

Clone object
Object.assign() is used to create a copy or clone a javascript object as shown below. Notice the first argument to Object.assign() is an empty object.

const original = { x:1,y:2 };
const clone = Object.assign({}, original);
console.log('Original object');
console.log(original)
console.log('Clone object');
console.log(clone)

This prints

Original object

{x: 1, y: 2}

{x: 1, y: 2}

which shows that the properties of source object is copied into target object.
Now if you change the value of a source object property, target object remains unchanged as below.

const original = { x:1,y:2 };
// clone object
const clone = Object.assign({}, original);
// modify source object property value
original.x = 5
console.log('Original object');
console.log(original)
console.log('Clone object');
console.log(clone)

Original object

{x: 5, y: 2}

{x: 1, y: 2}

Value of source object property was modified but cloned object remains the same. This means that we have successfully created a clone object.

Clone created using this method is a shallow copy. This means that if the value of a source object property is another object, then its reference is copied.
Thus, if you change the value of a nested object property for source object, then the change will also be done in cloned object. Example,

// containes a nested object
const original = { x:1,y:{a:2} };
// clone object
const clone = Object.assign({}, original);
// modify nested property value
original.y.a = 5
console.log('Original object');
console.log(original)
console.log('Clone object');
console.log(clone)

This prints

Original object

{x: 5, y: {a:5}}

{x: 1, y: {a:5}}

It changed the value for cloned object as well.
For deep cloning, use other object cloning methods.

Hope the article was helpful to explain the usage of Object.assign() method in javascript.

Luigi Nori

He has been working on the Internet since 1994 (practically a mummy), specializing in Web technologies makes his customers happy by juggling large scale and high availability applications, php and js frameworks, web design, data exchange, security, e-commerce, database and server administration, ethical hacking. He happily lives with @salvietta150x40, in his (little) free time he tries to tame a little wild dwarf with a passion for stars.