Object.assign( ) in JavaScript

13 Sep, 2021
Object and Object Constructors in JavaScript? In the living world of object-oriented programming we already know the importance of classes and objects but unlike other programming languages, JavaScript does not have the traditional classes as seen in other languages. But JavaScript has objects and constructors which work mostly in the same way to perform the same kind of operations. Constructors are general JavaScript functions which are used with the “new” keyword. Constructors are of two types in JavaScript i.e. built-in constructors(array and object) and custom constructors(define properties and methods for specific objects). Constructors can be useful when we need a way to create an object “type” that can be used multiple times without having to redefine the object every time and this could be achieved using the Object Constructor function. It’s a convention to capitalize the name of constructors to distinguish them from regular functions. For instance, consider the following code: 
function Automobile(color) {
  this.color=color;
}

var vehicle1 = new Automobile ("red");
The function “Automobile()” is an object constructor, and its properties and methods i.e “color” is declared inside it by prefixing it with the keyword “this”. Objects defined using an object constructor are then made instants using the keyword “new”. When new Automobile() is called, JavaScript does two things:  
It creates a fresh new object(instance) Automobile() and assigns it to a variable.It sets the constructor property i.e “color” of the object to Automobile.
It creates a fresh new object(instance) Automobile() and assigns it to a variable.
It sets the constructor property i.e “color” of the object to Automobile.
Object.assign() Method Among the Object constructor methods, there is a method Object.assign() which 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 target object. Object.assign() does not throw on null or undefined source values. Applications:  
Object.assign() is used for cloning an object.
Object.assign() is used to merge object with same properties.
Syntax:  
Object.assign(target, ...sources)
Parameters Used:  
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.
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.Examples:  
Input : var obj1 = { a: 10 };
        var new_obj = Object.assign({}, obj1);
        console.log(new_obj);
Output : Object { a: 10 }

Explanation: Here in this example the properties of object "obj1" i.e. { a: 10 } is copied to the target object "new_obj".

Input : var obj1 = { a: 10 };
        var obj2 = { b: 20 };
        var obj3 = { c: 30 };
        var new_obj = Object.assign(obj1, obj2, obj3);
        console.log(new_obj);
Output : Object { a: 10, b: 20, c: 30 }

Explanation: 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 value of 10 will now be overwritten with obj2.b which has a value of 20

Input : var obj1 = { a: 10, b: 10, c: 10 };
        var obj2 = { b: 20, c: 20 };
        var obj3 = { c: 30 };
        var new_obj = Object.assign({}, obj1, obj2, obj3);
        console.log(new_obj); 
Output : Object { a: 10, b: 20, c: 30 }

Explanation: 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.
Codes for the above function are provided below.Code 1: 
html
<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 }
Code 2: 
html
<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 }
Code 3: 
html
<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.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.
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
kumarvivek1
adegbenga
ysachin2314
javascript-functions
javascript-object
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.