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' };

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: 3 hours ago)

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

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	109972656.0 Ops/sec
Using Object.assign	77092728.0 Ops/sec
New object	251634720.0 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.

Related benchmarks:

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: 5 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

New object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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