JavaScript Object.assign() Method

The Object.assign() method is used to copy the values and properties from one or more source objects to a target object. It invokes getters and setters since it uses both [[Get]] on the source and [[Set]] on the target. It returns the target object which has properties and values copied from the source object. Object.assign() does not throw on null or undefined source values. 

Syntax:

Object.assign(target, ...sources)

Parameters:

• target: It is the target object to which values and properties have to be copied.
• sources: It is the source object from which values and properties have to be copied.

Return Value: Object.assign() returns the target object.

Examples of the above function are provided below.

Example 1:  Here in this example the properties of the object “obj1” i.e. { a: 10 } is copied to the target object “new_obj”.

Javascript

<script>
  // creating an object constructor and assigning values to it
  const obj1 = { a: 1 };

  // creating a target object and copying values and
  // properties to it using object.assign() method
  // Here, obj1 is the source object
  const new_obj = Object.assign({}, obj1);

  // Displaying the target object
  console.log(new_obj);
</script>

Output:

Object { a: 1 }

Example 2: Here in this example the properties of three source objects “obj1, obj2, obj3” are copied to the target object “new_obj”. The value of any pre-existing key-value pair that existed in the previous object will be over-written. For example, obj1.b which has a value of 10 will now be overwritten with obj2.b which has a value of 20

Javascript

<script>
    // creating 3 object constructors and assigning values to it
    var obj1 = { a: 10 };
    var obj2 = { b: 20 };
    var obj3 = { c: 30 };

    // Creating a target object and copying values
    // and properties to it using object.assign() method
    var new_obj = Object.assign({}, obj1, obj2, obj3);

    // Displaying the target object
    console.log(new_obj);
</script>

Output :

Object { a: 10, b: 20, c: 30 }

Example 3: Here in this example the properties of three source objects “obj1, obj2, obj3” are copied to the target object “new_obj” and the target object gets the overwritten values.

Javascript

<script>
    // Creating 3 object constructors and assigning values to it
    var obj1 = { a: 10, b: 10, c: 10 };
    var obj2 = { b: 20, c: 20 };
    var obj3 = { c: 30 };

     // Creating a target object and copying values and
     // properties to it using object.assign() method
     var new_obj = Object.assign({}, obj1, obj2, obj3);

    // Displaying the target object
    console.log(new_obj);
</script>

Output:

Object { a: 10, b: 20, c: 30 }

Explanation: In the above code the properties are overwritten by other objects that have the same properties later in the same order of parameters.

Applications:

• Object.assign() is used for cloning an object, to merge objects with the same properties.

Errors and Exceptions

• A TypeError is raised if the property is non-writable.
• The target object can be changed only if the properties are added before the error is raised.
• Object.assign() does not throw on null or undefined source values

We have a complete list of Javascript Object methods, to check those please go through this JavaScript Object Complete Reference article.

Supported Browsers:

• Google Chrome 6.0 and above
• Internet Explorer 9.0 and above
• Mozilla 4.0 and above
• Opera 11.1 and above
• Safari 5.0 and above