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] }

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Array.push in for loop

286K/s

Spread operator

18K/s

Fastest: Array.push in for loop (15.5x faster)

View exact numbers

✓ Array.push in for loop: 285,897 ops/sec
• Spread operator: 18,401 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one month ago)

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

Browser/OS: Chrome 151 on Windows

View result in a separate tab

Array.push in for loop

274K/s

Spread operator

18K/s

View exact numbers

Test name	Executions per second
✓ Array.push in for loop	274,116 Ops/sec
Spread operator	18,008 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.

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

Which is faster

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

Created: 2 years ago by: Guest

Go to the latest result

Array.push in for loop

Spread operator

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Which is faster

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

Created: 2 years ago by: Guest

Go to the latest result

Array.push in for loop

Spread operator

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

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: `Array.push in for loop vs Spread operator`