Benchmark: JavaScript spread operator vs Object.assign vs new object performance

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar', evenMoreData: 'overridethis' } const finalObject = { ...firstObject, evenMoreData: 'test' };
Using Object.assign
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar', evenMoreData: 'overridethis' } const finalObject = Object.assign(firstObject, {evenMoreData: 'test'});
New object
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar', evenMoreData: 'overridethis' } const finalObject = { sampleData: firstObject.sampleData, moreData: firstObject.firstObject, evenMoreData: 'test' };

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

New object

180.3M/s

Using the spread operator

71.9M/s

Using Object.assign

49.2M/s

Fastest: New object (3.7x faster)

View exact numbers

✓ New object: 180,344,576 ops/sec
• Using the spread operator: 71,887,344 ops/sec
• Using Object.assign: 49,213,052 ops/sec

Firefox 6 runs

New object

1934.0M/s

Using Object.assign

24.6M/s

Using the spread operator

15.2M/s

Fastest: New object (126.9x faster)

View exact numbers

✓ New object: 1,934,041,472 ops/sec
• Using Object.assign: 24,622,372 ops/sec
• Using the spread operator: 15,235,266 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
Using the spread operator
Using Object.assign
New object

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

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

Browser/OS: Firefox 152 on Windows

View result in a separate tab

New object

1794.7M/s

Using Object.assign

24.4M/s

Using the spread operator

16.0M/s

View exact numbers

Test name	Executions per second
✓ New object	1,794,699,008 Ops/sec
Using Object.assign	24,439,644 Ops/sec
Using the spread operator	15,959,771 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

The benchmark is comparing three different approaches to merge objects in JavaScript:

1. **Spread Operator (`...`)**: This approach uses the spread operator to create a new object and then merges the `firstObject` with it, assigning a new value to `evenMoreData`.
2. **`Object.assign()`**: This approach uses the `Object.assign()` method to merge two objects and assign the result back to `finalObject`.
3. **New Object Creation (`new Object()`)**: This approach creates a new object using the `new Object()` constructor, copies properties from `firstObject`, and then assigns a new value to `evenMoreData`.

Now, let's discuss the pros and cons of each approach:

**Spread Operator (`...`)**

Pros:

* Concise and readable syntax
* Creates a new object without mutating the original one
* Efficient, as it avoids creating an intermediate object

Cons:

* Can be slower than other approaches for very large objects due to the overhead of creating a new object and copying properties
* May not work well with complex objects or nested structures (although this is being tested in the benchmark)

**`Object.assign()`**

Pros:

* Fast and efficient, as it directly assigns values from one object to another without creating an intermediate object
* Can handle large objects efficiently

Cons:

* Can be less readable than other approaches due to its functional programming style
* May mutate the original object if not used with caution (although this is being tested in the benchmark)

**New Object Creation (`new Object()`)**

Pros:

* Easy to understand and use, as it creates a new object from scratch
* Works well with large objects or complex structures

Cons:

* More verbose syntax compared to the spread operator
* May be slower than `Object.assign()` due to the overhead of creating an intermediate object

The library used in this benchmark is not explicitly mentioned. However, both `Object.assign()` and the spread operator rely on the underlying JavaScript engine's functionality.

There are other alternatives for merging objects in JavaScript, such as using a library like Lodash or Immutable.js, which provide more functional programming-style APIs for working with data structures. Additionally, modern JavaScript engines also provide built-in methods like `Object.create()` and `Object.assign()`, making it easier to work with objects.

Other special JS features or syntax that might be used in benchmarking include:

* ES6 classes (not explicitly mentioned in this benchmark)
* Arrow functions (not explicitly mentioned in this benchmark)

However, without more context or explicit mentions of these features, they are not relevant to the explanation provided.

JavaScript spread operator vs Object.assign vs new object performance (version: 0)

Comparing performance of: `Using the spread operator vs Using Object.assign vs New object`

Created: 6 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

New object

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JavaScript spread operator vs Object.assign vs new object performance (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs New object

Created: 6 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

New object

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 28 runs

Firefox 6 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: `Using the spread operator vs Using Object.assign vs New object`