Object.assign javascript

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.

Object.assign example
Below is an example of Object.assign() where it copies the properties of two objects into a third object.

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

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

then the result will be

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

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)

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

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

Browser Support
Below is a list of minimum versions of different browsers which support Object.assign().

Browser	Version
Chrome	45
Firefox	34
Safari	9
Edge	12
IE	No support
Opera	32

 

Hope the article was helpful to explain the usage of Object.assign() method in javascript.
Hit the clap if you liked it.