Benchmark: JavaScript spread operator vs Object.assign (no mutate) performance

Tests:

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

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 this benchmark.

**Benchmark Goal**

The goal of this benchmark is to compare the performance of two approaches for creating a new object: using the JavaScript spread operator (`...`) and `Object.assign`.

**Options Compared**

There are only two options being compared:

1. **Using the spread operator**: This approach uses the spread operator (`...`) to create a new object by spreading the properties from `firstObject` and `secondObject`.
2. **Using Object.assign (no mutate)**: This approach uses `Object.assign` with an empty object (`{}`) as the target object, creating a shallow copy of the source objects.

**Pros and Cons**

Here's a brief summary:

* **Using the spread operator**:
	+ Pros: Simple, concise, and readable syntax. It creates a new object without modifying the original objects.
	+ Cons: Performance might be slower compared to other methods, as it involves creating an intermediate object.
* **Using Object.assign (no mutate)**:
	+ Pros: Fast performance, as `Object.assign` can create a shallow copy of the source objects using the same memory allocation. However, this approach modifies the original objects.
	+ Cons: Less readable syntax compared to the spread operator. It also modifies the original objects.

**Library and Purpose**

In this benchmark, no specific library is being tested or used. The focus is on comparing two basic approaches for creating a new object in JavaScript.

**Special JS Feature/Syntax**

The spread operator (`...`) was introduced in ECMAScript 2018 (ES2018) as part of the standardization process. It allows you to create a new object by spreading the properties from an existing object or array into a new object. This feature is widely supported in modern JavaScript engines.

**Other Alternatives**

If you're interested in other ways to create a new object, here are some alternatives:

* Using `Object.create()` with an empty object: `const finalObject = Object.create({});`
* Using `JSON.parse(JSON.stringify())`: `const finalObject = JSON.parse(JSON.stringify(firstObject, secondObject));` (Note: This method creates a deep copy of the objects)
* Using a library like Lodash's `_.merge()` or `_`.extend()`

These alternatives might have different performance characteristics and use cases compared to the spread operator and `Object.assign` approaches tested in this benchmark.

Related benchmarks:

JavaScript spread operator vs Object.assign (no mutate) performance (version: 0)

Performance difference to create a new object using spread, vs Object.assign

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

Created: 4 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

No previous run results

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