JavaScript Object.assign() Method

Syntax of object.assign() JavaScript

The syntax of the object assigned in JavaScript is shown below,

Parameters of JavaScript Object assign() Method

Parameter Type: Object

• The first parameter should be Target Object in which all sources will be copied.
• Up next there is a Rest Parameter in syntax, which means we can have multiple source objects.

Return Value of object.assign() JavaScript

Return Type: Object

It returns the same Target Object after copying the all sources.

Example of JavaScript Object assign() Method

Output:

Explanation:

• We have created the source object which contains a property having a key as x and a value as 10.
• In the object assign() method, we have provided the source object and target object as empty objects.
• The source object will be copied to the target object which is provided by us {}.
• The target object will be returned after copying.
• Next, console.log() is printing the target object.

Description of object.assign() JavaScript

The object.assign() method in javascript copies all properties from the source object to the target object.

• The properties must be enumerable, which means they should be enumerated by using the loop. We can check whether the property is enumerable or not by using propertyIsEnumerable() method.
• Also, the properties must be own properties of the object, which means they should not be inherited otherwise they will not be copied. We can check whether the object has a particular property or not by using hasOwnProperty() method.

More Examples of JavaScript Object assign() Method

Merging the Objects

We can merge the objects with the method object assign in javascript.

Output:

Explanation:

• Here we have three source objects which we want to merge with the target object.
• Also, now our target object is not empty but has a property instead.

Property with the Same Key

If the objects have the same key then it will be overwritten from left to right as we have passed the source object in the method parameter.

Output:

Explanation:

• Here we have three source objects in which there are some properties with a common key.
• Also, the target object is having a common key with one of the source objects.
• Let's see how it will go,
  • Initially, our target object will be: {t:40}.
  • After copying the sourceObj1 our target object will be: {t:40, x:10, y:20, z:30}.
  • Now as our sourceObj2 contains the same keys, so all of those will be overwritten. Our target object will look like: { t: 40, x: 25, y: 20, z: 45, w: 15 }.
  • Everything will be similar for sourceObj3.
  • Final target object will be: { t: 45, x: 45, y: 80, z: 45, w: 15 }.

Reference object as Value

See this example to get an idea of how the reference object is copied internally by the method object assign in javascript.

Output:

Explanation:

• We have a normal source object which contains an integer value and others as reference-type objects.
• After copying the source object to the target object we can notice that everything is copied successfully.
• But, let's try to manipulate the reference object value by the target object.
• We can see, as our reference was copied only, hence the changes will be reflected in both sourceObj and targetObject.

Browser Compatibility

This object assigned in javascript is supported by almost every top browser like chrome, edge, firefox, opera, safari, etc. The only exception is Internet Explorer which doesn't support this function.

See Also

• Object.freeze()
• Object.seal()
• Object.create()