Benchmark: Array concat vs spread operator vs push - append

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ "hello", true, 7 ]; other = other.concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ "hello", true, 7 ]; other = [ ...other, ...params ]
Push spread
var params = [ "hello", true, 7 ]; var other = [ "hello", true, 7 ]; other.push(...params);
Push apply
var params = [ "hello", true, 7 ]; var other = [ "hello", true, 7 ]; 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 spread
Push apply

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:92.0) Gecko/20100101 Firefox/92.0

Browser/OS: Firefox 92 on Ubuntu

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5097847.5 Ops/sec
spread operator	5317255.0 Ops/sec
Push spread	5002833.5 Ops/sec
Push apply	4708725.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares the performance of three different approaches for appending elements to an array:

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

This benchmark is designed to test which approach provides the best performance, and it does so by running each test case multiple times across different devices.

**Library Used**

None of the above approaches rely on any external libraries. The ES6 spread operator is a built-in feature of JavaScript.

**Special JS Features/Syntax**

The ES6 spread operator (`...`) was introduced in ECMAScript 2015 (ES6) and allows for spreading elements into an array or object. This syntax was already supported by major browsers, including Firefox 92, at the time the benchmark was created.

**Test Case Breakdown**

Here's a brief explanation of each test case:

1. **`Array.prototype.concat()`**: This is the traditional approach to appending elements to an array. The `concat()` method creates a new array and returns it.
2. **Spread Operator (`...`)**: This approach uses the ES6 spread operator to create a new array by spreading the elements from another array.
3. **Push spread**: This approach uses the push() method with the spread operator to append elements to an existing array.
4. **Push apply**: This approach uses the `Array.prototype.push.apply()` method, which applies multiple values to the end of an array.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **`Array.prototype.concat()`**:
	* Pros: Simple to use, widely supported.
	* Cons: Creates a new array, can be slower due to object creation overhead.
2. **Spread Operator (`...`)**:
	* Pros: Efficient, creates a new array without the need for push() or concat().
	* Cons: Requires ES6 support, may have performance implications if not implemented correctly.
3. **Push spread**: 
	* Pros: Similar benefits to using `Array.prototype.push.apply()` method
   * Cons: May be slightly slower than pushing elements directly
4. **Push apply**:
   * Pros: Similar benefits as Push spread method
    * Cons: Can still create unnecessary intermediate arrays, so performance might not be consistent

**Other Alternatives**

Some alternative approaches for appending elements to an array include:

* Using `Array.prototype.push()`: This is a straightforward approach that appends elements directly to the end of the array.
* Using `Array.prototype.unshift()`: This method adds one or more elements to the beginning of an array, which can be useful if you need to preallocate space for new elements.

However, these alternative approaches may not offer better performance than the three main methods being compared in this benchmark.

Related benchmarks:

Array concat vs spread operator vs push - append (version: 2)

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

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

Created: 3 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push spread

Push apply

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