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.
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.
Example 1: In this example, the properties of the object “obj1” i.e. { a: 10 } is copied to the target object “new_obj”.
// 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);
Output:
Object { a: 1 }
Example 2: 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
// creating 3 object constructors and assigning values to it
let obj1 = { a: 10 };
let obj2 = { b: 20 };
let obj3 = { c: 30 };
// Creating a target object and copying values
// and properties to it using object.assign() method
let new_obj = Object.assign({}, obj1, obj2, obj3);
// Displaying the target object
console.log(new_obj);
Output :
Object { a: 10, b: 20, c: 30 }
Example 3: 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.
// Creating 3 object constructors and assigning values to it
let obj1 = { a: 10, b: 10, c: 10 };
let obj2 = { b: 20, c: 20 };
let obj3 = { c: 30 };
// Creating a target object and copying values and
// properties to it using object.assign() method
let new_obj = Object.assign({}, obj1, obj2, obj3);
// Displaying the target object
console.log(new_obj);
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
- Mozilla
- Opera
- Safari
JavaScript Object assign() Method- FAQs
How does the assign() method work?
The assign() method copies the properties of one or more source objects into a target object. Properties in the target object are overwritten by properties in the source objects if they have the same key.
Does the assign() method modify the target object?
Yes, the assign() method modifies the target object. It copies properties from the source objects directly into the target object.
How does Object.assign() handle properties that are not enumerable?
Object.assign() only copies enumerable properties from source objects to the target object. Non-enumerable properties are ignored.
How does the assign() method handle null or undefined source objects?
If a source object is
null
orundefined
, it is ignored and skipped during the property copying process. No properties are copied fromnull
orundefined
sources.
What are some common use cases for the assign() method?
Common use cases for the assign() method include:
- Merging multiple objects into one.
- Cloning an object (shallow copy).
- Adding properties to an existing object.
- Combining default settings with user-defined settings.