Benchmark: Array.flat() vs. concat() + spreadOperator + concat.apply()

Tests:

concat() + spread operator
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = [].concat(...params);
Array.flat()
var params = [[1, 2, params], [ "hello", true, 7 ]]; var other = params.flat();
concat.apply()
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = [].concat.apply([], params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat() + spread operator
Array.flat()
concat.apply()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0

Browser/OS: Firefox 84 on Fedora

View result in a separate tab

Test name	Executions per second
concat() + spread operator	767254.3 Ops/sec
Array.flat()	1487261.4 Ops/sec
concat.apply()	1364004.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its individual test cases.

**Benchmark Overview**

The benchmark compares the performance of three different approaches to flatten an array:

1. `Array.flat()`
2. `concat()` with spread operator (`...`)
3. `concat.apply()` with two arguments

These approaches aim to achieve the same result: taking an array of arrays and returning a single, flat array.

**Pros and Cons of Each Approach**

1. **`Array.flat()`**
	* Pros:
		+ Simple and intuitive syntax
		+ Part of the ECMAScript standard since ES6
		+ No additional libraries required
	* Cons:
		+ May incur a slight performance overhead due to function call and loop
2. **`concat()` with spread operator (`...`)**
	* Pros:
		+ Efficient use of modern syntax (spread operator)
		+ May be faster than `Array.flat()` due to optimized JavaScript engine handling
	* Cons:
		+ Requires ECMAScript 2015 or later support
		+ Additional libraries not necessary, but not a traditional library either (more like a built-in feature)
3. **`concat.apply()` with two arguments**
	* Pros:
		+ More explicit and controllable than `concat()` with spread operator
		+ Less dependent on modern syntax features
	* Cons:
		+ Longer and more verbose code
		+ May incur performance overhead due to repeated function calls

**Library Used**

None, all three approaches use built-in JavaScript functions.

**Special JS Features or Syntax**

The benchmark uses the following special JS features:

1. `...` (spread operator) - introduced in ECMAScript 2015 (ES6)
2. Function call `apply()` with multiple arguments - a feature that has been around since early JavaScript versions, but still used today.

**Other Alternatives**

If you want to flatten an array, there are other approaches:

1. Using the `reduce()` method: `[...array].reduce((acc, item) => [...acc, ...item], [])`
2. Using the `map()` and `concat()` methods in a loop: `Array.from(array).map(subarray => [ ...subarray ]).flat()`
3. Recursively traversing the array and concatenating elements (which can be slower and more complex)

However, these alternatives are not part of the benchmark's scope.

Overall, the benchmark provides a simple and straightforward way to compare the performance of three different approaches to flatten an array in JavaScript.

Related benchmarks:

Array.flat() vs. concat() + spreadOperator + concat.apply() (version: 0)

Compare the Array.flat() to concat() + spread operator

Comparing performance of: concat() + spread operator vs Array.flat() vs concat.apply()

Created: 4 years ago by: Guest

Jump to the latest result

concat() + spread operator

Array.flat()

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