Benchmark: spread vs concat vs unshift

Script Preparation code:

var array = [1,2,3];

Tests:

arrayUnshift123
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
arrayUnshift123
arrayConcat123
arraySpread123

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

Test name	Executions per second
arrayUnshift123	51132.6 Ops/sec
arrayConcat123	891.9 Ops/sec
arraySpread123	136.7 Ops/sec

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 on MeasureThat.net.

**Benchmark Description**

The benchmark measures the performance difference between three ways to add an element to the beginning of an array:

1. `unshift()`
2. `concat()` with a new array containing the element
3. The spread operator (`...`)

**Options Compared**

The benchmark compares the performance of these three approaches, which can be summarized as follows:

* **Pros and Cons:**
	+ `unshift()`: Most efficient way to add an element to the beginning of an array, but it requires modifying the original array.
	+ `concat()`: Creates a new array with the element added at the beginning, resulting in slower performance due to memory allocation. However, it preserves the original array and can be useful when preserving the original data.
	+ Spread Operator (`...`): A relatively recent feature introduced in ECMAScript 2015 (ES6), which allows for creating a new array by spreading elements from an existing array. It's faster than `concat()` but slower than `unshift()`.
* **Other Considerations:**
	+ The benchmark doesn't account for the size of the input array, which can affect performance. Larger arrays may lead to different results.
	+ The use of `const` or `let` declarations for the variable might not impact performance in this specific benchmark.

**Library and Syntax**

The test cases use native JavaScript features:

* No libraries are used in this benchmark.
* No special JS features or syntax (like async/await, Promises, etc.) are used. However, the spread operator (`...`) is a relatively recent feature introduced in ES6.

**Benchmark Preparation Code**

The script preparation code creates an array with three elements: `[1, 2, 3]`. This ensures that each test case starts with the same initial array.

**Individual Test Cases**

Each test case measures the performance of one specific operation:

* `arrayUnshift123`: Measures the time taken to add `0` to the beginning of an array using `unshift()`.
* `arrayConcat123`: Measures the time taken to create a new array with `0` added at the beginning using `concat()`.
* `arraySpread123`: Measures the time taken to create a new array by spreading elements from the original array using the spread operator (`...`).

**Latest Benchmark Result**

The benchmark result shows the performance data for each test case, including:

* Raw UAS (User Agent String) information
* Browser and device platform details
* Execution rate per second
* Test name

This result provides a snapshot of how these three approaches perform in terms of execution speed on a specific Chrome 128 browser running on Linux.

Related benchmarks:

spread vs concat vs unshift (version: 0)

spread vs concat vs unshift

Comparing performance of: arrayUnshift123 vs arrayConcat123 vs arraySpread123

Created: 8 years ago by: Guest

Jump to the latest result

arrayUnshift123

arrayConcat123

arraySpread123

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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