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 = [].concat.apply([], [array1, array2])
push apply
var others = [].push.apply(array1, array2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0

Browser/OS: Firefox 91 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	43511.0 Ops/sec
spread operator	22864.3 Ops/sec
stringify	10826.9 Ops/sec
concat apply	50181.9 Ops/sec
push apply	15748.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark compares the performance of different methods to concatenate two arrays:

1. `Array.prototype.concat()`
2. The spread operator (`...`)
3. Using `JSON.stringify()` and `JSON.parse()`
4. `concat apply` (using `apply()` method)
5. `push apply` (using `push()` method with `apply()`)

**Options Compared**

The benchmark is testing the performance of these five options on large arrays, specifically:

* The size of the array: 400 elements
* The distribution of values in the array: random integers between 0 and 40

**Pros and Cons of Each Approach**

1. **`Array.prototype.concat()`**: This method creates a new array by concatenating the two input arrays. It's a simple and straightforward approach, but it can be slow for large arrays because it involves creating a new array and copying the elements.
	* Pros: easy to understand and implement
	* Cons: can be slow for large arrays
2. **Spread Operator (`...`)**: This method uses the spread operator to create a new array by spreading the elements of the two input arrays.
	* Pros: concise and efficient
	* Cons: requires JavaScript 2015 or later syntax
3. **Using `JSON.stringify()` and `JSON.parse()`**: This approach converts each array to a string using `JSON.stringify()`, concatenates the strings, and then parses the resulting string back into an array using `JSON.parse()`.
	* Pros: works in older browsers that don't support the spread operator
	* Cons: can be slow due to string conversion and parsing
4. **`concat apply`**: This method uses the `apply()` method to concatenate the two arrays.
	* Pros: efficient and concise
	* Cons: requires understanding of the `apply()` method
5. **`push apply`**: This method uses the `push()` method with `apply()` to concatenate the two arrays.
	* Pros: simple and easy to understand
	* Cons: can be slow for large arrays because it involves multiple calls to `push()`

**Library Used**

None of these approaches rely on external libraries. They are all part of the standard JavaScript language.

**Special JS Features or Syntax**

The benchmark uses the spread operator (`...`), which is a feature introduced in JavaScript 2015. It's also used in older browsers that support it, albeit with some limitations. The `apply()` method and `push()` method are part of the standard JavaScript language, but they require understanding of their behavior and use cases.

**Other Alternatives**

If you need to concatenate arrays in a browser that doesn't support the spread operator or modern JavaScript features, you can consider using other approaches, such as:

* Using `Array.prototype.reduce()` to concatenate the two arrays
* Creating an intermediate array and then concatenating it with the target array
* Using a library like Lodash, which provides alternative methods for concatenating arrays

However, keep in mind that these alternatives may not be as efficient or concise as the approaches tested in this benchmark.

Related benchmarks:

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

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 push apply

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

stringify

concat apply

push apply

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