const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = {
firstObject,
secondObject
};
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = Object.assign({}, firstObject, secondObject);
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = {}
for (let key in firstObject) {
finalObject[key] = firstObject[key];
}
for (let key in secondObject) {
finalObject[key] = secondObject[key];
}
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = {}
if (firstObject != null && typeof firstObject === 'object') {
for (let key in firstObject) {
if (Object.prototype.hasOwnProperty.call(firstObject, key)) {
finalObject[key] = firstObject[key];
}
}
}
if (secondObject != null && typeof secondObject === 'object') {
for (let key in secondObject) {
if (Object.prototype.hasOwnProperty.call(secondObject, key)) {
finalObject[key] = secondObject[key];
}
}
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Using the spread operator | |
Using Object.assign | |
Using For-In loop | |
Using For-In loop with type checks |
Test name | Executions per second |
---|---|
Using the spread operator | 7086809.5 Ops/sec |
Using Object.assign | 10193872.0 Ops/sec |
Using For-In loop | 21776542.0 Ops/sec |
Using For-In loop with type checks | 8444607.0 Ops/sec |
I'll break down what's being tested and compared in the provided benchmark.
Benchmark Overview
The test measures the performance of three approaches to merge objects without mutation:
...
)Object.assign()
for-in
loop with type checksLibrary: Object.assign()
Object.assign()
is a method on the global Object
object that allows you to copy properties from one or more source objects to a target object. It's a convenient way to merge objects without mutation.
Pros and Cons of Object.assign():
Pros:
Cons:
JSON.parse()
to serialize the target object)Using the Spread Operator (...
)
The spread operator (...
) was introduced in ES6 and allows you to expand an object into a new object, preserving all its properties.
Pros and Cons of Using the Spread Operator:
Pros:
for-in
loopsCons:
Traditional For-In Loop with Type Checks
This approach uses a traditional for-in
loop to iterate over the properties of the first object and then checks if each property exists in the second object using Object.prototype.hasOwnProperty.call()
. If it does, the property value is assigned to the target object.
Pros and Cons of Traditional For-In Loop with Type Checks:
Pros:
Cons:
Object.prototype.hasOwnProperty.call()
Other Considerations
Alternative Approaches
Some alternative approaches to merging objects without mutation include:
lodash.merge()
: a popular utility library that provides a fast and readable way to merge objects.es6.object.assign()
with Symbol.for('toStringTag')
: a variant of Object.assign()
that uses a more efficient algorithm for large objects.Keep in mind that the performance differences between these approaches may vary depending on the specific use case and browser version.