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

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var existing = [ 1, 2, "hello", true, 7 ];
var newi = [1, 1, 1];

Tests:

Array.prototype.concat
var other = existing.concat(newi);
spread operator
var other = [ ...existing, ...newi ];
copy on push
var other = newi.forEach(i => existing.concat().push(i));
directly push
newi.forEach(i => existing.push(i));
flat
var other = _.flatten([ existing, newi ]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
copy on push
directly push
flat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 11; HD1907) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36

Browser/OS: Chrome Mobile 96 on Android

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	2095507.6 Ops/sec
spread operator	2888256.8 Ops/sec
copy on push	1387847.4 Ops/sec
directly push	1687021.2 Ops/sec
flat	0.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this benchmark.

**Benchmark Definition**

The benchmark is designed to compare four different approaches for concatenating arrays or modifying existing arrays:

1. `Array.prototype.concat()`: Using the traditional `concat()` method.
2. Spread operator (`[...]`): Utilizing the new ES6 spread operator to create a new array.
3. "Copy on push" (assuming `push()` modifies an existing array by copying its elements and then pushing the new ones): This approach uses `forEach()` to iterate over the new array and append it to the existing one using `concat()`.
4. Directly pushing (`newi.forEach(i => existing.push(i))`): Modifying the original array directly by iterating over the new array and pushing each element into the existing array.

**Pros and Cons of Each Approach**

1. **Array.prototype.concat()**: This approach is straightforward, but it creates a new array on every iteration, which can lead to performance issues with large datasets.
2. **Spread operator ([...] ```newi```). This approach creates a new array without modifying the existing one, making it more memory-efficient.
3. **Copy on push (copying elements using `concat()` and then pushing new ones)**: While this approach modifies an existing array, it still has the overhead of creating intermediate arrays, which might be less efficient than other methods.
4. **Directly pushing (`newi.forEach(i => existing.push(i))`)**: This approach directly modifies the original array by iterating over the new array and appending each element to the existing one. It's likely the most memory-efficient option.

**Library Usage**

The benchmark uses Lodash, a popular JavaScript utility library, in its `flat()` test case:

```javascript
var other = _.flatten([existing, newi]);
```

`_flatten()` is used to flatten an array of arrays into a single array. This approach is useful when you need to perform operations on nested arrays, but it may not be the most efficient way to concatenate or modify arrays.

**Special JS Features/Syntax**

The benchmark does not use any special JavaScript features or syntax beyond what's standard in modern browsers (ECMAScript 2015+).

**Alternative Approaches**

Here are some alternative approaches that could be used for this benchmark:

1. **Using `Array.prototype.pushAll()`**: This method is available in ECMAScript 2022, which allows pushing multiple values into an array at once.
```javascript
existing.push(...newi);
```
2. **Using a custom implementation with `Set` or `Map`**: You could create a custom function that iterates over the new array and adds each element to a `Set` or `Map`, which would then be converted back to an array. This approach can be more efficient than using `push()` or `concat()`.
3. **Using a parallel processing library (e.g., Web Workers)**: If you have a multi-core processor, you could use Web Workers to run each test case in parallel, reducing overall execution time.

Keep in mind that these alternative approaches might not be as straightforward or well-documented as the original methods used in the benchmark.

Related benchmarks:

Array concat vs spread operator vs push (many) (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 copy on push vs directly push vs flat

Created: 3 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

copy on push

directly push

flat

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