Benchmark: PushApply versus Spread

Script Preparation code:

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

Tests:

Concat
window.top.tests.concat = window.top.tests.concat.concat(window.test); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
PushApply
window.top.tests.papply.push.apply(window.top.tests.papply, window.test); if (window.top.tests.papply.length > window.cutoff) { window.top.tests.papply = []; console.log('reset papply'); }
Push
window.top.tests.spread.push(...window.test); 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
Concat
PushApply
Push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
Concat	366562.7 Ops/sec
PushApply	662576.1 Ops/sec
Push	857095.6 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 tested?**

The provided benchmark measures the performance difference between three approaches to push elements onto an array:

1. **Concat**: using the `concat` method to add elements to the end of the array.
2. **PushApply**: using the `push.apply()` method to add all elements from a source array (in this case, a new array created with `new Array(10).fill(null)`).
3. **Push**: using the spread operator (`...`) to add elements to the end of the array.

**Options compared**

The benchmark compares these three approaches to push elements onto an array. The options being compared are:

* **Concat**: using the `concat` method, which creates a new array and returns it.
* **PushApply**: using the `push.apply()` method, which applies a callback function (in this case, a simple loop) to each element of the source array and pushes them onto the target array.
* **Push**: using the spread operator (`...`) to add elements to the end of the array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Concat**:
	* Pros: simple, widely supported, and relatively fast (since it creates a new array).
	* Cons: creates a new array, which can be memory-intensive.
2. **PushApply**:
	* Pros: avoids creating a new array by using `push.apply()`, which is more efficient in terms of memory usage.
	* Cons: uses `apply()` method, which can be slower than the simple `push()` method.
3. **Push** (using spread operator):
	* Pros: fast and memory-efficient since it uses the spread operator to add elements without creating a new array.
	* Cons: requires JavaScript 2015 or later for the spread operator syntax.

**Library**

None of the test cases use any external libraries. The code is self-contained and uses only built-in JavaScript methods and operators.

**Special JS feature**

The benchmark uses the `push.apply()` method, which is a specialized method that applies a callback function to each element of an array. This is not a standard part of JavaScript, but rather an extension provided by the `Array.prototype.push.apply` method in older versions of Internet Explorer.

However, it's worth noting that modern browsers (including Chrome) support this method and use it efficiently under the hood.

**Other alternatives**

If you're looking for alternative ways to push elements onto an array, here are a few options:

* Using `unshift()` instead of `push()`, which reverses the order of elements in the array.
* Using `splice()` to insert or remove elements from the middle of the array.
* Using `Array.prototype.reduce()` and `Array.prototype.forEach()` to create a new array with transformed elements.

Keep in mind that each approach has its own trade-offs in terms of performance, memory usage, and syntax complexity.

Related benchmarks:

PushApply versus Spread (version: 0)

Comparing performance of: Concat vs PushApply vs Push

Created: 2 years ago by: Guest

Jump to the latest result

Concat

PushApply

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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