Benchmark: Array.prototype.concat vs spread operator (in a loop)

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params); for (let i = 0; i < 10_000; i += 3) { other = other.concat([i, i + 1, i + 2]); }
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ] for (let i = 0; i < 10_000; i += 3) { other = [...other, i, i + 1, i + 2]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
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.

I'll explain what's being tested on the provided JSON.

**What is being tested?**

The benchmark compares two approaches to concatenate arrays in JavaScript:

1. **`Array.prototype.concat()`**: This is an older method that concatenates two or more arrays by creating a new array and copying elements from each original array into it.
2. **Spread operator (`...`)**: The spread operator is a new syntax introduced in ECMAScript 2015 (ES6) that allows you to expand an array into individual elements.

**Options compared**

The benchmark compares these two options in a loop, where:

* `params` and `other` are initialized with arrays of different lengths.
* In each iteration of the loop:
	+ For the `Array.prototype.concat()` approach, `other` is concatenated with `[i, i + 1, i + 2]`.
	+ For the spread operator approach, `other` is expanded to include the elements `[i, i + 1, i + 2]`, and then assigned back to `other`.

**Pros and Cons of each approach**

* **`Array.prototype.concat()`**: Pros:
	+ Well-established and widely supported.
	+ Easy to understand and implement.
* Cons:
	+ Creates a new array in each iteration, which can lead to performance issues for large arrays or many iterations.
	+ May not be as efficient as the spread operator approach due to the overhead of concatenating arrays.
* **Spread operator (`...`)**: Pros:
	+ More concise and expressive than `concat()`.
	+ Can be faster than `concat()` since it avoids creating a new array in each iteration.
* Cons:
	+ Less widely supported before ES6 (before 2015).
	+ May not work as expected for certain types of arrays or data structures.

**Library**

There is no specific library mentioned in the benchmark definition. The `Array.prototype.concat()` method and spread operator (`...`) are part of the JavaScript language itself, built into the browser's execution engine.

**Special JS feature/syntax**

The use of spread syntax (`[...])` and template literals (e.g., `"hello", true, 7`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows you to create arrays or objects using array literal syntax with curly braces.

**Other alternatives**

If you're looking for alternative approaches to concatenate arrays, you might consider:

* **`Array.push()`**: Instead of concatenating arrays, you can use `push()` to add elements to an existing array. However, this approach is less efficient than the spread operator and may lead to performance issues with large arrays.
* **Using a library or framework**: Some libraries or frameworks (e.g., Lodash) provide optimized implementations of array concatenation.

Keep in mind that these alternatives might not be as efficient or convenient as using the `Array.prototype.concat()` method or spread operator (`...`), which are built into the language and supported by most modern browsers.

Related benchmarks:

Array.prototype.concat vs spread operator (in a loop) (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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