Benchmark: Object.assign vs spread operator vs property accessor

Script Preparation code:

var arr = [...Array(10).keys()];
var alphabet = [...'abcdefghijklmnopqrstuvwxyz'];

Tests:

Object.assign
arr.reduce((acc, cur) => Object.assign(acc, { [alphabet[cur]]: cur }), {});
spread operator
arr.reduce((acc, cur) => ({ ...acc, [alphabet[cur]]: cur }), {});
property accessor
arr.reduce((acc, cur) => { acc[alphabet[cur]] = cur; return acc; }, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
property accessor

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Object.assign	618953.1 Ops/sec
spread operator	422335.3 Ops/sec
property accessor	4105377.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing three approaches to populate an object:

1. `Object.assign()`
2. Spread operator (`...`)
3. Property accessor (`obj[property] = value`)

These approaches are used in a `reduce()` function, which iterates over an array and applies a function to each element.

**Options Compared**

* `Object.assign()`: A method that copies properties from one or more source objects to a target object.
* Spread operator (`...`): Used to create a new object by copying all the key-value pairs from an existing object.
* Property accessor (`obj[property] = value`): A syntax that directly assigns a value to a property of an object.

**Pros and Cons**

* `Object.assign()`: Pros - efficient for large objects, widely supported. Cons - may be slower due to function call overhead, can be less readable in certain cases.
* Spread operator (`...`): Pros - concise, fast, and widely supported. Cons - may be less readable for complex assignments, not as widely used as `Object.assign()`.
* Property accessor (`obj[property] = value`): Pros - concise, fast, and widely supported. Cons - may be less readable in certain cases, not as widely used as the other two approaches.

**Libraries and Special Features**

There is no library being tested specifically. However, it's worth noting that `Object.assign()` has been a part of the ECMAScript standard since 2015, while the spread operator (`...`) was introduced in ECMAScript 2018.

The use of `reduce()` and the specific syntax used in each benchmark definition (e.g., `{ [alphabet[cur]]: cur }` for `Object.assign()`) is a common pattern in JavaScript. The `reduce()` function is an array method that applies a function to each element of an array, accumulating a value.

**Other Alternatives**

If you want to explore alternative approaches, here are a few:

* Using `for...of` loop instead of `reduce()`: This can be a good option if you need more control over the iteration process.
* Using `forEach()` method: This is another common way to iterate over arrays in JavaScript.
* Using `Object.create()` and property assignment: This approach involves creating an object using `Object.create()` and then assigning properties to it.

Keep in mind that each alternative has its own trade-offs and may not be the best fit for every use case.

Related benchmarks:

Object.assign vs spread operator vs property accessor (version: 0)

Comparing performance of: Object.assign vs spread operator vs property accessor

Created: 5 years ago by: Guest

Jump to the latest result

Object.assign

spread operator

property accessor

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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