Benchmark: JS Spread operator vs push

Script Preparation code:

var foo = [ 2, 5, 7 ];
var bar = [ 3, 4, 6 ];

Tests:

Spread operator
var result = [ ...foo, ...bar ];
Push with spread operator
var result = []; result.push(...foo); result.push(...bar);
Push with simple for
var result = []; for (var i = 0; i < foo.length; i++){ result.push(foo[i]); } for (var j = 0; j < foo.length; j++){ result.push(bar[j]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator
Push with spread operator
Push with simple for

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread operator	40034928.0 Ops/sec
Push with spread operator	30932658.0 Ops/sec
Push with simple for	18357972.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares three approaches to add elements from two arrays (`foo` and `bar`) to an empty array: using the spread operator, using the `push()` method with the spread operator, and using a simple `for` loop.

**Options Compared**

1. **Spread Operator (`...`)**: This syntax allows for the concatenation of arrays in a concise manner.
2. **Push with Spread Operator**: This approach uses the `push()` method to add elements from an array to another array, utilizing the spread operator internally.
3. **Simple `for` Loop**: This traditional approach iterates over each array using a `for` loop and pushes elements to the target array.

**Pros and Cons of Each Approach**

1. **Spread Operator (`...`)**:
	* Pros: concise, readable, and efficient for concatenating small arrays.
	* Cons: may lead to higher memory allocation overhead due to intermediate array creation.
2. **Push with Spread Operator**:
	* Pros: similar performance benefits as the spread operator, but avoids creating an intermediate array.
	* Cons: may require additional browser support (older versions of Firefox might not work).
3. **Simple `for` Loop**:
	* Pros: widely supported across browsers and platforms, simple to understand and implement.
	* Cons: less concise and potentially slower than the spread operator or push with spread operator approaches.

**Library Used**

The benchmark uses JavaScript's built-in `Array.prototype.push()` method and does not rely on any external libraries.

**Special JS Features/Syntax**

None are mentioned in the provided code snippet. However, it's worth noting that modern browsers support features like `const` and `let` declarations for variable scope, which may impact performance in certain cases.

**Alternative Approaches**

Other approaches to add elements from one array to another could include:

* Using `concat()`: `var result = []; result = result.concat(foo); result = result.concat(bar);`
* Using a custom implementation with a loop: `for (var i = 0; i < foo.length; i++) { result.push(foo[i]); } for (var j = 0; j < bar.length; j++) { result.push(bar[j]); }`

However, these alternatives may not be as efficient or concise as the approaches compared in this benchmark.

Related benchmarks:

JS Spread operator vs push (version: 0)

Comparing performance of: Spread operator vs Push with spread operator vs Push with simple for

Created: 5 years ago by: Guest

Jump to the latest result

Spread operator

Push with spread operator

Push with simple for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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