Benchmark: push() vs [...] for large arrays

Script Preparation code:

window.top.tests = {push:[], spread:[]};
window.test = (new Array(10)).fill(null);
window.cutoff = 5000;

Tests:

Push
for (let element of window.test) { window.top.tests.push.push(element); } if (window.top.tests.push.length > window.cutoff) { window.top.tests.push = []; console.log('reset push'); }
Spread
for (let element of window.test) { window.top.tests.spread = [...window.top.tests.spread, element]; } if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Push
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser/OS: Chrome 139 on Chrome OS 14541.0.0

View result in a separate tab

Test name	Executions per second
Push	840177.4 Ops/sec
Spread	47246.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its test cases.

**Benchmark Definition**

The benchmark is defined in the provided JSON, which specifies that it compares two approaches for appending elements to a large array: `push()` vs `...` (spread syntax). The script preparation code sets up an empty array `window.top.tests.push` and another array `window.test`, filled with null values. The HTML preparation code is not needed in this case.

**Test Cases**

There are two test cases:

1. **Push**: This test case uses the `push()` method to append elements to the `window.top.tests.push` array.
2. **Spread**: This test case uses the spread syntax (`...`) to append elements to the `window.top.tests.spread` array.

**Options Compared**

The two options are being compared for their performance:

* `push()`: a method-based approach that appends an element to the end of the array by calling the `push()` method on each individual element.
* `...`: a spread-based approach that creates a new array with all elements from another array.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Push()**:
	+ Pros: widely supported, efficient for small arrays.
	+ Cons: can be slower for large arrays due to the repeated `push()` calls.
* **...** (spread syntax):
	+ Pros: generally faster than method-based approaches, especially for large arrays.
	+ Cons: requires a recent JavaScript engine that supports it (not all older engines support it).

**Other Considerations**

It's worth noting that the spread syntax is often preferred in modern JavaScript due to its simplicity and efficiency. However, the `push()` method has been around for longer and may still be more familiar to some developers.

If you're interested in understanding why the `...` approach might be faster, it's because array literals in JavaScript are optimized to use a binary search algorithm to find the correct position to insert an element, which can lead to fewer iterations than the repeated `push()` calls. However, this optimization only kicks in for large arrays, and smaller arrays may not show a significant difference.

**Library Used**

There is no external library used in these test cases, as they are using built-in JavaScript features.

**Special JS Feature or Syntax**

The spread syntax (`...`) was introduced in ECMAScript 2015 (ES6) and has since become a widely supported feature. However, older JavaScript engines may not support it, so it's essential to check the target browser's version when running these tests.

Now that we've explored the benchmark and its test cases, you can see how MeasureThat.net provides a simple way to compare different approaches for common programming tasks in JavaScript!

Related benchmarks:

push() vs [...] for large arrays (version: 0)

Comparing the various ways to append to a large array

Comparing performance of: Push vs Spread

Created: one year ago by: Guest

Jump to the latest result

Push

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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