Benchmark: Array concat vs spread operator vs push (via for loop)

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 ]; const other = params for(const param in params){ other.push(param) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 139 on Mac OS X 10.15.7

View result in a separate tab

spread operator

74.4M/s

Array.prototype.concat

24.0M/s

Push

16.3M/s

View exact numbers

Test name	Executions per second
✓ spread operator	74,355,152 Ops/sec
Array.prototype.concat	23,956,306 Ops/sec
Push	16,326,319 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares three approaches to concatenate or push elements onto an array:

1. **Array.prototype.concat()**: The traditional method of concatenating arrays using the `concat()` method.
2. **Spread operator (`...`)**: The new ES6 spread operator, introduced in 2015, which allows expanding an array's length by spreading its elements.
3. **Push (via for loop)**: Using a `for` loop to push each element onto the `other` array.

**Library and Special JS Features**

* The benchmark uses the Array prototype, specifically the `concat()` method and the spread operator (`...`). These are built-in JavaScript features, part of the ECMAScript standard.
* There is no use of special JavaScript features or syntax beyond what's necessary for the benchmark.

**Comparison Options**

The benchmark compares three approaches:

1. **Array.prototype.concat()**: This method creates a new array by copying elements from both arrays and returns it.
2. **Spread operator (`...`)**: This allows expanding an existing array to include more values by spreading its elements into a new array.
3. **Push (via for loop)**: Using a `for` loop to iterate over the elements in the original array and push each element onto the target array.

**Pros and Cons of Each Approach**

1. **Array.prototype.concat()**:
	* Pros: Easy to understand, widely supported, and has been part of JavaScript for a long time.
	* Cons: Creates a new array, which can be memory-intensive for large arrays.
2. **Spread operator (`...`)**:
	* Pros: More concise and expressive than using `concat()`, creates a new array with minimal overhead.
	* Cons: Requires the spread operator syntax, not supported in older browsers or environments.
3. **Push (via for loop)**:
	* Pros: Can be more efficient than creating a new array or using the spread operator, especially for large arrays.
	* Cons: More verbose and less readable than other approaches.

**Other Alternatives**

If you're considering alternative methods, here are a few:

1. Using `Array.prototype.push()` with a loop to push elements onto an array (similar to the third test case).
2. Using `Array.prototype.set()` with a `fill()` method to initialize an array's length and then push elements onto it.
3. Using `WebAssembly` or `Native Array` for optimized performance on specific platforms.

In general, the choice of approach depends on your specific use case, performance requirements, and the level of complexity you're willing to tolerate.

When writing benchmarks like this one, MeasureThat.net provides a convenient way to compare different approaches and identify optimal solutions.

Array concat vs spread operator vs push (via for loop) (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`

Created: 3 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array concat vs spread operator vs push (via for loop) (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

Created: 3 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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