Benchmark: lodas.extend vs object.assign vs spread operator

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Tests:

extend
var a = { a: 'oh', b: 'my', c: 'god' }; var b = { c: 'goddess' }; var c = _.extend(a, b);
assign
var a = { a: 'oh', b: 'my', c: 'god' }; var b = { c: 'goddess' }; var c = Object.assign(a, b);
spread
var a = { a: 'oh', b: 'my', c: 'god' }; var b = { c: 'goddess' }; var c = { ...a, ...b };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
extend
assign
spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36

Browser/OS: Chrome 91 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
extend	2753760.8 Ops/sec
assign	4626990.0 Ops/sec
spread	21185754.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three JavaScript methods for merging objects: `lodash.extend()`, `Object.assign()`, and the spread operator (`...`). The goal is to determine which method provides the best performance.

**Method 1: Lodash Extend**

Lodash is a popular utility library that provides a wide range of functions, including `extend()`. The `extend()` function merges two or more objects into one, overriding properties from the source objects.

Pros:

* Widely supported and well-maintained
* Can handle nested objects

Cons:

* Adds an extra dependency (the Lodash library)
* May have slower performance due to the overhead of a library call

**Method 2: Object.assign()**

`Object.assign()` is a built-in JavaScript method that merges one or more source objects into a target object.

Pros:

* Built-in, so no additional dependencies are required
* Can handle nested objects

Cons:

* May not work as expected with complex data structures (e.g., when using `...` on an array)
* Performance may vary depending on the browser and implementation

**Method 3: Spread Operator (`...`)**

The spread operator is a relatively new feature in JavaScript that allows you to merge objects into one.

Pros:

* Lightweight, no additional dependencies are required
* Can handle nested objects
* Modern browsers support it (Chrome 91+)

Cons:

* May not work as expected with complex data structures (e.g., when using `Object.assign()` on an array)
* Performance may vary depending on the browser and implementation

**Library: Lodash**

Lodash is a utility library that provides a wide range of functions for tasks such as string manipulation, array operations, and object merging. The `extend()` function is one of its most popular features.

**Special JavaScript Feature/Syntax: None**

There are no special JavaScript features or syntax used in this benchmark.

**Benchmark Preparation Code and Results**

The script preparation code includes a reference to the Lodash library, which is not necessary for understanding the benchmark results. The test cases demonstrate each method:

1. `lodash.extend()`: Merges two objects (`a` and `b`) into one.
2. `Object.assign()`: Merges two objects (`a` and `b`) into one using the spread operator.
3. Spread Operator (`...`): Merges two objects (`a` and `b`) into one.

The benchmark results show that:

* The spread operator performs best, with over 20 million executions per second on a desktop Chrome 91 browser.
* `Object.assign()` follows closely, but with slightly lower performance.
* Lodash `extend()` has the lowest performance, likely due to the overhead of the library call.

**Alternatives**

If you need alternative methods for merging objects, consider using:

* `Object.assign()` (with caution for complex data structures)
* The spread operator (`...`) (on modern browsers with Chrome 91+ support)
* A custom implementation that combines the strengths of each method

Keep in mind that performance may vary depending on your specific use case and browser.

Related benchmarks:

lodas.extend vs object.assign vs spread operator (version: 0)

Comparing performance of: extend vs assign vs spread

Created: 3 years ago by: Registered User

Jump to the latest result

extend

assign

spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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