Benchmark: Array concat vs spread operator vs push

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [1,2]; Array.prototype.push.apply(other, params);

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:

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 dive into the world of JavaScript microbenchmarks!

**What is being tested?**

The benchmark compares the performance of three ways to concatenate an array in JavaScript:

1. `Array.prototype.concat()`
2. Spread operator (`...`)
3. `Array.prototype.push.apply()` (using `push` method)

These methods are used to add one or more arrays (or values) to the end of an existing array.

**Options compared**

The benchmark compares the performance of these three methods:

* `concat()`: A method that returns a new array containing all elements from the original array and the new array.
* Spread operator (`...`): A syntax feature introduced in ECMAScript 2015 (ES6) that allows you to add elements to an existing array using the spread operator.
* `push.apply()`: A method that applies the `push` method of an array to another array, adding all its elements to the end.

**Pros and Cons**

Here's a brief summary of each approach:

1. **concat()**:
	* Pros: Easy to read and understand, no syntax changes required.
	* Cons: Creates a new array, which can be inefficient for large arrays.
2. **Spread operator (`...`)**:
	* Pros: More concise and expressive, efficient way to concatenate arrays.
	* Cons: Requires ECMAScript 2015 (ES6) support, may not work in older browsers.
3. **push.apply()**:
	* Pros: More flexible than `concat()` since it can be used with other array methods like `unshift()` and `splice()`.
	* Cons: Less readable than `concat()` or spread operator, requires more code.

**Library usage**

None of the test cases use any external libraries.

**Special JS feature or syntax**

The test case using the spread operator (`...`) takes advantage of a new syntax feature introduced in ECMAScript 2015 (ES6). This feature allows you to add elements to an existing array using the spread operator, which is more concise and expressive than traditional concatenation methods.

**Other alternatives**

If you want to explore other options, here are some additional ways to concatenate arrays:

* `Array.prototype.slice()`: Creates a new array containing all elements from the original array and the new array.
* `Array.prototype.splice()`: Modifies the original array by adding new elements at the end.
* Using `Array.from()` with an array of initial values: `Array.from([1, 2], (_, i) => params[i])` (not shown in this benchmark)

Keep in mind that each method has its own trade-offs and performance characteristics. The spread operator (`...`) is generally considered a good choice due to its concise syntax and efficiency.

Related benchmarks:

Array concat vs spread operator vs push (version: 0)

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

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

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

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