Benchmark: spread vs concat vs unshift (fair) to join arrays

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 (forEach)
var c = []; a.forEach(el => c.push(el)) b.forEach(el => c.push(el))
push (spread)
var c = []; c.push(...a); c.push(...b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:100.0) Gecko/20100101 Firefox/100.0

Browser/OS: Firefox 100 on Linux

View result in a separate tab

Test name	Executions per second
spread	2378.9 Ops/sec
concat	1528.2 Ops/sec
unshift (forEach)	141.4 Ops/sec
unshift (spread)	1332.9 Ops/sec
push (forEach)	614.6 Ops/sec
push (spread)	2178.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different array concatenation methods is crucial in JavaScript development, as it can impact the overall performance and scalability of applications.

The provided benchmark compares four methods to join two arrays:

1.  **Spread Method (b = [...a, ...b])**: This method uses the spread operator (`...`) to create a new array by spreading the elements of `a` and `b`. The pros of this method include its simplicity and readability. However, it may incur a higher overhead due to the creation of intermediate arrays.

2.  **Concat Method (b = a.concat(b))**: This method uses the `concat()` method to concatenate two arrays. The `concat()` method creates a new array by copying elements from one or more source arrays. The pros of this method include its efficiency in joining two arrays. However, it may have higher overhead due to the creation of intermediate arrays.

3.  **Unshift Method (a.forEach(el => c.unshift(el)), b.forEach(el => c.unshift(el)))**: This method uses a loop with `forEach()` and `unshift()` methods to concatenate two arrays. The pros of this method include its flexibility in handling multiple array concatenations. However, it may have higher overhead due to the creation of intermediate arrays and loop iterations.

4.  **Unshift Spread Method (c = [...a], c.unshift(...b))**: This method uses a combination of spread operator (`...`) and `unshift()` method to concatenate two arrays. The pros of this method include its simplicity and efficiency in joining two arrays. However, it may incur higher overhead due to the creation of intermediate arrays.

5.  **Push Method (forEach (el => c.push(el)), push(...a), push(...b))**: This method uses a loop with `forEach()` and `push()` methods to concatenate two arrays. The pros of this method include its flexibility in handling multiple array concatenations. However, it may have higher overhead due to the creation of intermediate arrays and loop iterations.

In terms of performance, the benchmark results show that:

*   **Push Spread Method** (last row) is the fastest at 141 executions per second.
*   **Unshift Spread Method** (third row) is relatively fast at 1332 executions per second but with a lower number of repetitions for each execution.
*   The order of methods may vary based on specific implementation, JavaScript engine and hardware specifics.

The pros and cons of these different approaches are:

*   **Efficiency**: Methods that avoid intermediate array creation or minimize loop iterations tend to be more efficient.
*   **Readability**: Simple and concise methods with fewer lines of code tend to be easier to read and maintain.
*   **Flexibility**: Methods that can handle multiple array concatenations or edge cases may be preferred in certain situations.

Overall, the choice of method depends on the specific requirements of the application, including performance, readability, and maintainability considerations.

Related benchmarks:

spread vs concat vs unshift (fair) to join arrays (version: 2)

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 (forEach) vs push (spread)

Created: 2 years ago by: Registered User

Jump to the latest result

spread

concat

unshift (forEach)

unshift (spread)

push (forEach)

push (spread)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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