Benchmark: Fork - Array concat vs spread operator vs push

Tests:

Array.prototype.concat

const arr1 = [];
const arr2 = [];
const arr3 = [];
const arrs = []

for (let i = 0; i < 2000; i++) {
  arr1.push(i);
}
for (let i = 0; i < 3000; i++) {
  arr2.push(i);
}
for (let i = 0; i < 1000; i++) {
  arr3.push(i);
}
arrs.push(arr1, arr2, arr3);

arrs.reduce((memo, val) => {
  return memo.concat(val);
}, []);

​x
 
const arr1 = [];const arr2 = [];const arr3 = [];const arrs = []​for (let i = 0; i < 2000; i++) {  arr1.push(i);}for (let i = 0; i < 3000; i++) {  arr2.push(i);}for (let i = 0; i < 1000; i++) {  arr3.push(i);}arrs.push(arr1, arr2, arr3);​arrs.reduce((memo, val) => {  return memo.concat(val);}, []);​

spread operator

const arr1 = [];
const arr2 = [];
const arr3 = [];
const arrs = []

for (let i = 0; i < 2000; i++) {
  arr1.push(i);
}
for (let i = 0; i < 3000; i++) {
  arr2.push(i);
}
for (let i = 0; i < 1000; i++) {
  arr3.push(i);
}
arrs.push(arr1, arr2, arr3);

arrs.reduce((memo, val) => {
  return [...memo, ...val];
}, []);

 
const arr1 = [];const arr2 = [];const arr3 = [];const arrs = []​for (let i = 0; i < 2000; i++) {  arr1.push(i);}for (let i = 0; i < 3000; i++) {  arr2.push(i);}for (let i = 0; i < 1000; i++) {  arr3.push(i);}arrs.push(arr1, arr2, arr3);​arrs.reduce((memo, val) => {  return [...memo, ...val];}, []);​

Push

const arr1 = [];
const arr2 = [];
const arr3 = [];
const arrs = []

for (let i = 0; i < 2000; i++) {
  arr1.push(i);
}
for (let i = 0; i < 3000; i++) {
  arr2.push(i);
}
for (let i = 0; i < 1000; i++) {
  arr3.push(i);
}
arrs.push(arr1, arr2, arr3);

arrs.reduce((memo, val) => {
  memo.push(...val);
  
  return memo;
}, []);

 
const arr1 = [];const arr2 = [];const arr3 = [];const arrs = []​for (let i = 0; i < 2000; i++) {  arr1.push(i);}for (let i = 0; i < 3000; i++) {  arr2.push(i);}for (let i = 0; i < 1000; i++) {  arr3.push(i);}arrs.push(arr1, arr2, arr3);​arrs.reduce((memo, val) => {  memo.push(...val);    return memo;}, []);

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
Array.prototype.concat
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	18784.6 Ops/sec
spread operator	12473.0 Ops/sec
Push	17653.5 Ops/sec

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

Overview

The provided benchmark measures the performance of three different approaches for concatenating arrays in JavaScript: Array.prototype.concat, the spread operator, and the push method.

Options compared

Array.prototype.concat": This method creates a new array by copying all elements from one or more source arrays.
Spread operator (...): This operator is used to create a new array by spreading elements from an existing array or other iterable.
push method: This method adds one or more elements to the end of an array.

Pros and Cons

Array.prototype.concat:
- Pros: well-documented, widely supported, and efficient for large arrays.
- Cons: creates a new array, which can be memory-intensive for large datasets.
Spread operator (...):
- Pros: concise, efficient, and flexible for small to medium-sized arrays.
- Cons: relatively new syntax, may not work as expected in older browsers or JavaScript versions.
push method:
- Pros: simple, efficient, and widely supported.
- Cons: can be slower than concat for large arrays, and may cause issues with array length calculations.

Library and purpose

None of the test cases use any external libraries. However, it's worth noting that modern JavaScript engines often include optimizations for array operations, which may affect performance.

Special JS features or syntax

The spread operator (...) is a relatively new feature introduced in ECMAScript 2015 (ES6). While most modern browsers support it, older versions of Chrome and other browsers may not. The push method has been part of the JavaScript language since its inception, but it's worth noting that some older browsers may have issues with array length calculations.

Alternatives

Other methods for concatenating arrays in JavaScript include:

Array.prototype.join(): This method creates a new string by joining all elements from an array.
Array.prototype.concat() (with a callback function): This method creates a new array by applying a callback function to each element of the source arrays.

However, these alternatives may not be as efficient or flexible as the three options tested in this benchmark.

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark measures the performance of three different approaches for concatenating arrays in JavaScript: `Array.prototype.concat`, the spread operator, and the `push` method.

**Options compared**

1. **`Array.prototype.concat"`**: This method creates a new array by copying all elements from one or more source arrays.
2. **Spread operator (`...`)**: This operator is used to create a new array by spreading elements from an existing array or other iterable.
3. **`push` method**: This method adds one or more elements to the end of an array.

**Pros and Cons**

* `Array.prototype.concat`:
	+ Pros: well-documented, widely supported, and efficient for large arrays.
	+ Cons: creates a new array, which can be memory-intensive for large datasets.
* Spread operator (`...`):
	+ Pros: concise, efficient, and flexible for small to medium-sized arrays.
	+ Cons: relatively new syntax, may not work as expected in older browsers or JavaScript versions.
* `push` method:
	+ Pros: simple, efficient, and widely supported.
	+ Cons: can be slower than `concat` for large arrays, and may cause issues with array length calculations.

**Library and purpose**

None of the test cases use any external libraries. However, it's worth noting that modern JavaScript engines often include optimizations for array operations, which may affect performance.

**Special JS features or syntax**

The spread operator (`...`) is a relatively new feature introduced in ECMAScript 2015 (ES6). While most modern browsers support it, older versions of Chrome and other browsers may not. The `push` method has been part of the JavaScript language since its inception, but it's worth noting that some older browsers may have issues with array length calculations.

**Alternatives**

Other methods for concatenating arrays in JavaScript include:

* `Array.prototype.join()`: This method creates a new string by joining all elements from an array.
* `Array.prototype.concat()` (with a callback function): This method creates a new array by applying a callback function to each element of the source arrays.

However, these alternatives may not be as efficient or flexible as the three options tested in this benchmark.

Related benchmarks:

Fork - Array concat vs spread operator vs push (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: Array.prototype.concat vs spread operator vs Push

Created: 4 years ago by: Guest

Jump to the latest result