Benchmark: spread vs concat vs unshift larger arrays

Script Preparation code:

var array = Array.from(Array(1000).keys());
var array2 = Array.from(Array(20).keys())

Tests:

arrayUnshift123
array2.forEach((v) => array.unshift(v));
arrayConcat123
array = array2.concat(array)
arraySpread123
array = [...array2, ...array]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arrayUnshift123
arrayConcat123
arraySpread123

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested in the JavaScript microbenchmark.

**Benchmark Overview**

The benchmark compares three approaches to manipulate arrays:

1. `unshift()`
2. `concat()`
3. `spread` (using the spread operator `...`)

These methods are used to add elements to an array or concatenate two arrays.

**Options Comparison**

Here's a brief overview of each option and their pros/cons:

*   **`unshift()`**:
    *   **Pros**: Can be more efficient for small arrays as it uses a single operation.
    *   **Cons**: Can lead to memory allocation issues for large arrays, causing performance degradation.
*   **`concat()`**:
    *   **Pros**: More flexible and can handle larger arrays. However, it may incur higher overhead due to multiple operations.
    *   **Cons**: May be slower than `unshift()` for small arrays.
*   **`spread` (using the spread operator `...`)**:
    *   **Pros**: Generally faster and more efficient than other methods, especially for large arrays. It also avoids memory allocation issues.
    *   **Cons**: Requires modern JavaScript features (ES6+) to be supported.

**Library Usage**

None of the test cases use any libraries or external dependencies. The benchmark is self-contained and relies solely on built-in JavaScript functions.

**Special JS Features/Syntax**

The spread operator (`...`) is used in one of the test cases, which requires ES6+ support to work. This feature allows for concise array creation using the `Array.from()` method with the spread operator.

**Benchmark Preparation Code Explanation**

The script preparation code initializes two arrays:

*   `array`: An array with 1000 elements created using `Array.from(Array(1000).keys())`.
*   `array2`: A smaller array with 20 elements created using `Array.from(Array(20).keys())`.

These arrays will be manipulated and compared in the test cases.

**Benchmark Execution**

The benchmark executes each test case multiple times (not specified in the provided data) to collect performance data. The results are then stored in a JSON object, which is used to compare the execution times of each method.

**Alternative Approaches**

Other methods to manipulate arrays include:

*   **`push()`**: Adds an element to the end of an array.
*   **`splice()```**: Inserts or removes elements from an array at a specified position.
*   **`slice()```**: Creates a shallow copy of a portion of an array.

These approaches may have different performance characteristics and are not compared in this specific benchmark.

Related benchmarks:

spread vs concat vs unshift larger arrays (version: 0)

spread vs concat vs unshift

Comparing performance of: arrayUnshift123 vs arrayConcat123 vs arraySpread123

Created: 5 years ago by: Guest

Jump to the latest result

arrayUnshift123

arrayConcat123

arraySpread123

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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