Benchmark: Merging Objetcs - MeasureThat.net

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>

Script Preparation code:

var foo = {
    "a": "a",
    "b": "b",
    "c": "c"
};

var bar = {
    "b": "b",
    "d": "d",
    "f": "f"
};

var zar = {
    "b": "b",
    "g": "g"
};

Tests:

assign
var result = Object.assign({}, foo, bar, zar);
spread
var result = { ...foo, ...bar, ...zar };
_.extend
var result = _.extend({}, foo, bar, zar);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
assign
spread
_.extend

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Windows

View result in a separate tab

Test name	Executions per second
assign	2290455.2 Ops/sec
spread	3346699.0 Ops/sec
_.extend	1622222.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its results.

**What is being tested?**

The benchmark is testing three different approaches for merging objects in JavaScript:

1. `Object.assign()`
2. Spread syntax (`{ ...foo, ...bar, ...zar }`)
3. Underscore.js's `_extend()` function

Each test case creates two objects, `foo` and `bar`, with overlapping properties, and a third object, `zar`, that also overlaps with `bar`. The benchmark then measures the time it takes to merge these three objects using each of the above approaches.

**Options being compared**

The options being compared are:

* `Object.assign()`: This is a built-in JavaScript method for merging objects. It creates a new object and copies all enumerable own properties from one or more source objects into a new object.
* Spread syntax (`{ ...foo, ...bar, ...zar }`): This is a feature introduced in ECMAScript 2018 that allows you to merge objects using the spread operator (`...`). When used with the rest parameter syntax, it creates a new object and copies all enumerable own properties from the source objects into the new object.
* Underscore.js's `_extend()` function: This is a utility function provided by the Underscore.js library that merges two or more objects into a single object.

**Pros and cons of each approach**

Here are some general pros and cons of each approach:

* `Object.assign()`:
	+ Pros: Fast, widely supported, and easy to use.
	+ Cons: Creates a new object, which can be inefficient if the source objects are large.
* Spread syntax (`{ ...foo, ...bar, ...zar }`):
	+ Pros: Fast, concise, and modern feature that is gaining widespread adoption.
	+ Cons: May not work as expected in older browsers or environments that don't support ES6+ features.
* Underscore.js's `_extend()` function:
	+ Pros: Flexible, can handle complex merging scenarios, and is well-documented.
	+ Cons: Requires an additional library dependency, which may be a concern for some developers.

**Library usage**

In this benchmark, the `Underscore.js` library is used in one of the test cases (`_extend()` function). Underscore.js is a popular utility library that provides various functions for working with arrays, objects, and other data structures. In this case, `_extend()` is used to merge two or more objects into a single object.

**Special JavaScript features**

None of the benchmark's test cases rely on special JavaScript features like `let`, `const`, or arrow functions.

**Alternative approaches**

Other approaches for merging objects in JavaScript include:

* Using a `for...in` loop to iterate over the properties of one or more objects and adding them to a new object.
* Using a library like Lodash, which provides a `merge()` function that can handle complex merging scenarios.
* Using a functional programming approach, such as using `reduce()` or `reduceRight()` to merge objects.

Overall, this benchmark helps developers understand the performance characteristics of different approaches for merging objects in JavaScript, and can inform decisions about which approach to use in specific situations.

Related benchmarks:

Merging Objetcs (version: 0)

Comparing performance of: assign vs spread vs _.extend

Created: one year ago by: Registered User

Jump to the latest result

assign

spread

_.extend

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):