Benchmark: spread vs concat vs unshift (small-big arrays)

Script Preparation code:

var small = ['b', 'c', 'd'];
  
var big = [];
for (var i = 0; i < 10000; i++) {
  big[i] = i.toString();
}

Tests:

arrayUnshift123
['a', 'b', 'c'].unshift(small); ['a', 'b', 'c'].unshift(big);
arrayConcat123
small.concat(['a', 'b', 'c']); big.concat(['a', 'b', 'c']);
arraySpread123
var s = [ ...small, ...['a', 'b', 'c'] ]; var b = [ ...big, ...['a', 'b', 'c'] ];

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:

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 world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches for inserting elements at the beginning of an array: `unshift`, `concat`, and spread syntax (`...`). The test cases are designed to create a small and large arrays, and then perform the insertion operations on both arrays.

**Approaches Compared**

1. **`unshift`**: This method inserts elements at the beginning of the array and returns the length of the resulting array. It is generally considered a fast operation.
2. **`concat`**: This method creates a new array by concatenating the original array with the elements to be inserted. It is also relatively fast but may incur a higher overhead due to the creation of a new array.
3. **Spread syntax (`...`)**: This is a modern JavaScript feature that allows for more concise and expressive code. When used with arrays, it creates a new array by spreading the original array and the elements to be inserted.

**Pros and Cons**

* `unshift`:
	+ Pros: Fast, efficient, and native implementation.
	+ Cons: May have issues with arrays of sparse data (i.e., some elements are missing).
* `concat`:
	+ Pros: Robust implementation, handles sparse arrays, and allows for chaining operations.
	+ Cons: Creates a new array, which can be slower than modifying the original array.
* Spread syntax (`...`):
	+ Pros: Concise, expressive, and efficient for small to medium-sized arrays.
	+ Cons: May incur additional overhead due to the creation of a new array, and may not perform as well for very large arrays.

**Library Usage**

None of the test cases use any external libraries or modules. The benchmark only relies on native JavaScript features.

**Special JS Features**

The test case "arraySpread123" uses the spread syntax feature (`...`). This is a modern JavaScript feature introduced in ECMAScript 2015 (ES6) that allows for more concise and expressive code when working with arrays, objects, and other iterable data structures.

**Alternative Approaches**

Other approaches to insert elements at the beginning of an array include:

1. Using `Array.prototype.push` followed by shifting elements from the end: `array.unshift(...)` can be implemented using `array.push(array.shift())`. While this approach is not as efficient as `unshift`, it can still work for small arrays.
2. Using a custom implementation with indexing and manual memory management: This approach would require writing low-level code to manipulate the array's internal buffer and may incur significant performance overhead.

**Benchmark Result Interpretation**

The benchmark results show that `unshift` is generally the fastest approach, followed closely by the spread syntax (`...`). The `concat` method performs slower than both of these approaches. These results suggest that for small to medium-sized arrays, using `unshift` or spread syntax may be more efficient than creating a new array with `concat`. However, for very large arrays or performance-critical code, additional optimizations or alternative approaches may be necessary.

Keep in mind that benchmarking results can vary depending on the specific use case, hardware, and JavaScript environment.

Related benchmarks:

spread vs concat vs unshift (small-big arrays) (version: 0)

spread vs concat vs unshift

Comparing performance of: arrayUnshift123 vs arrayConcat123 vs arraySpread123

Created: 6 years ago by: Guest

Jump to the latest result

arrayUnshift123

arrayConcat123

arraySpread123

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