Benchmark: Add a lot of elements to array: slice and push vs destructuring

Tests:

spread operator
const before = Array(100000).fill('before') const after = Array(100000).fill('after') const other = [ ...before, ...after ]
Push
const before = Array(100000).fill('before') const after = Array(100000).fill('after') const other = before.slice().push(...after)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Ubuntu

View result in a separate tab

Test name	Executions per second
spread operator	296.5 Ops/sec
Push	564.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares two different methods for adding a large number of elements to an array in JavaScript: using the spread operator versus using the `Array.prototype.push` method. Here's a breakdown of the benchmarking approach and the pros and cons of each method.

### Approach Compared

1. **Spread Operator**:
   - **Code**: `const other = [ ...before, ...after ]`
   - In this case, the `before` array, filled with 100,000 'before' strings, and the `after` array, filled with 100,000 'after' strings, are combined into a new array using the spread operator (`...`). This syntax expands the elements of the two arrays into a new array.

2. **Array.prototype.push with slice**:
   - **Code**: `const other = before.slice().push(...after)`
   - Here, the `before` array is first duplicated using `slice()`, and then the elements of the `after` array are added to the end of this duplicate using `push`. Note that `slice()` creates a shallow copy of the `before` array, while `push(...after)` appends the elements of `after` to this new array.

### Benchmark Results

The benchmark results show the number of executions per second for each method:
- **Spread operator**: 1386.25 executions per second
- **Push**: 990.10 executions per second

Clearly, the spread operator outperforms the `push` method in this test case.

### Pros and Cons

#### Spread Operator
**Pros**:
- Concise syntax that is easy to read and understand.
- Generally faster in this benchmarking context.
- Creates a new array directly, which can be beneficial for immutability practices (e.g., in functional programming).

**Cons**:
- In older JavaScript environments (pre-ES6), the spread operator is not available without transpilation (though this is now less of an issue).

#### Array.prototype.push
**Pros**:
- Familiar method for those who may not be as familiar with ES6 features.
- Can be slightly more efficient in scenarios where modifying the existing array is acceptable without creating additional copies.

**Cons**:
- Slightly more verbose compared to the spread operator.
- Performance is generally lower in this specific context compared to the spread operator, as shown in the benchmark results.
- The use of `slice()` to create a copy adds additional overhead.

### Other Considerations

When deciding between these two methods, consider the importance of readability versus performance in your specific context. The spread operator tends to be more readable for developers familiar with modern JavaScript. While performance differences could be more pronounced with different array sizes or in different environments, the results indicate that the spread operator is generally favorable for combining arrays.

### Alternatives

Other alternatives to consider for merging arrays could include:
- **`concat()`** method: `const other = before.concat(after);` – It merges two or more arrays and returns a new array while not modifying the original arrays.
- **Manual loop or iteration**: Less common and generally not recommended for readability and performance reasons, but it can be optimized in certain cases.

Ultimately, the choice of method might depend on the specific requirements of your application, such as performance constraints, code readability preferences, and the JavaScript environment in which your code will run.

Related benchmarks:

Add a lot of elements to array: slice and push vs destructuring (version: 1)

Comparing performance of: spread operator vs Push

Created: one year ago by: Guest

Jump to the latest result

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):