Benchmark: Fork - Array concat vs spread operator vs push v2

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) => { for (const value of 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	18139.8 Ops/sec
spread operator	9228.8 Ops/sec
Push	11166.6 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its various components.

**Benchmark Overview**

The "Fork - Array concat vs spread operator vs push v2" benchmark compares the performance of three different methods for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. The `push()` method with a loop

**Options Compared**

Here's a brief overview of each option:

* **`Array.prototype.concat()`**: This is the traditional way to concatenate arrays in JavaScript. It takes two or more arrays as arguments and returns a new array containing all elements from the input arrays.
* **The spread operator (`...`)**: Introduced in ES6, this operator allows you to create a new array by spreading an existing array (or other iterable) into multiple elements.
* **`push()` method with a loop**: This approach uses a traditional `for` loop to iterate over the elements of one or more arrays and pushes them onto another array using the `push()` method.

**Pros and Cons**

Here's a brief summary of each option:

* **`Array.prototype.concat()`**:
	+ Pros: Simple, widely supported, and easy to read.
	+ Cons: Can be slower than other methods, especially for large arrays, since it creates multiple intermediate arrays.
* **The spread operator (`...`)**:
	+ Pros: Fast, concise, and efficient. It avoids creating intermediate arrays, making it a good choice for large datasets.
	+ Cons: May not work well with older browsers or environments that don't support ES6 syntax.
* **`push()` method with a loop**:
	+ Pros: Customizable, allows for error handling, and can be used in situations where `concat()` is not available.
	+ Cons: Less readable, slower than the spread operator, and may require more memory since it creates an array of intermediate results.

**Library and Syntax**

None of the benchmark tests use any external libraries. However, they do utilize some advanced JavaScript syntax:

* The spread operator (`...`) is used in the "spread operator" test case.
* A `for` loop with a variable declaration (i.e., `let i = 0;`) is used in all three test cases.

**Special JS Features**

No special JS features are required or mentioned in the benchmark. All test cases use standard JavaScript syntax and methods.

**Other Alternatives**

If you're interested in exploring alternative approaches to array concatenation, here are a few options:

* Using `Array.prototype.reduce()` with an accumulator: This method is more concise than a traditional loop but can be slower for large arrays.
* Using `Array.prototype.map()` followed by `Array.prototype.concat()`: This approach creates multiple intermediate arrays, which may not be suitable for large datasets.

Keep in mind that the performance differences between these alternatives are usually negligible unless you're working with extremely large datasets or performance-critical code.

Related benchmarks:

Fork - Array concat vs spread operator vs push v2 (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):