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); }, []);
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]; }, []);
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; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 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 2 months ago):

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: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

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):