JavaScript

JavaScript Object.assign() method | Explained

The JavaScript ES6 introduced the “Object.assign()” method that permits you to copy properties from a single or multiple “source” objects to a “target” object. This method performs the “get” operation to fetch the properties of the source object and “set” them in the specified target object.

This write-up will discuss the working of the JavaScript Object.assign() method. So, let’s start!

How to use JavaScript Object.assign() method

The JavaScript Object.assign() method is considered useful for the following cases:

  • To clone an object.
  • To merge multiple objects into one object.

We will discuss the mentioned applications of the Object.assign() method in the next section.

How to clone an object using JavaScript Object.assign() method

The “Object.assign()” method is used to clone the enumerable “key-value” pair of an already created source object into the target object. It is primarily utilized to perform the “Shallow” copying procedure.

Syntax of using JavaScript Object.assign() method to clone object

Object.assign(target, source)

Here, “target” represents the JavaScript object whose key-value pair will be cloned, and “source” indicates the object where the copied key-value pair will be placed.

Example: How to clone an object using JavaScript Object.assign() method

First of all, we will create an “employee” object, having the two key-value pairs and an empty object named “emp1”:

const employee= {

name: 'Alex',

designation: 'Manager'

};

let emp1 = { };

Then, we will clone the “employee” object properties to the “emp1” object using JavaScript “Object.assign()” method. To do so, we will specify “emp1” as “target” object and “employee” as “source” object:

Object.assign(emp1, employee);

Execution of the “Object.assign()” method will return the target object which is “emp1” in our case:

We will now modify the value of the “employee.name” property and check if the added changes also reflect the cloned “emp1” object or not:

employee.name = 'Stepheny';

console.log("emp1 name: " + emp1.name);

console.log("employee.name: " + employee.name);

As you can see from the below-given output that altering the “employee.name” property value has not modified the “emp1” object. This is because the target object “emp1” gets disconnected from the “employee” object after cloning its values:

However, when an inner referenced object is added, the JavaScript “Object.assign()” method will copy its reference, not the actual object. In such a scenario, both source and target objects refer to the same inner referenced object, and changes made to the property of the source object will also affect the target object’s property value.

For instance, in the “employee” object, we will add “address” as an inner referenced object which comprises a “city” Property:

const employee= {

address: {

city:  'Ankara'

}

};

After that, we will clone the properties of the “employee” object in “emp1”:

let emp1 = { };

Object.assign(emp1, employee);

Output

At this point, “emp1” object refers to the memory address of inner referenced “address” object of the “employee” and can access its key-value pair:

console.log("emp1.address.city: " + emp1.address.city);

console.log("employee.address.city: " + employee.address.city);

The given output shows that “Ankara” is set as the value of the “address” property for both “employee” and “emp1” objects:

Now, if we modify the value of “address.city” property of “employee” object then changes will be applied to the copied “emp1” object as well:

employee.address.city = 'Istanbul';

console.log("emp1.address.city: " + emp1.address.city);

console.log("employee.address.city: " + employee.address.city);

The invoked “console.log()” method will display “Istanbul” as “address.city” property value for both “employee” and “emp1” objects:

Now, let’s check out the method of merging objects using the JavaScript Object.assign() method.

How to merge objects using JavaScript Object.assign() method

In JavaScript, you can also utilize the “Object.assign()” method for merging different source objects into a one target object. For this purpose, you have to follow the below-given syntax.

Syntax of using JavaScript Object.assign() method for merge objects

target = Object.assign({ }, source1, source2);

Here, “source1”, and “source2” represents the multiple objects whose properties are going to be merged in the “target” object, using “Object.assign()” method.

Example: How to merge objects using JavaScript Object.assign() method

To demonstrate the procedure of merging objects by utilizing the “Object.assign()” method, firstly, we will create two objects named “fruit” and “vegetable”:

const fruit= { fruitName: 'Apple'};

const vegetable= { vegetableName: 'Potato'};

After doing so, we will invoke the “Object.assign()” method to merge “fruit” and “vegetables” objects in the target “eatables” object which is currently empty { }:

const eatables= Object.assign({}, fruit, vegetable);

console.log(eatables);

As a result of the execution, the “console.log()” method will print out the “eatables” object properties and their respective values in the console:

However, if you want to add a property to the “target” object before performing the merging operation, then have a look at the following syntax:

target = Object.assign({ property: 'value' }, source1, source2);

According to the above syntax, “property: value” represents the key-value pair which will be added to the “target” object, then the “Object.assign()” method will merge the “source1” and “source2” objects in the specified “target” object.

To understand the stated concept clearly, execute the below-given code:

const eatables= Object.assign({snacks: 'cookie' }, fruit, vegetable);

console.log(eatables);

Here, the “Object.assign()” method will merge the properties of “fruit” and “vegetable” objects in “eatables” object, after adding the “{snacks: ‘cookie’}” key-value pair to it:

We have compiled essential information related to the usage of the JavaScript Object.assign() method for copying and merging objects. Explore them further according to your preferences.

Conclusion

The JavaScript Object.assign() method is used to clone the enumerable key-value pair of an already created object. This method accepts two arguments: source and target, where “source” represents the object whose properties will be cloned in the “target” object. It is also invoked for merging one or more multiple objects into a single object. This write-up discussed the working of the JavaScript Object.assign() method.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.