Benchmark: Array concat vs spread operator vs push vs assignment

Script Preparation code:

const append = (arr1, arr2) => {
    // Pre-allocate space for the new elements
    arr1.length += arr2.length;

    // Copy elements from arr2 to arr1
    for (let i = 0; i < arr2.length; i++) {
        arr1[arr1.length - arr2.length + i] = arr2[i];
    }

    return arr1;
};
window.append = append

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);
assign
var params = [ "hello", true, 7 ]; var other = append([1,2], params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Definition**

The benchmark is defined by a JSON object that contains several key pieces of information:

* **Name**: The name of the benchmark, which is "Array concat vs spread operator vs push vs assignment".
* **Description**: A brief description of what the benchmark is testing. In this case, it's comparing the performance of different ways to concatenate arrays: `concat()`, spread operator (`...`), `push()`, and a custom implementation (`append()`).
* **Script Preparation Code**: The JavaScript code that sets up the environment for the benchmark. This code defines a function called `append()` that takes two arrays as input and returns a new array with the elements from both arrays copied to it.
* **Html Preparation Code**: An empty string, which means no HTML preparation is needed.

**Individual Test Cases**

The benchmark consists of four test cases, each defined by a JSON object:

1. **Array.prototype.concat**
	* The benchmark definition uses the `concat()` method to concatenate an array with another array containing three elements: `"hello"`, `true`, and `7`.
2. **Spread Operator**
	* The benchmark definition uses the spread operator (`...`) to concatenate an array with another array containing two elements: `[1, 2]`. The `params` array is then spread into this new array.
3. **Push**
	* The benchmark definition uses the `push()` method to concatenate an array with another array containing three elements: `"hello"`, `true`, and `7`.
4. **Assign (Custom Implementation)**
	* The benchmark definition uses a custom implementation called `append()` to concatenate two arrays, similar to how it was defined in the Script Preparation Code.

**What is being tested?**

The benchmark is testing the performance of four different ways to concatenate arrays:

1. Using the `concat()` method
2. Using the spread operator (`...`)
3. Using the `push()` method
4. A custom implementation using a loop to copy elements from one array to another

**Options Compared**

These options are being compared in terms of their execution speed, with the goal of determining which approach is fastest.

**Pros and Cons of each Approach:**

1. **Array.prototype.concat**
	* Pros:
		+ Widely supported and well-documented
		+ Easy to read and understand
	* Cons:
		+ May be slower than custom implementations due to overhead from the method call
2. **Spread Operator (...))
	* Pros:
		+ Concise and easy to read
		+ Avoids explicit array length checks
	* Cons:
		+ Not supported in older browsers or environments
3. **Push**
	* Pros:
		+ Can be faster than `concat()` for large arrays due to fewer method calls
	* Cons:
		+ Requires manual indexing and element counting, which can lead to errors if not implemented correctly
4. **Assign (Custom Implementation)**
	* Pros:
		+ Highly optimized for performance, as it uses a simple loop with minimal overhead
	* Cons:
		+ More complex and less readable than other approaches

**Other Considerations:**

When choosing an approach for array concatenation, consider the following factors:

* Performance: If speed is critical, custom implementations or `push()` might be faster.
* Readability: `concat()` and spread operator are generally easier to read and understand.
* Browser Support: Ensure that your chosen approach works across different browsers and environments.

**Alternatives:**

Other alternatives for array concatenation include:

1. Using the `reduce()` method
2. Using the `set()` method (not applicable for arrays, but can be used for other data structures)
3. Implementing a custom array concatenation function using a loop or recursion

These alternatives might offer different trade-offs in terms of performance, readability, and browser support.

I hope this explanation helps!

Latest run results:

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

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	17433066.0 Ops/sec
spread operator	80708432.0 Ops/sec
Push	104542936.0 Ops/sec
assign	9544988.0 Ops/sec

Related benchmarks:

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

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

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

Created: 10 months ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push

assign

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