Benchmark: The Many Ways of Concatenating

The Many Ways of Concatenating (version: 3)

Benchmarking the many ways of concatenating an array in JavaScript. Read more in this blog post: https://dev.to/thecodrr/the-so-many-ways-of-concatenating-an-array-2a26

Comparing performance of: Array.prototype.concat vs Array.prototype.push vs Array.prototype.reduce vs For-each vs For-of vs For-in vs For vs The Spread-Operator

Created: 4 years ago by: Registered User

Jump to the latest result

Tests:

Array.prototype.concat
let array = [1,2,3,4,5,6,7,8]; let second_array = [9,10,11]; array = array.concat(second_array);
Array.prototype.push
let array = [1,2,3,4,5,6,7,8]; let second_array = [9,10,11]; array.push(...second_array);
Array.prototype.reduce
let array = [1,2,3,4,5,6,7,8]; let second_array = [9,10,11]; array = second_array.reduce((all, current) => { all.push(current); return all; }, array);
For-each
let array = [1,2,3,4,5,6,7,8]; let second_array = [9,10,11]; second_array.forEach(item => array.push(item));
For-of
let array = [1,2,3,4,5,6,7,8]; let second_array = [9,10,11]; for (var item of second_array) { array.push(item); }
For-in
let array = [1,2,3,4,5,6,7,8]; let second_array = [9,10,11]; for (var i in second_array) { array.push(second_array[i]); }
For
let array = [1,2,3,4,5,6,7,8]; let second_array = [9,10,11]; for (var i = 0; i < second_array.length; ++i) { array[array.length] = second_array[i]; }
The Spread-Operator
let array = [1,2,3,4,5,6,7,8]; let second_array = [9,10,11]; array = [...array, ...second_array];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Array.prototype.push
Array.prototype.reduce
For-each
For-of
For-in
For
The Spread-Operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 107 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	15973587.0 Ops/sec
Array.prototype.push	59661620.0 Ops/sec
Array.prototype.reduce	55051796.0 Ops/sec
For-each	51318844.0 Ops/sec
For-of	51442724.0 Ops/sec
For-in	7629409.5 Ops/sec
For	55140152.0 Ops/sec
The Spread-Operator	37144080.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various test cases.

**Benchmark Purpose**

The benchmark, named "The Many Ways of Concatenating," tests different ways of concatenating an array in JavaScript. It compares six approaches: `Array.prototype.concat`, `Array.prototype.push`, `Array.prototype.reduce`, `For-each`, `For-of`, and the Spread Operator (`...`).

**Test Cases**

Each test case measures the execution speed of a specific approach for concatenating two arrays. Here's a brief overview:

1. **Array.prototype.concat**: Concatenates an array using the `concat()` method.
2. **Array.prototype.push**: Concatenates an array by pushing elements from another array into the original array.
3. **Array.prototype.reduce**: Concatenates an array by reducing it to a single value, which is then used to update the original array.
4. **For-each**: Concatenates an array using a `for` loop to iterate over one of the arrays and push elements into another.
5. **For-of**: Similar to the previous one, but uses the newer `for...of` syntax for iteration.
6. **For-in**: Concatenates an array by iterating over its index and pushing values from another array.
7. **The Spread-Operator**: Concatenates two arrays using the spread operator (`...`) in JavaScript.

**Interpretation of Results**

The results show that:

* `Array.prototype.concat` is slower than other approaches, possibly due to its more explicit nature.
* `Array.prototype.push` and `For-each` are relatively fast, as they use built-in methods or simple iteration.
* `Array.prototype.reduce` is slower than the previous two, likely because of the additional complexity involved in reducing an array to a single value.
* `For-of` and `For-each` are similar in performance, with slight variations depending on the browser implementation.
* The Spread Operator (`...`) is the fastest approach, as it uses a simple array operation.

**Conclusion**

This benchmark highlights the importance of choosing the right method for concatenating arrays in JavaScript, considering factors like execution speed and code readability. While `Array.prototype.concat` might be the most straightforward option, `For-each`, `For-of`, or the Spread Operator (`...`) may offer better performance, depending on the specific use case.

The results also suggest that, for many modern browsers, the differences between these approaches are relatively small. However, when working with larger datasets or requiring optimal performance, choosing the right method can make a significant difference in application performance and user experience.

Related benchmarks:

The Many Ways of Concatenating (version: 3)

Benchmarking the many ways of concatenating an array in JavaScript. Read more in this blog post: https://dev.to/thecodrr/the-so-many-ways-of-concatenating-an-array-2a26

Comparing performance of: Array.prototype.concat vs Array.prototype.push vs Array.prototype.reduce vs For-each vs For-of vs For-in vs For vs The Spread-Operator

Created: 4 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

Array.prototype.push

Array.prototype.reduce

For-each

For-of

For-in

For

The Spread-Operator

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