Benchmark: Object.assign vs spread vs _.extend

HTML Preparation code:

<script src="https://underscorejs.org/underscore-min.js"></script>

Tests:

Object.assign
var params = { b:"hello", c: true, d:7 }; var other = Object.assign({ a: 2 }, params);
spread operator
var params = { b:"hello", c: true, d:7 }; var other = { a: 2, ...params };
_.extend
var params = { b:"hello", c: true, d:7 }; var other = _.extend({ a: 2 }, params);

Historical Performance Data aggregated from 100 community runs

Desktop Results:

Chrome 83 runs

spread operator

17.8M/s

Object.assign

8.5M/s

_.extend

5.3M/s

Fastest: spread operator (3.3x faster)

View exact numbers

✓ spread operator: 17,813,026 ops/sec
• Object.assign: 8,537,477 ops/sec
• _.extend: 5,322,698 ops/sec

Firefox 17 runs

Object.assign

17.0M/s

_.extend

15.1M/s

spread operator

11.8M/s

Fastest: Object.assign (1.4x faster)

View exact numbers

✓ Object.assign: 17,026,004 ops/sec
• _.extend: 15,107,530 ops/sec
• spread operator: 11,767,460 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
_.extend

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Windows

View result in a separate tab

Object.assign

7.1M/s

_.extend

6.1M/s

spread operator

5.8M/s

View exact numbers

Test name	Executions per second
✓ Object.assign	7,095,324 Ops/sec
_.extend	6,147,134 Ops/sec
spread operator	5,764,463 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark test.

**What is being tested?**

The benchmark tests three ways to merge two objects in JavaScript:

1. **Object.assign()**: This method takes an existing object and merges properties from another object or value into it, overwriting any existing properties with the same name.
2. **Spread operator (`...`)**: Also known as the rest-spread operator, this syntax allows you to expand an object's properties into a new object.
3. **Underscore.js library's `extend()` method**: This function takes two objects and merges their properties into one.

**Options compared**

Each option is being tested for its performance difference in merging two objects with the same set of properties, but different values. The benchmark aims to determine which approach is fastest, most efficient, or has the lowest overhead.

**Pros and Cons of each approach:**

1. **Object.assign()**:
	* Pros: Simple, widely supported, and easy to use.
	* Cons: Can be slow for large objects due to its iterative nature.
2. **Spread operator (`...`)**:
	* Pros: Fast, modern, and widely supported (since ES6).
	* Cons: May not work well with nested objects or large arrays.
3. **Underscore.js library's `extend()` method**:
	* Pros: Efficient, optimized for performance, and can handle complex object structures.
	* Cons: Requires including an external library (underscore.js), which may add overhead.

**Library usage**

The benchmark uses the Underscore.js library for its `extend()` method. This is a popular utility library that provides various functions for working with objects, arrays, and other data structures.

**Special JS feature or syntax**

There's no specific JavaScript feature or syntax being tested in this benchmark. However, it's worth noting that the spread operator (`...`) was introduced in ES6 (2015) and has become a widely supported feature across modern browsers and JavaScript engines.

**Other alternatives**

If you're interested in exploring other approaches for merging objects, here are some alternatives:

1. **Object.create()**: This method creates a new object with a specified prototype.
2. **Object.assign()` variants: Some browsers and JavaScript engines provide variant methods like `assignIn()` or `assignDeep()`, which can handle nested objects and arrays differently.
3. **Lodash library's `merge()` function**: Similar to Underscore.js, Lodash provides an efficient and flexible way to merge objects.
4. **Custom implementation**: Depending on your specific use case, you might be able to create a custom implementation for merging objects that meets your performance requirements.

Keep in mind that the choice of approach often depends on the specific requirements of your project, such as performance, code readability, and maintainability.

Object.assign vs spread vs _.extend (version: 0) Benchmark.js

Comparing performance of: `Object.assign vs spread operator vs _.extend`

Created: 6 years ago by: Guest

Go to the latest result

Object.assign

spread operator

_.extend

Historical Performance Data aggregated from 100 community runs

Desktop Results:

Chrome 83 runs

Firefox 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object.assign vs spread vs _.extend (version: 0) Benchmark.js

Comparing performance of: Object.assign vs spread operator vs _.extend

Created: 6 years ago by: Guest

Go to the latest result

Object.assign

spread operator

_.extend

Historical Performance Data aggregated from 100 community runs

Desktop Results:

Chrome 83 runs

Firefox 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Object.assign vs spread operator vs _.extend`