Benchmark: Array concat vs spread vs unshift

Tests:

Concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
Spread
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Unshift each
var params = [ "hello", true, 7 ]; params.unshift(2); params.unshift(1);
Unshift together
var params = [ "hello", true, 7 ]; params.unshift(1, 2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
Spread
Unshift each
Unshift together

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Spread

9.4M/s

Unshift together

3.5M/s

Unshift each

2.7M/s

Concat

2.5M/s

View exact numbers

Test name	Executions per second
✓ Spread	9,353,793 Ops/sec
Unshift together	3,475,182 Ops/sec
Unshift each	2,749,104 Ops/sec
Concat	2,461,570 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark, hosted on MeasureThat.net, compares three different methods for concatenating arrays in JavaScript: `concat()`, the spread operator (`...`), and `unshift()`.

**Test Cases**

There are four test cases:

1. **Concat**: Uses the traditional `concat()` method to concatenate an array with another array.
2. **Spread**: Utilizes the new ES6 spread operator to insert elements into an existing array.
3. **Unshift each**: Calls `unshift()` twice, once for each element, to add them to the beginning of the array.
4. **Unshift together**: Calls `unshift()` with multiple arguments to add all elements at once.

**Comparison of Options**

Here's a brief overview of each option:

* **`concat()`**: This method creates a new array and copies the elements from both arrays into it. It can be slower than other methods because of the overhead of creating a new array.
* **Spread operator (`...`)**: This method is faster and more efficient than `concat()`. By using the spread operator, only one assignment operation is needed to create a new array with the combined elements.
* **`unshift()`**: While `unshift()` can be an effective way to add elements to an array, it's not as efficient as the other two methods. This is because `unshift()` modifies the original array and can lead to reallocations of memory.

**Pros and Cons**

Here are some pros and cons of each approach:

* **`concat()`**: Pros: easy to understand, widely supported. Cons: slower than other methods.
* **Spread operator (`...`)**: Pros: fast, efficient, modern JavaScript feature. Cons: requires ES6 support, may not be immediately clear to those unfamiliar with it.
* **`unshift()`**: Pros: can be effective for small arrays or when working with existing arrays. Cons: slower than other methods, modifies original array.

**Library/Features Used**

There is no specific library used in this benchmark. However, the spread operator (`...`) is a modern JavaScript feature introduced in ES6.

**Special JS Features/Syntax**

The spread operator (`...`), introduced in ES6, allows for more concise and expressive way to create new arrays with combined elements. This syntax was not available in earlier versions of JavaScript and may require additional setup or compatibility flags to support older browsers.

**Alternatives**

If you're looking for alternatives to this benchmark, you can try:

* Other benchmarking tools like JSHint's Benchmark Suite or the JavaScript performance testing framework, JSTest.
* Online code snippet platforms like JSFiddle or Repl.it, which allow you to write and test your own JavaScript code.
* Benchmarked libraries like js-benchmark or js-performance-test.

Keep in mind that the choice of benchmarking tool will depend on your specific use case, performance requirements, and testing goals.

Array concat vs spread vs unshift (version: 1) Benchmark.js

Compare the new ES6 spread operator with the traditional concat() method and unshift

Comparing performance of: `Concat vs Spread vs Unshift each vs Unshift together`

Created: 4 years ago by: Registered User

Go to the latest result

Concat

Spread

Unshift each

Unshift together

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array concat vs spread vs unshift (version: 1) Benchmark.js

Compare the new ES6 spread operator with the traditional concat() method and unshift

Comparing performance of: Concat vs Spread vs Unshift each vs Unshift together

Created: 4 years ago by: Registered User

Go to the latest result

Concat

Spread

Unshift each

Unshift together

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: `Concat vs Spread vs Unshift each vs Unshift together`