Benchmark: Array concat vs spread operator vs push with forEach

Tests:

Array.prototype.concat
var headers = [{key: "1"}, {key: "2"}]; var formatted = []; headers.forEach(item => { formatted = formatted.concat([{ key: item, label: `sort ${item} asc` }, { key: item, label: `sort ${item} desc` }]) });
spread operator
var headers = [{key: "1"}, {key: "2"}]; var formatted = []; headers.forEach(item => { formatted = [ ...formatted, { key: item, label: `sort ${item} asc` }, { key: item, label: `sort ${item} desc` } ] });
Push
var headers = [{key: "1"}, {key: "2"}]; var formatted = []; headers.forEach(item => { formatted.push({ key: item, label: `sort ${item} asc` }); formatted.push({ key: item, label: `sort ${item} desc` }); });

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 on MeasureThat.net.

**Benchmark Overview**

The benchmark compares three different approaches to concatenate and format an array: `Array.prototype.concat`, the spread operator (`...`), and the `push` method with `forEach`. The goal is to determine which approach is the fastest for this specific use case.

**Options Compared**

1. **`Array.prototype.concat`**: This method creates a new array by concatenating two or more arrays.
2. **Spread Operator (`...`)**: This operator spreads the elements of an array into a new array.
3. **`push` method with `forEach`**: This approach uses the `push` method to add elements to the end of an array while iterating over it.

**Pros and Cons**

1. **`Array.prototype.concat`**:
	* Pros: Established, widely supported, and efficient for small arrays.
	* Cons: Creates a new array, which can lead to performance issues with large datasets.
2. **Spread Operator (`...`)**:
	* Pros: Fast, creates a new array only when necessary, and avoids modifying the original array.
	* Cons: Requires support for the spread operator (ES6+), may not be supported in older browsers or environments.
3. **`push` method with `forEach`**:
	* Pros: Avoids creating a new array, modifies the original array in place.
	* Cons: May lead to slower performance due to the overhead of iterating over the array and modifying it.

**Library Usage**

None of the benchmark test cases explicitly use any libraries or external dependencies. However, the spread operator (`...`) is a part of the ECMAScript standard (ES6+), which means that modern JavaScript engines should support it without issues.

**Special JS Feature/Syntax**

The spread operator (`...`)) was introduced in ECMAScript 2015 (ES6) as a shorthand for creating a new array from an existing one. It's also used in other contexts, such as destructuring and object creation.

**Other Alternatives**

If you're looking for alternative approaches to concatenate arrays, consider the following:

1. **`Array.prototype.reduce()`**: A more functional approach that accumulates values in an accumulator array.
2. **`Array.prototype.unshift()`**: Adds elements to the beginning of the array, which can be faster than `push` with `forEach`.
3. **`Buffer.concat()`**: For Node.js environments, this method creates a new buffer by concatenating multiple buffers.

In summary, the spread operator (`...`) offers a fast and efficient way to concatenate arrays without creating a new one. However, it requires support for ES6+ features. The `push` method with `forEach` avoids creating a new array but may lead to slower performance due to the iteration overhead. The `Array.prototype.concat()` method creates a new array, which can be inefficient for large datasets.

Related benchmarks:

Array concat vs spread operator vs push with forEach (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):