Benchmark: concat vs spread vs push

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

function generateID(length = 10) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    const charactersLength = characters.length;
    
    for (let i = 0; i < length; i++) {
        // Generate a random index based on characters length
        const randomIndex = Math.floor(Math.random() * charactersLength);
        // Append the character at the random index to the result string
        result += characters[randomIndex];
    }

    return result;
}

function createItem() {
	return { [generateID()]: 'value' };
}

Tests:

concat
let params = new Array(1000).fill('a').map(createItem); let other = new Array(1000).fill('a').map(createItem).concat(params);
spread
let params = new Array(1000).fill('a').map(createItem); let other = [...new Array(1000).fill('a').map(createItem), ...params];
push (spread)
let params = new Array(1000).fill('a').map(createItem); let other = new Array(1000).fill('a').map(createItem); other.push(...params);
push (iterations)
let params = new Array(1000).fill('a').map(createItem); let other = new Array(1000).fill('a').map(createItem); params.forEach(it => other.push(it));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread
push (spread)
push (iterations)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
concat	694.2 Ops/sec
spread	707.0 Ops/sec
push (spread)	695.5 Ops/sec
push (iterations)	705.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 14 days ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares different approaches for combining arrays (or collections) in JavaScript. Here’s a breakdown of what is being tested, the options compared, and the pros and cons of each approach.

### Approaches Compared

1. **Concat**
   - **Benchmark Definition:** 
     ```javascript
     let params = new Array(1000).fill('a').map(createItem);
     let other = new Array(1000).fill('a').map(createItem).concat(params);
     ```
   - This approach uses the `concat` method to combine two arrays. It creates two arrays, each filled with 1000 items generated by the `createItem` function, then concatenates them.

2. **Spread**
   - **Benchmark Definition:** 
     ```javascript
     let params = new Array(1000).fill('a').map(createItem);
     let other = [...new Array(1000).fill('a').map(createItem), ...params];
     ```
   - This approach uses the spread operator (`...`) to expand both arrays and create a new combined array. It achieves the same result as the `concat` method but expresses it differently.

3. **Push with Spread**
   - **Benchmark Definition:** 
     ```javascript
     let params = new Array(1000).fill('a').map(createItem);
     let other = new Array(1000).fill('a').map(createItem);
     other.push(...params);
     ```
   - Here, a new array is populated first, and then the `push` method with the spread operator is used to add the items from `params` to the `other` array.

4. **Push with Iterations**
   - **Benchmark Definition:** 
     ```javascript
     let params = new Array(1000).fill('a').map(createItem);
     let other = new Array(1000).fill('a').map(createItem);
     params.forEach(it => other.push(it));
     ```
   - This method utilizes a loop (using `forEach`) to iterate over the `params` array and `push` each element into the `other` array.

### Performance Results

According to the benchmark results:

- **Spread** was the fastest with approximately 707 executions per second.
- **Push with Iterations** came in second at approximately 705 executions per second.
- **Push with Spread** was slightly slower at around 695 executions per second.
- **Concat** was the slowest at approximately 694 executions per second.

### Pros and Cons of Each Approach

1. **Concat**
   - **Pros:**
     - Straightforward and easy to read.
   - **Cons:**
     - Can be less performant than other methods in certain scenarios, as it creates a new array, which might involve additional overhead.

2. **Spread**
   - **Pros:**
     - More modern and allows for a more concise syntax.
     - Clean and readable.
   - **Cons:**
     - Still creates a new array and may have similar overhead to `concat`.

3. **Push with Spread**
   - **Pros:**
     - Uses existing memory allocation for `other`, potentially improving performance.
     - Clean syntax thanks to the spread operator.
   - **Cons:**
     - Requires an initial allocation and may still involve some overhead with the spread.

4. **Push with Iterations**
   - **Pros:**
     - More control over the iteration process.
     - May be more memory efficient since it modifies `other` directly without creating a new array.
   - **Cons:**
     - Verbose compared to the other options.
     - Iterating can introduce performance overhead if the size of the arrays grows.

### Other Considerations

- **Memory Management:** When combining large arrays, consider the memory footprint. Creating new arrays (e.g., using `concat` or the spread operator) may lead to higher memory usage than modifying an existing array via `push`. 
- **Readability vs. Performance:** While performance metrics are essential, code readability and maintainability are also critical, so choosing an approach may depend on the project context.
- **ES6 Features:** The benchmark utilizes the spread operator, which is a feature introduced in ES6 (ECMAScript 2015) that provides a more straightforward way of handling array and object syntax.

### Alternatives

- **Array.prototype.join** can be used for specific use cases where combining strings or individual items into a single string is needed.
- Utilizing libraries like **lodash** or **underscore.js**, which offer additional array manipulation functions, could also be an alternative, although these typically add a dependency to your project.
- For deep merging, consider libraries that specialize in such operations, like `deepmerge`, but they usually target scenarios involving nested objects rather than flat arrays.

Overall, the best method to use will depend on the specific use case regarding array size, readability preferences, and performance requirements.

Related benchmarks:

concat vs spread vs push (version: 1)

Comparing performance of: concat vs spread vs push (spread) vs push (iterations)

Created: 15 days ago by: Guest

Jump to the latest result

concat

spread

push (spread)

push (iterations)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 14 days ago):