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: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/111.0.5563.72 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 111 on iOS 16.3

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	21205542.0 Ops/sec
spread operator	416921120.0 Ops/sec
Push	2859929.8 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 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.

Related benchmarks:

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: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

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