Benchmark: spread vs non spread

Script Preparation code:


	var rows = []
	for (let i = 0; i < 10000; i++) {
		rows.push(i)
	}

Tests:

spread
var res = rows.reduce( (acc, curr) => ({ ...acc, [curr]: curr, }), {} )
non spread
var res = {} for (let i = 0; i < rows.length; i++) { res[i] = i }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
non spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
spread	53.6 Ops/sec
non spread	2014.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark compares two approaches to creating an object with 10,000 key-value pairs:

1. Using the spread operator (`...`) to create a new object.
2. Manually iterating over the array and assigning values to each key in the object using dot notation (`res[i] = i`).

**Options Compared**

The benchmark tests two options:

* **Option 1: Spread Operator (`...`)**
	+ This approach creates a new object with the spread operator, where all properties from the input object `rows` are added as keys to the new object.
	+ The syntax is `var res = rows.reduce((acc, curr) => ({ ...acc, [curr]: curr }), {})`
* **Option 2: Manual Iteration (`dot notation`)**
	+ This approach manually iterates over the array using a `for` loop and assigns values to each key in the object using dot notation.
	+ The syntax is `var res = {}; for (let i = 0; i < rows.length; i++) { res[i] = i }`

**Pros and Cons**

### Spread Operator (`...`)

Pros:

* More concise and readable code
* Creates a new object without modifying the original array
* Can be more efficient for large datasets, as it avoids creating multiple intermediate objects

Cons:

* May have performance overhead due to the creation of a new object
* May not be supported in older browsers or environments

### Manual Iteration (`dot notation`)

Pros:

* Generally faster and more lightweight, as it doesn't create additional objects
* Can be useful for debugging or when working with very large datasets where memory usage is a concern
* More control over the creation process

Cons:

* Requires manual iteration, which can lead to errors if not done correctly
* Less readable code due to the need for explicit indexing and assignment

**Library and Special JS Features**

The benchmark uses the `reduce()` method from the Array prototype, which is a part of the ECMAScript standard. There are no other libraries or special JS features used in this benchmark.

**Other Considerations**

When choosing between these two approaches, consider the trade-offs between conciseness, readability, performance, and control over the creation process.

If you prioritize code brevity and readability, the spread operator (`...`) might be a better choice. However, if you're working with very large datasets or need fine-grained control over the creation process, manual iteration (`dot notation`) might be more suitable.

**Alternatives**

Other alternatives for creating objects in JavaScript include:

* Using the `Object.create()` method to create an object from an existing object.
* Utilizing a library like Lodash's `_.mapValues()` function, which can simplify the creation process but may introduce additional dependencies.
* Leveraging modern JavaScript features like template literals or destructuring assignment, which can provide alternative syntax for creating objects.

However, these alternatives are not relevant to the specific benchmark at hand, as they don't compare the spread operator and manual iteration directly.

Related benchmarks:

spread vs non spread (version: 0)

Comparing performance of: spread vs non spread

Created: 2 years ago by: Guest

Jump to the latest result

spread

non spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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