Difference Between Object.assign and Spread Operator in JavaScript
The Object.assign() and the Spread Operator (...) are commonly used for copying properties from one object to another. While they can achieve similar outcomes, they have distinct characteristics and use cases. This article will explain the differences between the Object.assign() and the spread operator in terms of their functionality, characteristics, and applications providing examples for a better understanding.
These are the following topics that we are going to discuss:
Table of Content
What is Object.assign() ?
The Object.assign() is a method used to copy the values of all enumerable properties from one or more source objects to a target object. It returns the target object.
Characteristics:
- Mutation: The Object.assign() mutates the target object.
- Enumerability: Only copies enumerable properties.
- Prototype Chain: Does not copy properties from prototype chain.
- Shallow Copy: Creates a shallow copy of the source objects.
- Merging Objects: Can be used to merge multiple objects into one.
Applications:
- Copying properties from one object to another.
- Merging multiple objects into the single object.
- Cloning an object.
Example: This example shows the use of Object.assign() method.
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
console.log(returnedTarget);
Output
{ a: 1, b: 4, c: 5 }
{ a: 1, b: 4, c: 5 }
What is Spread Operator?
The Spread Operator (...) allows an iterable to be expanded in places where zero or more arguments or elements are expected. When used in the context of the objects, it spreads the properties of the source objects into the new object.
Characteristics:
- Immutability: Creates a new object and does not mutate the original object.
- Enumerability: Only copies enumerable properties.
- Prototype Chain: Does not copy properties from prototype chain.
- Shallow Copy: Creates a shallow copy of source objects.
- Syntax Simplicity: Provides the concise syntax for the copying and merging objects.
Applications:
- Cloning objects.
- Merging multiple objects into the single object.
- Creating new objects with the subset of properties.
Example: This example shows the use of spread operator.
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged);
Output
{ a: 1, b: 3, c: 4 }
Difference Between Object.assign and Spread Operator
Characteristics | Object.assign | Spread Operator |
|---|---|---|
Syntax | Object.assign(target ...sources) | { ...source } |
Mutation | Mutates the target object | Does not mutate the original object |
Prototype Chain | Ignores properties from the prototype chain | Ignores properties from the prototype chain |
Enumerability | Copies enumerable properties | Copies enumerable properties |
Copy Type | Shallow copy | Shallow copy |
Multiple Sources | Can merge multiple source objects | Can merge multiple source objects |
Performance | Slightly slower due to function call | Generally faster due to the concise syntax |
Use Case | Suitable for merging into the existing objects | Suitable for creating new objects |
Conclusion
Both Object.assign() and the spread operator are powerful tools for handling objects in JavaScript. While Object.assign() is useful for the merging properties into the existing object, the spread operator is more suited for creating new objects with the merged properties. Understanding the differences between these two methods will help choose the right one based on the specific use case and performance.
