Benchmark: spread vs concat vs unshift (with slice)

Script Preparation code:

var array = [1,2,3];

Tests:

arrayUnshift123
var newArray = array.slice() newArray.unshift(0);
arrayConcat123
array = array.concat([0])
arraySpread123
array = [0, ...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 dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark measures the performance difference between three ways to append or prepend an element to an array in JavaScript:

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

**Script Preparation Code**

The script preparation code creates a sample array `[1, 2, 3]`.

**Html Preparation Code**

There is no HTML preparation code provided.

**Individual Test Cases**

Each test case has a unique benchmark definition that measures the performance of one specific way to modify the array:

1. `arrayUnshift123`: Measures the performance of using `unshift()` with `slice()`.
2. `arrayConcat123`: Measures the performance of using `concat()`.
3. `arraySpread123`: Measures the performance of using the spread operator (`...`).

**Pros and Cons of Each Approach**

1. **`concat()`**: This approach creates a new array by concatenating the original array with the element to be appended. It has a higher overhead due to the creation of a new array, but it's often more straightforward to use.
	* Pros: Easy to understand, no side effects on the original array.
	* Cons: Higher overhead, creates a new array object.
2. **`unshift()`**: This approach modifies the original array by prepending the element at the beginning. It has lower overhead compared to `concat()`, but it can be less intuitive.
	* Pros: Lower overhead, in-place modification of the original array.
	* Cons: Can be less intuitive for some developers, requires careful handling of the length property.
3. **`...` (Spread Operator)**: This approach uses the spread operator to create a new array by copying the elements from the original array and appending the element to be added.
	* Pros: Concise, in-place creation of a new array-like object.
	* Cons: May not work as expected if the element is an object or an array itself.

**Library Usage**

There is no explicit library usage mentioned in the benchmark definition.

**Special JavaScript Features/Syntax**

None are explicitly mentioned in this specific benchmark. However, it's worth noting that some browsers may have additional features or optimizations for certain array methods (e.g., `unshift()` and `concat()`).

**Other Alternatives**

Some alternative approaches to modifying arrays include:

1. Using `splice()`: This method modifies the original array by removing elements and inserting new ones at a specific index.
2. Creating an array using the `Array.from()` method: This method creates a new array from an iterable (e.g., an array, string, or map) but can have higher overhead compared to other methods.

These alternatives are not explicitly tested in this benchmark, but they may be worth exploring for performance-critical applications where every millisecond matters.

Related benchmarks:

spread vs concat vs unshift (with slice) (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):