ES6 object.assign() method with Example
This article is a detail explanation of the ES6 object.assign() method. This article will help you to explore your object in JavaScript in a more manageable way.
object.assign() method introduces in the ES6(ECMAScript2015) which copies the all enumerable own properties of one or more object into other.
Javascript doesn’t have traditional classes like other programming languages but it has an object and constructor which works in the same way to perform the oops kind of operations.
ES6 object.assign() syntax
Object.assign(target, ...sources)
Parameters
target A target parameter is a target object from which values and properties have to be copied.
sources The sources parameter are the objects that need to be cloned.
Return Value
return the target object.
Object.assign() method Explanation
In the ES6 Object.assign() method first argument is the target object and rest is the source object. It only copies the enumerable and own properties from the source object to the target object. Properties in the target object will be overwritten by the properties in the source object. It invokes the getter and setter because it uses both gets on the source and set on the target. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters. For copying property definitions, including their enumerability, into prototypes Object.getOwnPropertyDescriptor() and Object.defineProperty() should be used instead.
Object.assign() method doesn’t throw an error on null or undefined sources values.
Application of ES6 Object.assign() method
To Clone an Object.
Merging the object.
Properties on the prototype chain and non-enumerable properties cannot be copied and more…
ES6 Object.assign() method Examples
clone an object in Javascript
let obj = { "obj1": 1 };
let copy = Object.assign({}, obj);
console.log(copy); // { obj1: 1 }
In the above code, the properties of the object obj1 are copies to the target object copy.
merging object in javascript
let obj1 = { a: 1 };
let obj2 = { b: 2 };
let obj3 = { c: 3 };
let new_obj = Object.assign(obj1, obj2, obj3);
console.log(new_obj); // { a: 1, b: 2, c: 3 }
console.log(obj1); // { a: 1, b: 2, c: 3 }, target object itself is changed.
In the above code, properties of the three source object obj1, obj2, obj3 are copied to target object new_obj. Point to note here is that obj1 is also changed.
merging object in javascript with same properties
let obj4 = { a: 1, b:2 };
let obj5 = { b: 2 };
let obj6 = { c: 3 };
let new_obj = Object.assign(obj4, obj5, obj6);
console.log(new_obj); // { a: 1, b: 2, c: 3 }
Here, properties are overwritten by other objects that have the same properties and the target object gets the overwritten values.
copy of a source object without any references to it
let obj = { 'name': 'Sachin','salary': '150000'};
let objCopy = Object.assign({}, obj);
console.log(objCopy); //{name: "Sachin", salary: "150000"}
objCopy.salary = '200000';
console.log(objCopy); //{name: "Sachin", salary: "200000"}
console.log(obj); //{name: "Sachin", salary: "150000"}
In the above code, we changed the salary property of the obj without changing its reference value.
Conclusion
That’s it on the ES6 Object.assign() method. This is a simple explanation of how to use the object. assign method in your code to simplify the things. But there are more advanced topics like deep copying, pitfalls and other things which you should learn to have more understanding of this new ES6 static method.
Today, for state management we use redux, So in this case, the Object.assign() method becomes very useful to create a completely new object from existing ones, allowing you to copy and expand objects in an immutable manner.
Hope you got a good understanding of this javascript methods if you have any doubt or suggestions then comment in the comment box.
Share this with your friends and spread the knowledge to everyone. Happy Coding 🙂
Use Case Of Javascript Array methods map(), filter() and reduce()