Benchmark: JavaScript spread operator vs Object.assign with 3 args 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:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36 Edg/88.0.705.50

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	740392.8 Ops/sec
Using Object.assign	1261343.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this JavaScript benchmark.

**Benchmark Definition**

The benchmark is comparing the performance of two approaches: using the JavaScript spread operator (`...`) and `Object.assign()` with three arguments.

**Options Compared**

Two options are compared:

1. **Using the spread operator**: The syntax `{ ...firstObject, ...secondObject }` creates a new object by spreading the properties of `firstObject` and `secondObject`.
2. **Using Object.assign() with three arguments**: `const finalObject = Object.assign({}, firstObject, secondObject);`

**Pros and Cons**

**Using the spread operator:**

Pros:

* More concise and readable syntax
* Creates a new object without mutating the original objects
* Can be more efficient since it only creates a single new object reference

Cons:

* May not work in older browsers or environments that don't support the spread operator
* Can lead to unexpected behavior if the spread operator is used with functions, classes, or other complex data structures

**Using Object.assign() with three arguments:**

Pros:

* Works in all browsers and environments that support `Object.assign()`
* Can be more efficient since it only creates a single new object reference

Cons:

* Less concise and readable syntax
* Mutates the original objects (if they are assigned back to a variable)
* May lead to unexpected behavior if not used carefully

**Library Used**

In this benchmark, there is no explicit library being used. However, `Object.assign()` is a built-in JavaScript method.

**Special JS Feature or Syntax**

The spread operator (`...`) is a relatively recent feature introduced in ECMAScript 2018 (ES2018). It allows you to create new objects by spreading the properties of existing objects. This syntax is not supported in older browsers or environments that don't support ES2018.

**Other Alternatives**

If the spread operator is not available, other alternatives for creating a new object with merged properties include:

* Using `Object.create()` and assigning properties using bracket notation (`obj = Object.create({}); obj['prop1'] = 'value';`)
* Using `JSON.parse(JSON.stringify())` (though this can lead to unexpected behavior if the objects being merged have functions or other non-primitive properties)

**Benchmark Preparation Code**

The benchmark preparation code is not explicitly provided in the JSON, but it's likely that a simple script is executed before running the benchmark. This script might include:

* Defining the `firstObject` and `secondObject` variables with sample data
* Creating an empty object using `const finalObject = {};`
* Using either the spread operator or `Object.assign()` to merge the properties of `firstObject` and `secondObject` into `finalObject`

**Benchmark Result**

The benchmark result shows two runs with different results:

* Using `Object.assign()`: 1261343.125 executions per second
* Using the spread operator: 740392.8125 executions per second

This suggests that using `Object.assign()` is slightly faster than using the spread operator in this specific benchmark. However, it's essential to note that benchmark results can vary depending on various factors, such as browser version, platform, and other system resources.

Related benchmarks:

JavaScript spread operator vs Object.assign with 3 args performance (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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