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

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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: