Benchmark: JavaScript V8 Array.push vs spread operator

Tests:

Array.push in for loop
const arr1 = Array(1000).fill(0); const arr2 = Array(0); for (const el of arr1) { arr2.push(el) }
Spread operator
const arr1 = Array(10000).fill(0); let arr2 = Array(0); for (const el of arr1) { arr2 = [arr2, el] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.push in for loop
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 24 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 26 on iOS 18.7

View result in a separate tab

Test name	Executions per second
Array.push in for loop	378567.0 Ops/sec
Spread operator	23449.7 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.

**What is being tested?**

The provided JSON represents two individual test cases, each testing the performance of either the `Array.push` method or the spread operator (`...`) in different scenarios. The tests aim to determine which approach is faster for adding elements to an array.

**Options compared:**

There are two main options being compared:

1. **`Array.push`**: This method adds one or more elements to the end of an array.
2. **Spread operator (`...`)**: This operator creates a new array by spreading the elements of another array (or other iterable) into it.

**Pros and Cons of each approach:**

* `Array.push`:
	+ Pros:
		- Native support in JavaScript, making it highly optimized.
		- Can handle large arrays efficiently due to its use of internal buffers.
	+ Cons:
		- May lead to stack overflow errors for very large arrays (in theory, but unlikely to occur in practice).
		- Less intuitive for some developers who are not familiar with the native method.
* Spread operator (`...`):
	+ Pros:
		- More modern and intuitive syntax, making it easier to understand for newer developers.
		- Does not have stack overflow concerns like `Array.push`.
	+ Cons:
		- May incur a performance overhead compared to native methods due to the creation of a new array.

**Library and its purpose:**

In the provided benchmark definition, there is no explicit mention of a library. However, it's worth noting that many JavaScript benchmarks use libraries like `microbenchmark` or `Benchmark.js` to define and run benchmarks. These libraries provide a way to write and compare benchmark results across different environments.

**Special JS feature or syntax:**

There are no special features or syntax used in the provided benchmark definition that would require special explanation. The tests focus on comparing two straightforward JavaScript concepts.

**Other alternatives:**

If you're looking for alternative approaches to benchmarking JavaScript performance, consider the following:

1. **`Array.prototype.push`**: Some benchmarks use `Array.prototype.push` instead of just `push`, which can provide slightly different results.
2. **`Array.from()`**: Another approach is to use `Array.from()` with an array-like object as its argument, which creates a new array by spreading the elements of the original array into it.
3. **Native WebAssembly (WASM) implementations**: Some benchmarks use WASM implementations of JavaScript functions, such as `wasm-assembly`, to evaluate performance in a more controlled environment.

Keep in mind that these alternatives may provide different results depending on the specific benchmark and browser being tested.

In summary, the MeasureThat.net benchmark compares the performance of two common approaches for adding elements to an array: the native `Array.push` method and the spread operator (`...`). The pros and cons of each approach are discussed, along with considerations for library usage and special features.

Related benchmarks:

JavaScript V8 Array.push vs spread operator (version: 0)

Which is faster

Comparing performance of: Array.push in for loop vs Spread operator

Created: 2 years ago by: Guest

Jump to the latest result

Array.push in for loop

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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