const a = { x: 'xxx', y: 1, z: null }
const b = { z: 1, u: 'uuu', v: null }
Object.assign(a, b);
const a = { x: 'xxx', y: 1, z: null }
const b = { z: 1, u: 'uuu', v: null }
for (const prop in b) {
if (b.hasOwnProperty(prop)) {
a[prop] = b[prop];
}
}
const a = { x: 'xxx', y: 1, z: null }
const b = { z: 1, u: 'uuu', v: null }
for (const prop of Object.keys(b)) {
a[prop] = b[prop];
}
const a = { x: 'xxx', y: 1, z: null }
const b = { z: 1, u: 'uuu', v: null }
for (const [key, value] of Object.entries(b)) {
a[key] = value;
}
const a = { x: 'xxx', y: 1, z: null }
const b = { z: 1, u: 'uuu', v: null }
for (const prop in b) {
a[prop] = b[prop];
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Object.assign | |
for in loop | |
for of loop | |
for Object entries | |
for in without check |
Test name | Executions per second |
---|---|
Object.assign | 11592283.0 Ops/sec |
for in loop | 17092460.0 Ops/sec |
for of loop | 7126999.0 Ops/sec |
for Object entries | 4244930.5 Ops/sec |
for in without check | 19349014.0 Ops/sec |
Let's break down what's being tested in this benchmark.
The test is comparing four different approaches to merge two objects: Object.assign
, for in loop
, for of loop
, and for Object entries
.
1. Object.assign
Object.assign()
is a built-in JavaScript method that copies the properties of one or more source objects into a target object. In this benchmark, it's being used to merge two objects, a
and b
, where a
has some properties with null values, and b
has some properties with different values.
Pros:
Cons:
2. For in loop
The for in
loop is used to iterate over the properties of an object. In this benchmark, it's being used to merge two objects by iterating over the properties of b
and assigning each property value to a
. However, it includes a check using hasOwnProperty()
to avoid modifying inherited properties.
Pros:
Cons:
Object.assign()
.3. For of loop
The for...of
loop is used to iterate over arrays or iterables, but it can also be used with objects using Object.entries()
or other methods that return an array-like object. In this benchmark, it's being used with Object.entries()
to merge two objects.
Pros:
for in
loop.Cons:
for in
due to its reliance on Object.entries()
.4. For Object entries
This is a variant of the for...of
loop used specifically with Object.entries()
to iterate over the properties of an object.
Pros:
for in
loop.Cons:
for in
due to its reliance on Object.entries()
.The benchmark measures the execution speed of each approach, with Firefox 111 as the test browser. The results show that:
For in without check
is the fastest.Object.assign()
is relatively fast but slower than the for
loops.For in loop
and For Object entries
are similar in performance but slightly slower than Object.assign()
.For of loop
is slower due to its overhead.Other alternatives to these approaches include:
{...a, ...b}
)merge
functionNote that the choice of approach depends on the specific requirements of your use case. For example, if you need to merge large objects, one of the more efficient approaches might be preferred. If conciseness is important, Object.assign()
or for...of
with Object.entries()
might be a better choice.