Benchmark: Array concat vs spread operator vs push vs spread whole

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);
Copy whole array
var params = [ "hello", true, 7 ]; var other = [...params];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Copy whole array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	10777006.0 Ops/sec
spread operator	40982752.0 Ops/sec
Push	50800764.0 Ops/sec
Copy whole array	71841392.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what is being tested in this benchmark.

**Benchmark Overview**

The benchmark compares the performance of four different ways to concatenate or spread arrays in JavaScript:

1. `concat()`
2. Spread operator (`...`)
3. `push()` with spreading
4. Copying whole array using spread operator (`[...]`)

**Options Compared**

Each option is compared to determine which one performs best, in terms of speed and efficiency.

* **Concatenation**: `concat()` method is a traditional way to concatenate arrays in JavaScript.
* **Spread Operator**: The new ES6 spread operator (`...`) allows you to extract parts of an array or object into separate iterations.
* **Push with Spreading**: This approach uses the `push()` method followed by spreading the original array using three dots (`...`).
* **Copy Whole Array**: This approach simply copies the original array using the spread operator (`[...]`).

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Concatenation (concat())**
	* Pros: Simple, widely supported, and easy to understand.
	* Cons: Can be slow for large arrays, as it creates a new array object.
2. **Spread Operator (`...`)**:
	* Pros: Efficient, modern syntax, and reduces memory allocations.
	* Cons: May not work in older browsers or JavaScript environments that don't support ES6+ syntax.
3. **Push with Spreading**
	* Pros: Similar to spread operator, but uses `push()` instead of concatenation.
	* Cons: Still creates a new array object, which can be slow for large arrays.
4. **Copy Whole Array**
	* Pros: Efficient and memory-friendly approach.
	* Cons: May not be as readable or intuitive as other approaches.

**Library Used**

There is no explicit library mentioned in the benchmark definition or test cases. However, some JavaScript engines (e.g., V8) might use their own optimizations or implementations of these array methods.

**Special JS Features/Syntax**

This benchmark doesn't mention any special JavaScript features or syntax beyond ES6+ support for the spread operator.

**Alternatives**

Other alternatives to these approaches include:

* Using `Array.prototype.slice()` or `Array.prototype.reduce()` to concatenate arrays.
* Utilizing libraries like Lodash or Ramda, which provide more efficient and concise ways to work with arrays.
* Implementing custom array concatenation methods using native WebAssembly (WASM) or other optimized libraries.

The benchmark primarily focuses on comparing the performance of these four approaches within JavaScript, without delving into alternative solutions.

Related benchmarks:

Array concat vs spread operator vs push vs spread whole (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 Copy whole array

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Copy whole array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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