Benchmark: Array concat vs spread operator vs push vs splice vs for-each push vs for-of push

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var a = [ 1, 2 ]; var b = a.concat(params);
spread operator
var params = [ "hello", true, 7 ] var a = [ 1, 2 ]; var b = [ ...a, ...params ];
Push
var params = [ "hello", true, 7 ]; var a = [ 1, 2 ]; var b = a.push(...params);
Splice
var params = [ "hello", true, 7 ]; var a = [ 1, 2 ]; var b = a.splice(params.length, 0, ...params);
Push for-each
var params = [ "hello", true, 7 ]; var a = [ 1, 2 ]; params.forEach(v => a.push(v));
Push for-of
var params = [ "hello", true, 7 ]; var a = [ 1, 2 ]; for(v of params) a.push(v);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Splice
Push for-each
Push for-of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36

Browser/OS: Chrome 91 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3346689.2 Ops/sec
spread operator	11549054.0 Ops/sec
Push	11052402.0 Ops/sec
Splice	4742999.5 Ops/sec
Push for-each	17934938.0 Ops/sec
Push for-of	504744.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of different ways to combine two arrays in JavaScript. The test cases cover various methods, including:

1. `Array.prototype.concat()`: Using the `concat()` method to merge two arrays.
2. Spread operator (`...`): Using the spread operator to expand an array into a new array.
3. `push()` with spread operator: Using the `push()` method to add elements to an array and then spreading another array into it.
4. `splice()` with spread operator: Using the `splice()` method to insert elements at a specific position in an array and then spreading another array into it.
5. `forEach` loop with `push()`: Using a `forEach` loop to iterate over one array and push elements from another array into the first array.
6. `for...of` loop with `push()`: Using a `for...of` loop to iterate over an array and push elements from another array into it.

**Options comparison**

Here's a brief overview of each method's pros and cons:

1. **Array.prototype.concat()**: This method is generally the most straightforward way to merge two arrays. It creates a new array and copies all elements from both input arrays. Pros: easy to use, reliable performance. Cons: creates a new array, can be slower for large inputs.
2. **Spread operator (`...`)**: Using the spread operator allows you to create a new array by expanding an existing array into it. Pros: efficient, flexible, and modern. Cons: requires understanding of spread syntax, might be slower than `concat()` for very large inputs.
3. **`push()` with spread operator**: This method uses the `push()` method to add elements from one array to another array. Pros: easy to use, can be faster than `concat()`. Cons: creates a new array if the original array is not long enough, might be slower for very large inputs.
4. **`splice()` with spread operator**: Similar to the previous point, but uses `splice()` to insert elements into an existing array. Pros: efficient and flexible, can be faster than `concat()`. Cons: modifies the original array, requires understanding of `splice()` syntax.
5. **`forEach` loop with `push()`**: This method iterates over one array and pushes elements from another array into it using a `forEach` loop. Pros: easy to understand, flexible. Cons: can be slower than other methods, might require more iterations for large inputs.
6. **`for...of` loop with `push()`**: Similar to the previous point, but uses a `for...of` loop to iterate over an array and push elements from another array into it. Pros: easy to understand, flexible. Cons: can be slower than other methods, might require more iterations for large inputs.

**Other considerations**

1. **Browser performance**: The results show that Chrome 91 on Windows Desktop is the testing environment.
2. **Device platform**: The test was run on a desktop device, which may not reflect mobile or tablet performance.
3. **Optimization**: Some methods (e.g., spread operator) might be optimized for specific use cases or browsers.

**Library usage**

None of the provided test cases rely on external libraries.

**Special JavaScript features or syntax**

The test cases utilize modern JavaScript features like:

1. Spread operator (`...`)
2. `push()` with spread operator
3. `splice()` with spread operator
4. `forEach` loop
5. `for...of` loop

These features are widely supported by modern browsers, including Chrome 91.

**Alternatives**

If you need to combine arrays in JavaScript, some alternatives to the above methods include:

1. Using `Array.prototype.reduce()` or `Array.prototype.some()` to iterate over one array and apply a transformation to elements from another array.
2. Using `Set` or `Map` data structures to store unique elements from one or both arrays.
3. Utilizing third-party libraries like Lodash, which provides utility functions for working with arrays.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the methods tested by MeasureThat.net.

Related benchmarks:

Array concat vs spread operator vs push vs splice vs for-each push vs for-of push (version: 0)

Compare different techniques for combining 2 arrays into either a new array or the source array

Comparing performance of: Array.prototype.concat vs spread operator vs Push vs Splice vs Push for-each vs Push for-of

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Splice

Push for-each

Push for-of

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