Benchmark: Array concat vs spread operator vs push vs Splice

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 ].push(...params);
Splice
var params = [ "hello", true, 7 ]; var other = params.splice(params.length, 0, ...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Splice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 16 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	27617258.0 Ops/sec
spread operator	24904772.0 Ops/sec
Push	34785896.0 Ops/sec
Splice	10092046.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested, compared, and some pros and cons of each approach.

**Benchmark Definition**

The benchmark is testing the performance of different ways to concatenate or manipulate arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. `Array.prototype.push()` with the spread operator (`...`)
4. `Array.prototype.splice()` with the spread operator (`...`)

**Individual Test Cases**

Each test case represents a different scenario where an array is being manipulated using one of the above methods.

Let's examine each test case:

1. **`Array.prototype.concat()`**
	* The benchmark definition creates two arrays, `[ 1, 2 ]` and `params`, which contains string literals, booleans, and numbers.
	* The test case uses `concat()` to concatenate the two arrays.
	* Pros: Simple and straightforward, widely supported in older browsers.
	* Cons: Can be slower for large datasets due to the overhead of creating a new array.
2. **The new ES6 spread operator (`...`)**

* The benchmark definition creates two arrays, `[ 1, 2 ]` and `params`, which contains string literals, booleans, and numbers.
   * The test case uses the spread operator (`...`) to concatenate the two arrays.
   * Pros: Efficient and concise way to merge arrays. Good performance for large datasets.
   * Cons: Requires modern browsers that support ES6 syntax.

3. **`Array.prototype.push()` with the spread operator (`...`)**

* The benchmark definition creates two arrays, `[ 1, 2 ]` and `params`, which contains string literals, booleans, and numbers.
   * The test case uses `push()` to add elements from the array `params` to the existing array using the spread operator (`...`).
   * Pros: Similar efficiency to the spread operator method for concatenation.
   * Cons: Can lead to slower performance when used with large datasets because of the overhead of repeatedly calling `push()`.
4. **`Array.prototype.splice()` with the spread operator (`...`)**

* The benchmark definition creates two arrays, `[ 1, 2 ]` and `params`, which contains string literals, booleans, and numbers.
   * The test case uses `splice()` to insert elements from the array `params` at the beginning of the existing array using the spread operator (`...`).
   * Pros: Efficient way to add new elements at the beginning of an array. Can be faster than `push()` for large datasets.
   * Cons: Requires modern browsers that support ES6 syntax and has potential overhead from repeated calls to `splice()`.

**Other Considerations**

When choosing between these methods, consider the following factors:

* Browser support: If you need to run your code in older browsers, `Array.prototype.concat()` may be a safer choice. For modern browsers, the spread operator (`...`) is generally faster and more efficient.
* Dataset size: When dealing with large datasets, the spread operator (`...`) tends to be faster than other methods.
* Code readability: The spread operator (`...`) can make code more concise, but some developers may find it less readable.

**Alternative approaches**

If none of these options suit your needs, consider using:

* `Array.prototype.reduce()`: This method allows you to build up a new array from scratch. It's often faster than other methods when working with large datasets.
* Custom implementation: If you need to optimize performance beyond what the built-in methods provide, creating a custom loop or algorithm may be necessary.

Keep in mind that each browser has its own performance characteristics and nuances. When optimizing for performance, it's essential to understand these factors and choose the most suitable method for your specific use case.

Related benchmarks:

Array concat vs spread operator vs push vs Splice (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 vs Splice

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Splice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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