Benchmark: array concat vs push vs spread

Script Preparation code:

const arrayCount = 500;
const arraySize = 4;

var arrays = [];
for(let i = 0; i < arrayCount; i++) {
  arrays.push(Array.from({length: arraySize}, () => Math.floor(Math.random() * 40)));
}

Tests:

push
let result = []; arrays.forEach(curr => {result.push(...curr)});
concat
let result = []; arrays.forEach(curr => {result = result.concat(curr)});
concat spread
let result = []; result = result.concat(...arrays);
push apply
let result = []; arrays.forEach(curr => {Array.prototype.push.apply(result, curr);});
concat apply
let result = []; result = Array.prototype.concat.apply(result, arrays);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
push
concat
concat spread
push apply
concat apply

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.86 YaBrowser/21.3.0.740 Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 21 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
push	53422.2 Ops/sec
concat	2723.3 Ops/sec
concat spread	58486.4 Ops/sec
push apply	8999.6 Ops/sec
concat apply	56559.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is testing the speed of concatenating multiple arrays in JavaScript. The script preparation code creates an array `arrays` with 500 elements, each containing an array of length 4 filled with random integers between 0 and 40. The benchmark then tests four different methods to concatenate these arrays:

1. Using `push`: spreading the inner array into the outer array using `Array.prototype.push`.
2. Using `concat`: concatenating the inner array with the outer array using `Array.prototype.concat`.
3. Using `concat spread` (introduced in ES6): concatenating the inner array directly with the outer array using the spread operator (`...`).
4. Using `push apply` and `concat apply`: applying a function to push or concatenate elements into the result array.

**Library usage**

The benchmark uses no external libraries, apart from built-in JavaScript functions like `Array.prototype.push`, `Array.prototype.concat`, and `Array.from`.

**Special JS features**

The benchmark does not use any special JavaScript features like Web Workers, async/await, or Promises. It only relies on vanilla JavaScript syntax.

**Options comparison**

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

1. **`push`**: Spreading the inner array into the outer array using `Array.prototype.push`. This is the most common way to concatenate arrays in JavaScript.
	* Pros: simple, widely supported, and fast.
	* Cons: can lead to slower performance for large arrays due to the overhead of creating a new array and pushing elements into it.
2. **`concat`**: Concatenating the inner array with the outer array using `Array.prototype.concat`.
	* Pros: creates a new array and copies all elements from both arrays, making it more predictable than `push`.
	* Cons: slower performance compared to `push`, especially for large arrays.
3. **`concat spread` (ES6)**: Concatenating the inner array directly with the outer array using the spread operator (`...`).
	* Pros: fast and concise way to concatenate arrays, reducing overhead compared to `concat`.
	* Cons: may not work in older browsers or environments that don't support ES6 features.
4. **`push apply` and `concat apply`**: Applying a function to push or concatenate elements into the result array.
	* Pros: allows for more control over the concatenation process, potentially leading to better performance for specific use cases.
	* Cons: may be less intuitive and less readable compared to other methods.

**Benchmark results**

The benchmark results show that `concat spread` (ES6) is the fastest method among all options, followed closely by `push`. The slower methods (`concat`, `push apply`, and `concat apply`) are likely due to their additional overhead or predictability requirements.

Keep in mind that these results may not be representative for all use cases, as performance can vary depending on specific scenarios and environments.

Related benchmarks:

array concat vs push vs spread (version: 6)

testing speed of concatenating many arrays

Comparing performance of: push vs concat vs concat spread vs push apply vs concat apply

Created: 4 years ago by: Registered User

Jump to the latest result

push

concat

concat spread

push apply

concat apply

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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