Benchmark: Array concat vs spread operator vs push *1000

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; for (var i = 0; i < 1000; i++) { other.concat(params); }
spread operator
var params = [ "hello", true, 7 ]; var other = [ 1, 2]; for (var i = 0; i < 1000; i++) { other = [...other, ...params ] }
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; for (var i = 0; i < 1000; i++) { params.forEach((param) => other.push(param)); }
Push with spread
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; for (var i = 0; i < 1000; i++) { other.push(...params); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8180.8 Ops/sec
spread operator	559.4 Ops/sec
Push	93398.2 Ops/sec
Push with spread	117156.0 Ops/sec

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 explain what's being tested, compared, and analyzed.

**Benchmark Overview**

The website MeasureThat.net provides a platform to compare performance of different JavaScript operations. The current benchmark compares three ways to add elements to an array:

1. `Array.prototype.concat()`
2. Spread operator (`...`)
3. `push()` method

Each test case uses a similar scenario: creating an array `params` with some initial values and another array `other`. Then, they loop 1000 times, adding the same `params` array to `other` using each of the three methods.

**Options Compared**

The benchmark compares the performance of:

1. **Array.prototype.concat()**: The traditional method for concatenating arrays.
2. **Spread operator (`...`)**: A new JavaScript feature introduced in ES6, allowing for more concise array creation and manipulation.
3. **`push()` method**: A simple way to add elements to an array.

**Pros and Cons of Each Approach**

1. **Array.prototype.concat()**:
	* Pros: Well-established, easy to use, and widely supported.
	* Cons: Can be slow for large arrays due to the creation of a new intermediate array.
2. **Spread operator (`...`)**:
	* Pros: More concise, efficient, and flexible than traditional concatenation methods.
	* Cons: Requires modern browsers (ES6+ support) and can be less intuitive for some developers.
3. **`push()` method**:
	* Pros: Simple, fast, and widely supported across all browsers.
	* Cons: Can lead to slower performance when dealing with large arrays due to the overhead of array resizing.

**Library Usage**

None of the test cases use any external libraries or frameworks that affect their performance.

**Special JavaScript Features**

1. The spread operator (`...`) is a new ES6 feature that allows for more concise array creation and manipulation. It's widely supported in modern browsers, but may not work in older browsers.
2. The `push()` method is a native JavaScript function and doesn't require any special features.

**Other Considerations**

1. **Array resizing**: When using the `push()` method, arrays resize automatically to accommodate added elements. This can lead to slower performance due to the overhead of array resizing. The spread operator avoids this issue by creating a new array.
2. **Intermediate array creation**: In the case of `Array.prototype.concat()`, an intermediate array is created before returning the concatenated result. This can also impact performance, especially for large arrays.

**Alternatives**

If you're interested in exploring alternative methods or variations on these approaches, consider:

1. Using `Array.prototype.push.apply()` instead of `push()`: While it's not as straightforward as using `push()`, this method allows for more control over the array resizing process.
2. Exploring other array manipulation techniques, such as using `slice()` and `concat()` together or utilizing modern JavaScript features like `Set` data structures.

Keep in mind that these alternatives may not always provide better performance or readability, so it's essential to evaluate their trade-offs before adopting them in your code.

Related benchmarks:

Array concat vs spread operator vs push *1000 (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push, with target array growing

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

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Push with spread

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