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

Object.assign(target, …sources)

  • 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

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

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}
Clone object
{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}
Clone object
{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}}
Clone object
{x: 1, y: {a:5}}

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().

BrowserVersion
Chrome45
Firefox34
Safari9
Edge12
IENo support
Opera32

 

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

0

Share your thoughts !!

Close Menu

Never Miss an article !

Get the new post delivered straight into your inbox, enter your email and hit the button

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

codippa will use the information you provide on this form to be in touch with you and to provide updates and marketing.