JavaScript Object.assign() Method
FREE
The Object.assign() method in javascript copies the values and properties from one or more source objects to the target object. It provides the target object after copy operations. It uses a getter and a setter for copying. It just assigns the properties instead of defining new ones, that's why it should not be used for the deep clone, because if the value of any property is referenced type then it will only be copied and still refer to the original referenced object.
In case of duplicate keys in the target or source object, it follows the left to the right pattern to overwrite the values for those keys.
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.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Return Value of object.assign() JavaScript
Return Type: Object
It returns the same Target Object after copying the all sources.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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
Turn Learning into Career Growth
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.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
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.
Conclusion
- Object.assign() function copies the properties from source objects to target object.
- It is used for cloning the object.
- It is also used for merging the object, if there are multiple keys then merged values will be overwritten from left to right order of parameters.
- Only enumerable and own properties will be copied with this function.
See Also
- Object.freeze()
- Object.seal()
- Object.create()
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more