Benchmark: JavaScript spread operator vs Object.assign performance redux like

Tests:

Using the spread operator
const object = { a: 'Hello world', b: [1,2,3], c: 42 }; const finalObject = { ...object, c: 69 };
Using Object.assign
const object = { a: 'Hello world', b: [1,2,3], c: 42 }; const finalObject = Object.assign({}, {c: 69});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	34601912.0 Ops/sec
Using Object.assign	19307806.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasuringThat.net is testing the performance of two different ways to create a new object with modified properties: using the JavaScript spread operator (`...`) and `Object.assign`. Specifically, it's comparing the execution speed of these two methods when used in conjunction with an existing object.

The benchmark is testing how fast each method can be executed on a specific test case:

`const object = { a: 'Hello world', b: [1,2,3], c: 42 };`
`const finalObject = { ...object, c: 69 };` (using the spread operator)

`const object = { a: 'Hello world', b: [1,2,3], c: 42 };`
`const finalObject = Object.assign({}, {c: 69});` (using `Object.assign`)

**Options compared**

The two options being compared are:

1. **JavaScript spread operator (`...`)**: This method uses the spread syntax to create a new object with modified properties.
2. **`Object.assign()`**: This method is used to copy existing values into a new object.

**Pros and Cons of each approach**

**Using the spread operator (`...`)**

Pros:

* More concise and expressive way to create new objects
* Native JavaScript syntax, so it's likely to be more efficient

Cons:

* Might not work as expected if `object` is null or undefined
* Can only be used with objects that have spreadable properties (e.g., arrays)

**Using `Object.assign()`**

Pros:

* More robust and flexible way to create new objects
* Works with any object, including ones with non-spreadable properties

Cons:

* Requires more code to achieve the same result
* Might be slower due to the additional function call

**Other considerations**

Both methods have their own advantages and disadvantages. Using the spread operator can make your code more concise and readable, but it might not work as expected in all situations. On the other hand, using `Object.assign()` provides more flexibility, but at the cost of readability.

**Library usage**

In this benchmark, there is no explicit library being used. However, some browsers (like Chrome) may have built-in optimizations or caching that can affect the results.

**Special JS feature or syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. The focus is on comparing two simple methods for creating new objects.

**Alternative approaches**

If you're interested in exploring alternative approaches, here are a few options:

1. **Destructuring assignment**: This method uses destructuring to extract properties from an object and assign them to new variables.
2. **`Object.create()`**: This method creates a new object with the specified prototype.
3. **ES6 class constructors**: This method uses class constructors to create new objects.

These alternatives might provide different performance characteristics or trade-offs in terms of readability and conciseness.

Related benchmarks:

JavaScript spread operator vs Object.assign performance redux like (version: 0)

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

Created: 6 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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