Benchmark: Array.prototype.concat vs spread operator vs stringify

Script Preparation code:

var array1 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array2 = Array(400).fill().map(() => Math.round(Math.random() * 40));

Tests:

Array.prototype.concat
var others = array1.concat(array2);
spread operator
var others = [...array1, ...array2];
stringify
var others = JSON.parse((JSON.stringify(array1)+JSON.stringify(array2)).replace('][',','))
concat apply
var others = Array.prototype.concat.apply([], [array1, array2]);
loop
var others = []; for (var i = 0; i < 400; i+=1) { others[i] = array1[i] } for (var i = 400; i < 800; i+=1) { others[i] = array2[i] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
stringify
concat apply
loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	1949606.6 Ops/sec
spread operator	506063.3 Ops/sec
stringify	56285.2 Ops/sec
concat apply	1482389.5 Ops/sec
loop	18208.7 Ops/sec

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 benchmarks and explore what's being tested in this particular benchmark.

**Benchmark Definition**

The benchmark is designed to compare four different approaches for concatenating two arrays:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. Stringification using `JSON.stringify()` followed by parsing with `JSON.parse()`, and finally replacing the resulting string with commas
4. A custom loop-based approach

**Options Compared**

The four options being compared are:

* **`Array.prototype.concat()`**: This is a built-in method in JavaScript arrays that concatenates another array (or array-like object) to the end of the current array.
* **Spread Operator (`...`)**: The new ES6 spread operator allows you to expand an iterable (like an array or string) into individual elements. When used with `Array.prototype.concat()`, it creates a new array by spreading the contents of one or more arrays and then concatenating them using `concat()`.
* **Stringification (`JSON.stringify()` + `JSON.parse()`)**: This approach involves serializing both input arrays to strings, concatenating them, and then parsing the resulting string back into an array. Note that this requires careful handling of the resulting JSON string.
* **Loop-based Approach**: This option uses a simple loop to copy elements from one array to another.

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

* **`Array.prototype.concat()`**: Pros: Simple, efficient, widely supported. Cons: May not be as performant for very large arrays due to the overhead of creating a new array.
* **Spread Operator (`...`)**: Pros: Modern, concise, flexible. Cons: May incur additional overhead due to the creation of intermediate objects or arrays.
* **Stringification (`JSON.stringify()` + `JSON.parse()`)**: Pros: Can be useful for string manipulation and encoding. Cons: This approach can be slower and more complex due to the parsing step.
* **Loop-based Approach**: Pros: Simple, straightforward. Cons: More verbose, may require careful handling of edge cases.

**Library Usage**

In this benchmark, none of the options explicitly use a library. However, it's worth noting that some libraries (like jQuery) provide optimized implementations of array concatenation methods, which might impact performance in certain scenarios.

**Special JS Features or Syntax**

This benchmark doesn't require any special JavaScript features or syntax beyond the standard ES6 spread operator. The `JSON.stringify()` and `JSON.parse()` functions are used, but these are built-in JavaScript APIs.

Now that we've explored what's being tested in this benchmark, let's look at some alternative approaches for array concatenation:

1. **`Array.prototype.push()`**: Instead of using `concat()`, you could simply use `push()` to add elements to the end of one or both arrays.
2. **`Set()` or `Map()`**: For larger datasets, using a Set or Map data structure might provide better performance and memory efficiency compared to concatenating arrays.
3. **Native Web Workers**: If you're dealing with extremely large datasets that don't fit in memory, consider using native Web Workers to parallelize the concatenation process.

These alternative approaches may not be directly comparable to the original benchmark but can offer interesting perspectives on optimization strategies for array concatenation tasks.

Related benchmarks:

Array.prototype.concat vs spread operator vs stringify (version: 2)

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

Comparing performance of: Array.prototype.concat vs spread operator vs stringify vs concat apply vs loop

Created: 8 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

stringify

concat apply

loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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