Benchmark: push array elements using spread vs iteration

Script Preparation code:

var numSamples = 10000
var data = "TEST DATA"
var makeArray = len=> Array(len).fill(data)

Tests:

spread
var a = [] var b = makeArray(numSamples) a.push(...b)
iteration using forEach
var a = [] var b = makeArray(numSamples) b.forEach(it => a.push(it))
iteration using for
var a = [] var b = makeArray(numSamples) for (var i=0; i<b.length; i++) { a.push(b[i]) }
iteration using for...of
var a = [] var b = makeArray(numSamples) for (var it of b) { a.push(it) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
iteration using forEach
iteration using for
iteration using for...of

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

spread

37K/s

iteration using for...of

28K/s

iteration using for

28K/s

iteration using forEach

11K/s

View exact numbers

Test name	Executions per second
✓ spread	37,481 Ops/sec
iteration using for...of	28,338 Ops/sec
iteration using for	28,284 Ops/sec
iteration using forEach	11,088 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 provided benchmark definition and test cases to understand what's being tested, compared, and the pros/cons of different approaches.

**Benchmark Definition**

The benchmark defines two main aspects:

1. **Array Initialization**: The benchmark creates an array with a fixed length using the `makeArray` function.
2. **Pushing elements into the array**: The benchmark compares four ways to push elements from another array (`b`) into the initial array (`a`). The four approaches are:
	* Using the spread operator (`...`)
	* Iterating over the elements of `b` using `forEach`
	* Iterating over the elements of `b` using a traditional `for` loop
	* Iterating over the elements of `b` using an arrow function (`for...of`)
3. **Comparison**: The benchmark compares the performance of these four approaches.

**Libraries and Features**

There are no specific libraries used in this benchmark, but it relies on JavaScript's built-in features:

* Spread operator (`...`)
* `forEach` method
* Traditional `for` loop
* Arrow function (`for...of`)

**Pros and Cons of each approach:**

1. **Spread Operator (`...`)**
	* Pros:
		+ Concise and readable syntax.
		+ Can be used to initialize arrays with a specific length.
	* Cons:
		+ May incur some overhead due to the creation of intermediate arrays.
2. **Iterating over elements using `forEach`**
	* Pros:
		+ Easy to read and understand, as it's similar to traditional loops.
	* Cons:
		+ May be slower than other approaches due to the use of a separate function call.
3. **Traditional `for` loop**
	* Pros:
		+ Can provide better control over iteration variables and indexing.
	* Cons:
		+ Requires more code and is less readable, especially for complex iterations.
4. **Iterating over elements using arrow function (`for...of`)**
	* Pros:
		+ Provides a concise syntax similar to traditional loops.
		+ Is generally faster than `forEach` due to the elimination of an extra function call.

**Other Considerations**

* The benchmark assumes that the `makeArray` function creates arrays with a fixed length, which may not be the case in all scenarios.
* The benchmark does not account for potential issues like array resizing or modifications during iteration.
* The results may vary depending on the specific use case and requirements.

**Alternative approaches:**

Other approaches to push elements into an array might include:

* Using `Array.prototype.push.apply()` (a more concise alternative to a traditional loop)
* Using `Array.prototype.reduce()` to accumulate elements in the target array
* Using a custom implementation with manual iteration and indexing

Keep in mind that each approach has its own trade-offs, and the best choice depends on the specific requirements of your use case.

push array elements using spread vs iteration (version: 4) Benchmark.js

Compare push using a spreaded array versus adding items one at a time.

Comparing performance of: `spread vs iteration using forEach vs iteration using for vs iteration using for...of`

Created: 3 years ago by: Registered User

Go to the latest result

spread

iteration using forEach

iteration using for

iteration using for...of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

push array elements using spread vs iteration (version: 4) Benchmark.js

Compare push using a spreaded array versus adding items one at a time.

Comparing performance of: spread vs iteration using forEach vs iteration using for vs iteration using for...of

Created: 3 years ago by: Registered User

Go to the latest result

spread

iteration using forEach

iteration using for

iteration using for...of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `spread vs iteration using forEach vs iteration using for vs iteration using for...of`