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)));
}

​x
 
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)});

 
let result = [];arrays.forEach(curr => {result.push(...curr)});

concat

let result = [];
arrays.forEach(curr => {result = result.concat(curr)});

 
let result = [];arrays.forEach(curr => {result = result.concat(curr)});

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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 5 months ago):

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:

Using push: spreading the inner array into the outer array using Array.prototype.push.
Using concat: concatenating the inner array with the outer array using Array.prototype.concat.
Using concat spread (introduced in ES6): concatenating the inner array directly with the outer array using the spread operator (...).
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:

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.
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.
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.
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.

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