Benchmark: Array.prototype.concat vs spread operator vs slice and push with arrays of objects

Tests:

Array.prototype.concat
const arr1 = [ { name: 'hello', id: '1' }, { name: 'hi', id: '2' }, { name: 'welcome', id: '100' } ]; const arr2 = [ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ].concat(arr1);
spread operator
const arr1 = [ { name: 'hello', id: '1' }, { name: 'hi', id: '2' }, { name: 'welcome', id: '100' } ]; const arr2 = [ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' }, ...arr1 ];
Push
const arr1 = [ { name: 'hello', id: '1' }, { name: 'hi', id: '2' }, { name: 'welcome', id: '100' } ]; const arr2 = arr1.slice(); arr2.push(1); arr2.push(2);

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Browser/OS: Chrome 79 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4353354.5 Ops/sec
spread operator	12507246.0 Ops/sec
Push	15740506.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.

The benchmark compares three ways to concatenate arrays of objects:

1. **`Array.prototype.concat()`**: This method takes two or more arrays as arguments and returns a new array that contains all elements from the original arrays.
2. **Spread operator (`...`)**: This is a syntax introduced in ES6 that allows for spreading an iterable (like an array) into multiple places, including function calls and object literals.
3. **`slice()` and `push()`**: This method uses the `slice()` method to create a shallow copy of the original array and then modifies it by pushing new elements onto it.

**Options compared:**

*   Array.prototype.concat() vs spread operator (`...`)
*   spread operator (`...`) vs slice and push

**Pros and Cons:**

### **Array.prototype.concat():**

Pros:
*   Well-established method with good performance.
*   Wide support across browsers.

Cons:
*   Requires explicit call to the `concat()` method, which can be slower than other methods in some cases.
*   Returns a new array, which might not be desirable in certain scenarios.

### **Spread operator (`...`):**

Pros:
*   Syntax is concise and expressive, making it easy to read and write.
*   Performs better in many cases due to its ability to avoid the overhead of function calls or explicit array creations.

Cons:
*   Less supported by older browsers.
*   Might be slower than other methods for very large arrays.

### **slice() and push():**

Pros:
*   Can be optimized further using JavaScript optimizations, like `concatArray()` or `pushArray()` in V8.
*   Suitable for scenarios where you want to manipulate the original array.

Cons:
*   Requires manual handling of the `slice()` method and then pushing elements onto it, which might be slower than other methods due to function call overhead.

**Library usage:**

There is no explicit library mentioned in the provided benchmark definition. However, some parts of JavaScript engines like V8 (used by Chrome) use internal libraries for performance optimizations.

**Special JS feature or syntax:**

The spread operator (`...`) was introduced in ES6 and has become a standard part of modern JavaScript. It's designed to make it easier to work with iterables and create new arrays from them.

If you're interested in exploring other alternatives, here are some:

*   **`reduce()`**: This method can be used as an alternative for concatenating arrays.
*   **`Array.from()`**: Another method that creates a new array from an iterable. It might offer better performance than `concat()` or spread operator for certain use cases.

Here is an example of how you could write the individual test cases using these alternatives:

```javascript
// concat()
const arr1 = [ { name: 'hello', id: '1' }, { name: 'hi', id: '2' }, { name: 'welcome', id: '100' } ];
const arr2 = Array.prototype.concat.call(null, [ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ], arr1);

// spread operator
arr1.forEach(item => arr2.push(item));

// reduce()
let result = [];
arr1.forEach(item => {
    result = result.concat([item]);
});
result.push(...[ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ]);

// array.from()
const arr3 = Array.from([], (item) => item);
arr3.push('...');

// from
const arr4 = Array.from([ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ], item => item);

// array.from() vs reduce()
const result5 = [];
arr1.forEach(item => {
    result5.push(item);
});
result5.push(...[ { name: 'o wow', id: '7' }, { name: 'greetings', id: '69' } ]);
```

Related benchmarks:

Array.prototype.concat vs spread operator vs slice and push with arrays of objects (version: 0)

Compare the ES6 spread operator with the traditional concat() method and push

Comparing performance of: Array.prototype.concat vs spread operator vs Push

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