Benchmark: Array.prototype.concat vs spread operator vs stringify over tree data struct

Script Preparation code:

var buildPts = (idx, num) => {
    return {
        x: idx,
        y: num,
        label: {
            x: '' + idx,
            y: '' + num,
            active: {
                x: '' + idx,
            },
            status: {
                x: '' + idx,
            },
        },
    };
};

var array1 = Array(400).fill().map((n, i) => buildPts(i, Math.round(Math.random() * 40)));
var array2 = Array(400).fill().map((n, i) => buildPts(i, 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: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36

Browser/OS: Chrome 87 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	1567071.1 Ops/sec
spread operator	364521.0 Ops/sec
stringify	664.2 Ops/sec
concat apply	1073400.4 Ops/sec
loop	16584.6 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.

**Benchmark Overview**

The benchmark compares four approaches to concatenate two arrays: `Array.prototype.concat`, `spread operator` (also known as rest/spread syntax), `JSON.stringify` with a custom tree data structure, and `concat apply`. The test case uses a large array of 400 elements each, randomly generated with random values between 0 and 40.

**Options Compared**

1. **Array.prototype.concat**: The traditional way to concatenate two arrays in JavaScript.
2. **Spread operator (rest/spread syntax)**: A new feature introduced in ECMAScript 2015 that allows for more concise array concatenation.
3. **JSON.stringify with custom tree data structure**: A creative approach using `JSON.stringify` to convert the array into a JSON string, and then parsing it back into an array.
4. **concat apply**: An alternative way to concatenate two arrays using `Array.prototype.concat.apply()`.
5. **Looping**: A manual approach where elements are copied from one array to another using a loop.

**Pros and Cons of Each Approach**

1. **Array.prototype.concat**:
	* Pros: Simple, widely supported.
	* Cons: Can be slow for large arrays due to the use of `push()` method.
2. **Spread operator (rest/spread syntax)**:
	* Pros: Concise, efficient, and modern.
	* Cons: Only available in modern browsers and Node.js versions.
3. **JSON.stringify with custom tree data structure**:
	* Pros: Novel approach that can be interesting from a theoretical perspective.
	* Cons: Can be slow due to the overhead of serializing and deserializing the array, and may not work correctly for all edge cases.
4. **concat apply**:
	* Pros: Similar performance to `Array.prototype.concat`, but with more explicitness.
	* Cons: Less concise than `concat` method.
5. **Looping**:
	* Pros: Manual control over the concatenation process.
	* Cons: Inefficient and prone to errors, especially for large arrays.

**Library Used**

None explicitly mentioned in the benchmark definition, but `JSON.stringify` is used as a utility function.

**Special JS Feature or Syntax**

The benchmark uses rest/spread syntax (also known as destructuring assignment), which was introduced in ECMAScript 2015. This feature allows for more concise array concatenation using `...`.

**Other Alternatives**

If the spread operator is not supported, another alternative approach could be to use `Array.prototype.reduce()` method:
```javascript
var others = array1.reduce((a, b) => [...a, ...b], []);
```
However, this approach is less efficient than the spread operator and may incur additional overhead due to function calls.

Keep in mind that the benchmark results are specific to Chrome 87 on a Mac with Intel Mac OS X 10.15.7, so the performance differences between these approaches might vary depending on the browser, platform, and hardware.

Related benchmarks:

Array.prototype.concat vs spread operator vs stringify over tree data struct (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 loop

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

stringify

concat apply

loop

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