Benchmark: spread vs concat vs unshift with slice v2

Script Preparation code:

var array = [1,2,3,4];
var result = [];

Tests:

Concat
result = array.slice(2).concat(array);
Spread
result = [...array, ...array.slice(2)];
Double Spread
const [first, second, ...others] = array; result = [...array, ...others];
Unshift
result.unshift(...array.slice(2));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
Spread
Double Spread
Unshift

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 129 on Ubuntu

View result in a separate tab

Test name	Executions per second
Concat	24609188.0 Ops/sec
Spread	16057538.0 Ops/sec
Double Spread	11638448.0 Ops/sec
Unshift	333695.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

The primary goal of this benchmark is to compare the performance of three different methods for inserting an array into another array:

1. `concat()`: The traditional method of concatenating two arrays using the `+` operator or the `concat()` method.
2. Spread syntax (`...array`) with `slice()`: A newer approach that uses the spread operator to expand an array, followed by calling `slice()` on one of its elements to create a new array with a subset of its elements.
3. Unshift() with `slice()`: Another approach that uses the unshift method to insert elements at the beginning of an array, and then calls `slice()` on one of its elements.

Now, let's discuss the pros and cons of each approach:

**Concat()**

Pros:

* Widely supported across browsers
* Easy to understand and implement

Cons:

* Can be slower for large arrays due to string concatenation under the hood
* Creates a new array object, which can lead to higher memory usage

**Spread syntax with `slice()` (Double Spread)**

Pros:

* Efficient use of spread operator, which creates a shallow copy of the original array
* Avoids explicit slicing, reducing overhead
* Newer and more modern approach

Cons:

* Requires compatibility with older browsers that may not support the spread operator
* Can be slower for very large arrays due to `slice()` method call

**Unshift() with `slice()`**

Pros:

* Fastest method, as it uses native array methods
* Insertion at the beginning of an array can be faster than concatenation

Cons:

* Requires compatible browser support and may not work in older browsers
* Unshift() can be slower for very large arrays due to the overhead of insertion

**Other considerations:**

* The benchmark uses Firefox 129, which means that older versions might not produce comparable results.
* It's essential to note that while this benchmark focuses on performance, it does not account for other factors like memory usage or thread safety.

As an alternative, if you need to compare performance of different array concatenation methods in a more comprehensive way, consider using benchmarks like:

1. `jsperf`: A popular online benchmarking tool specifically designed for JavaScript performance comparisons.
2. `benchmark.js`: A lightweight library that provides an easy-to-use API for running multiple benchmarks simultaneously.
3. Your own custom benchmarking framework or code.

When writing your own benchmark, make sure to consider factors like:

* Input data size and distribution
* Browser and platform support
* Memory usage and allocation patterns
* Thread safety (if applicable)

Remember that benchmarking is an iterative process, and you might need to refine your approach as you gather more insights from your users.

Related benchmarks:

spread vs concat vs unshift with slice v2 (version: 0)

spread vs concat vs unshift with slice v2

Comparing performance of: Concat vs Spread vs Double Spread vs Unshift

Created: 8 months ago by: Guest

Jump to the latest result

Concat

Spread

Double Spread

Unshift

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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