Benchmark: spread vs concat vs unshift @ 100k

Script Preparation code:

var array = [];
for (let i = 0; i < 100000; i++) {
  array.push(i)
}

Tests:

array100kAddToFront
array.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
array100kAddToFront
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 benchmark and its test cases.

**Benchmark Definition**

The benchmark is defined in JSON format, which describes three different approaches to add an element to the end of an array:

1. `array.unshift(0);`
2. `array = array.concat([0])`
3. `[...array, 0]`

These approaches are often referred to as "spread" vs. "concat" vs. "unshift".

**Options Comparison**

Here's a brief comparison of the three approaches:

1. **Unshift**: Adds an element to the beginning of the array. This approach is generally faster than concatenation because it only requires updating the length of the array and the indices of the elements that come after the new element.
2. **Concat**: Creates a new array by copying the existing array and adding the new element to the end. This approach is slower than unshift because it involves creating a new array object, which can be more expensive in terms of memory allocation and garbage collection.
3. **Spread**: Uses the spread operator (`...`) to create a new array with the original elements and the new element appended to the end. This approach is similar to concatenation but can be faster because it uses a more efficient implementation under the hood.

**Pros and Cons**

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

1. **Unshift**: Pros:
	* Fastest performance
	* Updates indices of elements after the new element correctly
Cons:
	* Only suitable for adding elements to the beginning of the array
2. **Concat**: Pros:
	* Easy to implement and understand
	* Works with any array size
Cons:
	* Slowest performance due to memory allocation and garbage collection
3. **Spread**: Pros:
	* Fast performance (especially for large arrays)
	* Can be used to add elements to the end of an array in a more functional programming style
Cons:
	* May require additional browser support for older versions

**Library Usage**

None of the test cases explicitly use any external libraries.

**Special JS Features or Syntax**

None of the test cases utilize any special JavaScript features or syntax, such as async/await, promises, or generator functions.

**Other Considerations**

When choosing an approach, consider the following factors:

* Performance: If speed is critical, unshift might be the best choice.
* Readability: If readability is more important than performance, concat or spread might be better options.
* Functionality: If you need to add elements to both the beginning and end of an array, unshift might not be suitable.

**Alternatives**

Other approaches to adding elements to an array include:

1. `array.slice().push(0)`: This method creates a new array by slicing the original array and pushing the new element onto it.
2. `array.reduce((acc, current) => [...acc, 0], [])`: This method uses the reduce() function to create a new array with the original elements and the new element appended to the end.

Keep in mind that these alternatives might have slightly different performance characteristics or readability trade-offs compared to unshift, concat, and spread.

Related benchmarks:

spread vs concat vs unshift @ 100k (version: 0)

spread vs concat vs unshift

Comparing performance of: array100kAddToFront vs arrayConcat123 vs arraySpread123

Created: 3 years ago by: Registered User

Jump to the latest result

array100kAddToFront

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