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]

Historical Performance Data aggregated from 124 community runs

Desktop Results:

Chrome 99 runs

arrayUnshift123

27K/s

arrayConcat123

1K/s

arraySpread123

98/s

Fastest: arrayUnshift123 (274.9x faster)

View exact numbers

✓ arrayUnshift123: 27,071 ops/sec
• arrayConcat123: 1,179 ops/sec
• arraySpread123: 98 ops/sec

Firefox 25 runs

arrayUnshift123

558K/s

arrayConcat123

52/s

arraySpread123

12/s

Fastest: arrayUnshift123 (45959.5x faster)

View exact numbers

✓ arrayUnshift123: 558,213 ops/sec
• arrayConcat123: 52 ops/sec
• arraySpread123: 12 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

arrayUnshift123

51K/s

arrayConcat123

892/s

arraySpread123

137/s

View exact numbers

Test name	Executions per second
✓ arrayUnshift123	51,133 Ops/sec
arrayConcat123	892 Ops/sec
arraySpread123	137 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.

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

Go to the latest result

arrayUnshift123

arrayConcat123

arraySpread123

Historical Performance Data aggregated from 124 community runs

Desktop Results:

Chrome 99 runs

Firefox 25 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

arrayUnshift123

arrayConcat123

arraySpread123

Historical Performance Data aggregated from 124 community runs

Desktop Results:

Chrome 99 runs

Firefox 25 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `arrayUnshift123 vs arrayConcat123 vs arraySpread123`