Benchmark: Array concat vs spread operator vs push with complex objects

Tests:

Array.prototype.concat
var params = [ {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {a:"hello", b:true, c:7} ]; var other = [ {a:"hello", b:true, c:7}, {a:"hello", b:true, c:7}, {a:"hello", b:true, c:7} ].concat(params);
spread operator
var params = [ {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {a:"hello", b:true, c:7} ]; var other = [ {a:"hello", b:true, c:7},{a:"hello", b:true, c:7}, ...params ]
Push
var params = [ {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {d:{a:"hello", b:true, c:7},a:"hello", b:true, c:7}, {a:"hello", b:true, c:7} ]; var other = [ {a:"hello", b:true, c:7},{a:"hello", b:true, c:7} ].push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push

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.

**What is being tested?**

The provided benchmark tests three ways to concatenate or add elements to an array in JavaScript:

1. `Array.prototype.concat()`: This method creates a new array by copying all elements from one array and then adding additional arrays or elements.
2. The spread operator (`...`): Introduced in ECMAScript 2015 (ES6), this syntax allows you to expand an array into a list of arguments, creating a new array.
3. `Array.prototype.push()`: This method adds one or more elements to the end of an existing array.

**Options comparison**

Here's a brief overview of each option and their pros and cons:

1. **`Array.prototype.concat()`**:
	* Pros: Simple, widely supported, and easy to use.
	* Cons: Creates a new array every time it's called, which can be inefficient for large datasets.
2. **Spread operator (`...`)**:
	* Pros: Efficient, modern syntax, and flexible (can be used with arrays or objects).
	* Cons: May require JavaScript version 6+ to work, and some older browsers might not support it.
3. **`Array.prototype.push()`**:
	* Pros: Efficient for large datasets, as it only adds elements to the existing array.
	* Cons: Can be slower than spread operator for small datasets, as it involves more memory allocation.

**Library usage**

None of the tested options rely on external libraries.

**Special JavaScript features/syntax**

The spread operator (`...`) is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows you to expand an array or object into a list of arguments, creating a new array. This syntax was adopted by modern browsers and JavaScript engines.

**Other alternatives**

While not explicitly tested in the provided benchmark, other alternatives for concatenating or adding elements to arrays include:

* `Array.prototype.slice()` followed by `Array.prototype.concat()`
* Using a library like Lodash's `concat` function
* Using a custom implementation with a loop

Keep in mind that these alternatives might not be as efficient or concise as the tested options.

**Benchmark result interpretation**

The benchmark results show the execution times for each test case on a Chrome 107 browser running on a Mac OS X 10.15.7 system. The order of execution times is:

1. `Array.prototype.push()`: ~35 seconds per second
2. Spread operator (`...`): ~31 seconds per second
3. `Array.prototype.concat()`: ~12 seconds per second

This suggests that, in this specific test case and configuration, the spread operator is the fastest option, followed closely by `Array.prototype.push()`.

Related benchmarks:

Array concat vs spread operator vs push with complex objects (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Push

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

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