Benchmark: Array concat vs spread operator vs push (cycle)

Tests:

Array.prototype.concat
const params = new Array(100000).fill(0).map((el,i)=>[ "hello", true, 7 ][i%3]); const other = [ 1, 2 ].concat(params);
spread operator
const params = new Array(100000).fill(0).map((el,i)=>[ "hello", true, 7 ][i%3]); const other = [ 1, 2, ...params ]
Push
const params = new Array(100000).fill(0).map((el,i)=>[ "hello", true, 7 ][i%3]); const other = [ 1, 2 ].push(...params);
Push (cycle)
const params = new Array(100000).fill(0).map((el,i)=>[ "hello", true, 7 ][i%3]); const other = [ 1, 2 ] for (const el of params) other.push(el)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Push (cycle)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Array.prototype.concat

376/s

Push

249/s

spread operator

217/s

Push (cycle)

215/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat	376 Ops/sec
Push	249 Ops/sec
spread operator	217 Ops/sec
Push (cycle)	215 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 its test cases.

**What is tested?**

The benchmark tests three different ways to concatenate an array in JavaScript:

1. `Array.prototype.concat()`: The traditional method of concatenating arrays using the `concat()` method.
2. Spread operator (`...`): The new ES6 spread operator introduced in ECMAScript 2015, which allows for concise and expressive array concatenation.
3. `push()`: The `push()` method of an array, which adds one or more elements to the end of the array.

**Options compared**

Each test case compares the performance of two methods:

* Two different methods (e.g., `concat()` vs spread operator)
* Same method but with a cycle (e.g., `Push` vs `Push (cycle)`)

**Pros and cons of each approach:**

1. **Array.prototype.concat()**:
	* Pros: Easy to read, well-established method.
	* Cons: Can be slower due to the overhead of creating a new array object.
2. **Spread operator (`...`)**:
	* Pros: Concise, expressive, and efficient way to concatenate arrays.
	* Cons: Requires JavaScript 5+ and may not work in older browsers or environments.
3. **push()**:
	* Pros: Efficient and fast way to add elements to an array.
	* Cons: May be slower than `concat()` for large arrays due to the overhead of adding elements individually.

**Other considerations:**

* The use of a cycle (`Push (cycle)`) in the test case adds additional overhead, as it requires iterating over the array multiple times.
* The benchmark uses a fixed-size array with 100,000 elements, which may not be representative of real-world scenarios. Larger arrays or more complex data structures might affect performance.

**Library and syntax:**

The benchmark does not use any external libraries beyond standard JavaScript. However, it assumes that the test environment supports the ES6 spread operator (`...`).

There are no special JS features or syntax used in this benchmark beyond what is necessary to test the three methods.

**Alternatives:**

Other alternatives for array concatenation include:

* `Array.prototype.set()` (not widely supported)
* Using `Node.js` built-in functions like `concat()`, `push()`, and `splice()`
* Implementing custom concatenation functions using loops or recursion
* Using third-party libraries like Lodash

Keep in mind that the performance differences between these alternatives may vary depending on the specific use case and environment.

Overall, this benchmark provides a useful comparison of three common array concatenation methods in JavaScript, helping developers understand the trade-offs between conciseness, efficiency, and readability.

Array concat vs spread operator vs push (cycle) (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 Push (cycle)`

Created: 2 years ago by: Registered User

Go to the latest result

Array.prototype.concat

spread operator

Push

Push (cycle)

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 (cycle) (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 Push (cycle)

Created: 2 years ago by: Registered User

Go to the latest result

Array.prototype.concat

spread operator

Push

Push (cycle)

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 vs Push (cycle)`