Benchmark: js spread vs concat vs push

Tests:

concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread
var params = [ "hello", true, 7 ]; var other = [ 1, 2, ...params ];
push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread
push

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; rv:102.0) Gecko/20100101 Firefox/102.0

Browser/OS: Firefox 102 on Linux

View result in a separate tab

Test name	Executions per second
concat	8234861.5 Ops/sec
spread	10538002.0 Ops/sec
push	15899922.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**What is being tested:**

The provided benchmark tests three ways to create an array in JavaScript:

1. `concat()`: The `concat()` method creates a new array by concatenating two or more arrays.
2. Spread operator (`...`): The spread operator creates a new array by spreading the elements of an existing array.
3. `push()`: The `push()` method adds one or more elements to the end of an array.

**Options being compared:**

The benchmark compares the performance of these three approaches on the same set of test cases, which are:

* Creating an array with a variable number of elements using `concat()`, spread operator (`...`), and `push()`.
* The arrays contain a mix of string values, boolean values, and numbers.

**Pros and cons of each approach:**

1. **`concat()`**:
	* Pros: Simple to use, widely supported.
	* Cons: Creates a new array, which can be memory-intensive for large datasets.
2. **Spread operator (`...`)**:
	* Pros: More concise than `concat()`, creates a shallow copy of the original array, allowing for mutable objects.
	* Cons: Only supported in modern browsers and ECMAScript versions (ES6+), may not work as expected with complex data structures.
3. **`push()`**:
	* Pros: Fastest way to add elements to an array, modifies the existing array in-place.
	* Cons: Not suitable for creating a new array, requires multiple method calls.

**Library and special JS features:**

There are no libraries or special JavaScript features being tested in this benchmark. However, it's worth noting that modern browsers support the spread operator (`...`) since ECMAScript 2015 (ES6).

**Other alternatives:**

If you're looking for alternative ways to create arrays, consider:

* Using `Array.prototype.slice()` to create a shallow copy of an array.
* Utilizing libraries like Lodash or Array.prototype's other methods (e.g., `fill()`, `slice()`) if you need more advanced array manipulation capabilities.

In summary, the benchmark provides a simple and informative way to compare the performance of three common ways to create arrays in JavaScript: `concat()`, spread operator (`...`), and `push()`. The results can help developers optimize their code for better performance on specific browsers or devices.

Related benchmarks:

js spread vs concat vs push (version: 0)

Comparing performance of: concat vs spread vs push

Created: 3 years ago by: Guest

Jump to the latest result

concat

spread

push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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