Benchmark: Array concat vs spread operator vs push with array of objects

Tests:

Array.prototype.concat
var params = [ {a: 3}, {a: 4}, {a: 5} ]; var base = [ {a: 1}, {a: 2} ]; var other = base.concat(params);
spread operator
var params = [ {a: 3}, {a: 4}, {a: 5} ]; var base = [ {a: 1}, {a: 2} ]; var other = [ ...base, ...params ];
Push
var params = [ {a: 3}, {a: 4}, {a: 5} ]; var base = [ {a: 1}, {a: 2} ]; var other = base.push(...params);

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: 3 years ago)

User agent: Mozilla/5.0 (Linux; Android 10; Mi Pad 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.181 Safari/537.36

Browser/OS: Chrome 88 on Android

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	2020608.8 Ops/sec
spread operator	4509700.5 Ops/sec
Push	5770157.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to concatenate arrays in JavaScript is an interesting benchmark.

**What's being tested?**

In this benchmark, three approaches are compared:

1. `Array.prototype.concat()`: The traditional method of concatenating two arrays using the `concat()` function.
2. Spread operator (`[ ... ]`): A new ES6 feature introduced to concatenate arrays.
3. `push()` with spread operator (`...`): Using the spread operator inside an array's `push()` method.

**Comparison**

Here's a brief overview of each approach:

*   **Array.prototype.concat()**: This is the traditional way to concatenate two arrays in JavaScript. It creates a new array and copies elements from both input arrays into it. This approach can be slow for large arrays due to the overhead of creating a new object.
*   **Spread operator (`[ ... ]`)**: Introduced in ES6, this operator allows you to create a new array by spreading elements from an existing array. When used with `concat()`, it provides better performance compared to `push()` method since it avoids the overhead of creating a new array and copying elements into an existing one.
*   **Push()` with spread operator (`...`)**: This approach uses the spread operator directly inside an array's `push()` method. While it may seem counterintuitive, this syntax can improve performance for small arrays because it reduces the number of function calls and avoids creating a new array.

**Pros and Cons**

*   **Array.prototype.concat()**: Pros - simple to use, widely supported. Cons - slower for large arrays due to object creation.
*   **Spread operator (`[ ... ]`)**: Pros - faster performance compared to `push()` method, more readable code. Cons - requires ES6 support.
*   **Push()` with spread operator (`...`)**: Pros - can be faster than traditional concatenation, more concise syntax. Cons - may require some mental gymnastics due to its unconventional use.

**Library and Special JS Features**

None of the individual test cases rely on external libraries or special JavaScript features (e.g., async/await, promises).

**Other Alternatives**

There are other alternatives for array concatenation:

*   **`Array.prototype.push()` with multiple arguments**: This method can be faster than traditional concatenation since it avoids creating a new array and copies elements into an existing one. However, it requires using the spread operator (`...`) to pass multiple arguments.

Example:
```javascript
var arr = [1, 2];
arr.push(3, 4); // Faster than arr.concat([3, 4])
```
*   **`Array.prototype.unshift()`**: This method is similar to `push()`, but it adds elements at the beginning of an array. It can be faster for small arrays since it avoids creating a new array.

Example:
```javascript
var arr = [1, 2];
arr.unshift(3); // Faster than arr.concat([3]) in some cases
```
Keep in mind that these alternatives may have different performance characteristics and usage scenarios compared to the traditional concatenation methods.

Related benchmarks:

Array concat vs spread operator vs push with array of objects (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

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 2 months ago):