Benchmark: Spread vs concat vs unshift (fair) to join arrays test

Script Preparation code:

var a = [1,2,3];
var b = [4,5,6];

Tests:

spread
b=[...a,...b];
concat
b=a.concat(b);
unshift (forEach)
var c = []; a.forEach(el => c.unshift(el)) b.forEach(el => c.unshift(el))
unshift (spread)
var c = []; c.unshift(...a); c.unshift(...b);
push
const a = [1, 2, 3]; const b = [4, 5, 6]; const c = []; const aLen = a.length; const bLen = b.length; let i = 0; for (; i < aLen; i++) { c.push(a[i]); } i = 0 for (; i < bLen; i++) { c.push(b[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat
unshift (forEach)
unshift (spread)
push

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 explanation of what's being tested in this benchmark.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different approaches to join two arrays: using `spread`, `concat`, and `unshift` methods. The goal is to determine which approach is the most efficient.

**Options Compared**

There are four test cases:

1. **Spread**: Using the spread operator (`...`) to create a new array by copying elements from one or more source arrays.
2. **Concat**: Using the `concat()` method to create a new array by concatenating two or more arrays.
3. **Unshift (forEach)**: Using the `unshift()` method and a `for` loop to add elements to the end of an array.
4. **Push**: Using the `push()` method with a `for` loop to add elements to the end of an array.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Spread**:
	* Pros: Fast, concise, and modern syntax.
	* Cons: May have higher overhead due to its dynamic nature.
2. **Concat**:
	* Pros: Well-established method with good performance.
	* Cons: Can be slower than spread for large arrays.
3. **Unshift (forEach)**:
	* Pros: Simple and efficient for adding elements at the beginning of an array.
	* Cons: May have higher overhead due to the use of a `for` loop.
4. **Push**:
	* Pros: Fast and efficient, but may require more manual iteration.

**Library Usage**

None of these approaches rely on any external libraries.

**Special JS Features/Syntax**

The benchmark uses modern JavaScript features such as spread operators (`...`) and template literals (`\r\n`).

**Benchmark Results**

The latest results show that the `push` approach is the fastest, followed closely by the `concat` method. The `spread` method is slower, while the `unshift (forEach)` method is significantly slower due to its overhead.

**Other Alternatives**

Some alternative approaches could be considered:

* Using `Array.prototype.push.apply()` to add elements to an array.
* Using `Array.prototype.splice()` to add or remove elements from an array.
* Using a custom loop with bitwise operations to add elements to an array (although this would likely be slower and less readable).

Keep in mind that the performance results may vary depending on the specific use case, array size, and browser/JavaScript engine used.

Related benchmarks:

Spread vs concat vs unshift (fair) to join arrays test (version: 0)

Comparing the performance of spread, vs concat vs unshift to join two arrays

Comparing performance of: spread vs concat vs unshift (forEach) vs unshift (spread) vs push

Created: 3 years ago by: Registered User

Jump to the latest result

spread

concat

unshift (forEach)

unshift (spread)

push

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