Benchmark: unshift vs concat vs spread vs slice of item to array

Script Preparation code:

var originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken", "Pizza",1, 2, 3, 4, 5, 6, 7, 8];
var newValue = "Veal";

Tests:

unshift an array
originalArray.unshift("Veal")
concat an array
["Veal"].concat(originalArray)
spread on array
originalArray = ["Veal", ...originalArray]
slice on array
originalArray.splice(0, 0, "Veal")

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
slice on array

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 benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of different ways to add an item to the beginning of an array in JavaScript: `unshift`, `concat`, `spread`, and `slice`. The test cases are designed to push a new value (`"Veal"`) into the original array, which contains various types of data (strings, numbers).

**Library Used**

The benchmark uses the `Array.prototype.unshift` method, which is a standard JavaScript method for adding an item to the beginning of an array. No external library is required.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Test Cases and Comparisons**

Here's a brief description of each test case:

1. **`unshift an array`**: This test case uses `originalArray.unshift("Veal")`, which adds `"Veal"` to the beginning of the `originalArray`.
2. **`concat an array`**: This test case uses `[\"Veal\"].concat(originalArray)`, which creates a new array by concatenating `["Veal"]` with the original array using the `concat` method.
3. **`spread on array`**: This test case uses `originalArray = [\"Veal\", ...originalArray]`, which uses the spread operator (`...`) to add `"Veal"` to the beginning of the original array.
4. **`slice on array`**: This test case uses `originalArray.splice(0, 0, "Veal")`, which uses the `splice` method with a start index of 0 and an amount of 1 (the new item) to add `"Veal"` to the beginning of the original array.

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

* **`unshift`**: Pros:
	+ Fastest execution time in most cases.
	+ Supports inserting multiple items at once using `splice`.
*   Cons:
	+ Modifies the original array.
	+ May cause issues if the array is sparse (i.e., has gaps between elements).
*   **`concat`**:
    Pros:
    	- Does not modify the original array.
        - Supports concatenating multiple arrays at once using `...`.
    Cons:
    *   Slower execution time compared to `unshift`.
    *   Creates a new array, which can lead to increased memory usage.

*   **`spread`**:
    Pros:
    	- Does not modify the original array.
        - Supports adding multiple items at once using `...`.
    Cons:
    *   Slower execution time compared to `unshift`.
    *   Limited support for inserting specific items in certain positions (only works if the item is already present in the array).

*   **`slice`**:
    Pros:
    	- Does not modify the original array.
        - Supports inserting multiple items at once using `...`.
    Cons:
    *   Slower execution time compared to `unshift`.
    *   Requires knowing the index position for insertion.

In summary, `unshift` is generally the fastest way to add an item to the beginning of an array, while `concat` and `spread` offer non-modifying alternatives. However, these methods may have trade-offs in terms of execution time or memory usage.

**Alternatives**

Other alternatives for adding items to the beginning of an array include:

*   Using a custom implementation with a loop.
*   Utilizing a third-party library like Lodash.
*   Employing a different data structure (e.g., a linked list).

However, these alternatives may not be as efficient or convenient as using native JavaScript methods like `unshift`, `concat`, and `spread`.

Related benchmarks:

unshift vs concat vs spread vs slice of item to array (version: 0)

Comparing performance of: unshift an array vs concat an array vs spread on array vs slice on array

Created: 3 years ago by: Guest

Jump to the latest result

unshift an array

concat an array

spread on array

slice on array

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