Benchmark: Array concat vs spread operator on NodeList

Script Preparation code:

var dom = document.body.querySelectorAll('*')

Tests:

slice
var other = Array.prototype.slice.call(dom);
spread operator
var other = [ ...dom ]
push apply into empty array
var other = []; [].push.apply(other, dom)
Array.from
var other = Array.from(dom);
concat
var _ref; var other = (_ref = []).concat.apply(_ref, dom);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
spread operator
push apply into empty array
Array.from
concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 91 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
slice	503444.8 Ops/sec
spread operator	489903.8 Ops/sec
push apply into empty array	1472001.0 Ops/sec
Array.from	419219.6 Ops/sec
concat	878343.3 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 provided benchmark and explain what's being tested, compared, and what are the pros and cons of each approach.

**What is being tested?**

The benchmark is comparing four different approaches to concatenate (join) an array with a NodeList:

1. `Array.prototype.slice.call(dom)`
2. Spread operator (`[ ...dom ]`)
3. `[].push.apply(other, dom)` (using `push` method to add elements to an empty array)
4. `Array.from(dom)` (using the `from` method to create a new array from a NodeList)

**Comparison options**

The benchmark is comparing these four approaches because they have different performance characteristics and use cases:

1. **`slice.call()`**: This approach uses the `slice` method to convert the NodeList to an array, which can be slow for large datasets.
2. **Spread operator (`[ ...dom ]`)**: This approach uses a new spread operator (introduced in ES6) to create a new array from the NodeList elements. It's generally faster than using `slice.call()` but may have performance issues if not optimized correctly.
3. **`push.apply()`**: This approach uses the `push` method to add elements to an empty array, which can be slower than other approaches because it requires multiple iterations to push all elements into the array.
4. **`Array.from()`**: This approach uses a dedicated method (`from`) to create a new array from the NodeList elements, which is designed for performance and is generally faster than the other approaches.

**Pros and cons of each approach**

Here's a brief summary:

1. **`slice.call()`**:
	* Pros: Simple and widely supported.
	* Cons: Can be slow for large datasets due to the conversion process.
2. **Spread operator (`[ ...dom ]`)**:
	* Pros: Fast and efficient, but may require modern browsers and/or polyfills.
	* Cons: Not as widely supported as other approaches.
3. **`push.apply()`**:
	* Pros: Simple and easy to implement.
	* Cons: Can be slower than other approaches due to the multiple iterations required.
4. **`Array.from()`**:
	* Pros: Fast, efficient, and designed for performance.
	* Cons: May not be supported in older browsers.

**Library usage**

None of the provided benchmark tests use any external libraries.

**Special JS features or syntax**

The spread operator (`[ ...dom ]`) is a special feature introduced in ES6 (2015). It allows creating a new array from an iterable object, such as a NodeList. The `Array.from()` method is also a modern JavaScript feature introduced in ECMAScript 2015.

**Alternatives**

If you need to concatenate an array with a NodeList and want faster performance, using the spread operator or `Array.from()` would be recommended. However, if you need to support older browsers or prefer simplicity, using `slice.call()` might still be acceptable. Keep in mind that the best approach will depend on your specific use case and requirements.

Related benchmarks:

Array concat vs spread operator on NodeList (version: 0)

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

Comparing performance of: slice vs spread operator vs push apply into empty array vs Array.from vs concat

Created: 3 years ago by: Registered User

Jump to the latest result

slice

spread operator

push apply into empty array

Array.from

concat

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