Benchmark: unshift vs concat vs spread vs unshift.apply of another array

Script Preparation code:

var arr1 = [];
for (let i=0; i<100; ++i)
	arr1.push(i);

var arr2 = [];
for (let i=0; i<100; ++i)
	arr2.push(i);

Tests:

unshift an array
arr1.unshift(...arr2)
concat an array
arr1.concat(arr2)
spread on array
let arr3 = [...arr1, ...arr2]
unshift.apply
arr1.unshift.apply(arr1, arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
unshift an array
concat an array
spread on array
unshift.apply

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Windows

View result in a separate tab

Test name	Executions per second
unshift an array	1350.5 Ops/sec
concat an array	98.8 Ops/sec
spread on array	35.1 Ops/sec
unshift.apply	508.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net provides a platform for comparing the performance of different JavaScript methods for adding elements to an array. The benchmark tests four approaches: `unshift`, `concat`, spread operator (`...`), and `unshift.apply`.

**Methods Compared**

1.  **`arr1.unshift(...arr2)`**: This method adds all elements from `arr2` at the beginning of `arr1`.
    *   Pros:

*   Efficient for adding multiple elements.
        *   Does not modify the original array.
    *   Cons:

*   May be slower than other methods for adding a single element.
    *   Special JavaScript feature: Spread operator (`...`).
2.  **`arr1.concat(arr2)`**: This method creates a new array and adds all elements from `arr2`.
    *   Pros:

*   Easy to implement and understand.
        *   Works with any type of object, not just arrays.
    *   Cons:

*   Creates an extra array object, which can be slower for large data sets.

*   May modify the original array if it's also used as a collection.
3.  **`let arr3 = [...arr1, ...arr2]`**: This method uses the spread operator (`...`) to create a new array with all elements from `arr1` and `arr2`.
    *   Pros:

*   Efficient for adding multiple elements.
        *   Does not modify the original arrays.

*   Can be used in conjunction with other methods (e.g., `concat()`).
4.  **`arr1.unshift.apply(arr1, arr2)`**: This method uses the spread operator (`...`) and the `apply()` method to add all elements from `arr2` at the beginning of `arr1`.

*   Pros:

*   Efficient for adding multiple elements.
        *   Does not modify the original array.

*   Can be used in conjunction with other methods (e.g., spread operator (`...`)).

Cons:

*   May have performance issues due to the use of `apply()`.

**Other Considerations**

*   **Performance**: The benchmark measures the number of executions per second. A higher value indicates better performance.
*   **Browser and Device Variability**: MeasureThat.net includes results from multiple browsers and devices, which can impact performance due to differences in JavaScript engine optimization, caching, and hardware.
*   **Data Set Size**: The benchmark uses an array with 100 elements (100x). Larger data sets may alter the relative performance of each method.

**Library Used**

None, this is a built-in JavaScript feature.

**Special JavaScript Features or Syntax**

The spread operator (`...`) is used in three methods: `unshift(...arr2)`, `concat(arr2)`, and `unshift.apply(arr1, arr2)`.

Other alternatives for adding elements to an array include:

*   **`Array.prototype.push()`**: Adds one element at the end of the array.
    *   Pros:

*   Efficient for adding a single element.
    *   Cons:

*   May be slower than other methods for adding multiple elements.
    *   Usage: `arr1.push(i)`
*   **`Array.prototype.splice()`**: Adds or removes one or more elements from the array.
    *   Pros:

*   Flexible for adding multiple elements.
        *   Can be used to insert, remove, or replace elements.

*   May be slower than other methods due to its flexibility and potential overhead.
    *   Cons:

*   May modify the original array if it's also used as a collection.
    *   Usage: `arr1.splice(0, 0, i)`
*   **`Array.prototype.indexOf()`** or **`Array.prototype.includes()`**: Search for an element within the array.

*   Pros:

*   Efficient for searching multiple elements.

*   Can be used to find a specific index in the array.
    *   Cons:

*   May return `-1` if the element is not found, which can lead to errors.
        *   May modify the original array if it's also used as a collection.
    *   Usage: `arr1.indexOf(i)` or `arr1.includes(i)`

These alternatives may offer better performance, flexibility, or readability for specific use cases, but they may come with additional overhead due to their complexity.

Related benchmarks:

unshift vs concat vs spread vs unshift.apply of another array (version: 0)

unshift vs concat vs spread of another array

Comparing performance of: unshift an array vs concat an array vs spread on array vs unshift.apply

Created: 2 years ago by: Registered User

Jump to the latest result

unshift an array

concat an array

spread on array

unshift.apply

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