<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
var defaultOptions = {
headers: {
'content-type': 'application/json',
'user-agent': 'super-app',
}
};
var options = { headers: {'content-type': 'application/xml' }, data: { 'key': 'value' } };
var result = _.merge(defaultOptions, options);
var defaultOptions = {
headers: {
'content-type': 'application/json',
'user-agent': 'super-app',
}
};
var options = { headers: { 'content-type': 'application/xml' }, data: { 'key': 'value' } };
var result = Object.assign(defaultOptions, options);
var defaultOptions = {
headers: {
'content-type': 'application/json',
'user-agent': 'super-app',
}
};
var options = { headers: { 'content-type': 'application/xml' }, data: { 'key': 'value' } };
var result = { defaultOptions, options };
var defaultOptions = {
headers: {
'content-type': 'application/json',
'user-agent': 'super-app',
}
};
var options = { headers: { 'content-type': 'application/xml' }, data: { 'key': 'value' } };
var clonedOptions = JSON.parse(JSON.stringify(options));
var result = Object.assign(defaultOptions, clonedOptions);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
lodash merge | |
object.assign | |
spread | |
json deep clone |
Test name | Executions per second |
---|---|
lodash merge | 367361.0 Ops/sec |
object.assign | 4670935.0 Ops/sec |
spread | 1646190.8 Ops/sec |
json deep clone | 450785.7 Ops/sec |
Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.
Benchmark Overview
The benchmark compares the performance of three approaches to merge two objects: lodash.merge
, Object.assign
, and the spread operator ({ ...defaultOptions, ...options }
).
Lodash Merge
_merge
is used to merge two objects into one. It recursively merges the properties of the second object (options
) into the first object (defaultOptions
).Object.assign
Object.assign
is a built-in JavaScript method that merges one or more source objects into a target object.options
object into the defaultOptions
object.Spread Operator
{ ...defaultOptions, ...options }
) is a shorthand syntax that creates a new object by copying the properties from one or more source objects.options
object into the defaultOptions
object using the spread operator.Object.assign
for very small objects due to the overhead of creating a new object.JSON Deep Clone
This approach is not being compared in terms of performance, but rather used as a control case. It creates a deep clone of the options
object using JSON.parse(JSON.stringify(options))
, and then merges it into the defaultOptions
object using Object.assign
.
options
object before merging it with the defaultOptions
object.Comparison
The benchmark compares the performance of these three approaches in terms of:
ExecutionsPerSecond
)Other Alternatives
Some other alternatives that could be considered for merging objects include:
Object.create()
and Object.assign()
reduce()
or merge()
However, these alternatives are not being tested in this benchmark.
Overall, the benchmark provides a good comparison of the performance characteristics of three common approaches to merging objects in JavaScript.