Benchmark: Array concat vs spread operator vs push vs for 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 ].push(...params);
For Push
var params = [ "hello", true, 7 ]; var array = [ 1, 2 ] for(const param of params) { array.push(param); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8838685.0 Ops/sec
spread operator	28698504.0 Ops/sec
Push	30950736.0 Ops/sec
For Push	32625150.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

**Benchmark Definition**

The benchmark is named "Array concat vs spread operator vs push vs for push" and it compares four different approaches to concatenate arrays:

1. `concat()`
2. The new ES6 spread operator (`...`)
3. `push()` with the spread operator (`...`)
4. A manual loop using a `for...of` loop

**Options Compared**

The benchmark is comparing the performance of these four approaches on three test cases:

* Test Case 1: Concatenating an array with two elements and then adding one more element using `concat()`.
* Test Case 2: Using the spread operator (`...`) to concatenate an array with two elements.
* Test Case 3: Using `push()` with the spread operator (`...`) to add elements to an existing array.
* Test Case 4: A manual loop using a `for...of` loop to add elements to an existing array.

**Pros and Cons of Each Approach**

1. **Concat()**: This is the traditional method for concatenating arrays in JavaScript. It creates a new array with the original array's elements followed by the new elements. Pros: Simple, easy to read. Cons: Creates a new array, which can be memory-intensive.
2. **Spread Operator (`...`)**: The spread operator was introduced in ES6 and provides a concise way to concatenate arrays. Pros: Concise, efficient, and creates a new array with minimal overhead. Cons: May require modern JavaScript versions (ES6+).
3. **Push() with Spread Operator (`...`)**: This approach uses the `push()` method to add elements to an existing array, followed by the spread operator (`...`). Pros: Efficient, creates a new array with minimal overhead. Cons: Requires two steps, which may be less readable than other approaches.
4. **Manual Loop (For...of)**: This approach uses a `for...of` loop to iterate over the elements being concatenated and adds each element to an existing array using the `push()` method. Pros: Highly customizable, easy to optimize for specific use cases. Cons: More verbose, may require more lines of code.

**Other Considerations**

* **ES6+ Compatibility**: The spread operator is only supported in modern JavaScript versions (ES6+). If you need to support older browsers or environments, you may need to fall back to other approaches.
* **Memory Allocation**: Creating a new array using the `concat()` or spread operator method can allocate significant memory, especially for large arrays. This may be a concern if you're working with limited resources.

**Test Results**

The latest benchmark results show that:

* The `For Push` test case is the fastest, followed closely by the `Push` test case.
* The `spread operator` and `Array.prototype.concat` tests are slower than the first two, but still relatively efficient.

In summary, this benchmark provides a comprehensive comparison of different approaches to concatenating arrays in JavaScript. It highlights the trade-offs between simplicity, efficiency, and memory allocation, giving you a better understanding of which approach best suits your specific use case.

Related benchmarks:

Array concat vs spread operator vs push vs for push (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 For Push

Created: 8 months ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push

For Push

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