Benchmark: Array.prototype.concat vs spread operator on NodeList 2

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);
Object.values
var other = Object.values(dom)
A-Push Apply reuse Array
var arr = []; arr.push.apply(arr, 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
Object.values
A-Push Apply reuse Array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
slice	633381.5 Ops/sec
spread operator	656011.9 Ops/sec
push apply into empty array	1897127.0 Ops/sec
Array.from	525760.5 Ops/sec
Object.values	113277.2 Ops/sec
A-Push Apply reuse Array	1907509.9 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 JSON and individual test cases to understand what is being tested.

**Benchmark Definition**

The benchmark measures the performance of different ways to convert a NodeList (a collection of HTML elements) into an array in JavaScript. The test compares the following methods:

1. `Array.prototype.concat()`
2. The ES6 spread operator (`...`)
3. `Array.prototype.slice()` with `call()` method
4. `push.apply()` into an empty array
5. `Array.from()`
6. `Object.values()`

These methods are compared to determine which one is the most efficient for converting a NodeList into an array.

**Benchmark Preparation Code**

The script preparation code sets up a variable `dom` by selecting all HTML elements (`*`) on the document body using `document.body.querySelectorAll('*')`. This creates a NodeList that will be used as input for the benchmark tests.

**Individual Test Cases**

Each test case has a unique `Benchmark Definition`, which specifies how to convert the NodeList into an array. The `Test Name` field provides a brief description of each test case:

1. `slice`: Uses `Array.prototype.slice.call(dom)` to create an array from the NodeList.
2. `spread operator`: Uses `[ ...dom ]` to spread the NodeList elements into an array using the ES6 spread operator.
3. `push apply into empty array`: Creates an empty array and uses `push.apply()` to add all NodeList elements to it.
4. `Array.from()`: Uses `Array.from(dom)` to create an array from the NodeList, similar to how `Array.prototype.forEach()` would iterate over the NodeList.
5. `Object.values()`: Uses `Object.values(dom)` to extract values from the NodeList object (not actually necessary for a NodeList), but is used here as a test case.

**Library and Special JS Features**

* `Array.from()`: Introduced in ES6, this method creates an array from an iterable or an array-like object. It's designed for modern JavaScript applications.
* `push.apply()` with an empty array: This is not typically used in everyday JavaScript development but can be useful when dealing with large datasets that don't fit into memory.

**Alternatives**

Other alternatives to convert a NodeList into an array include:

1. Using `forEach()`: You could iterate over the NodeList using `Array.prototype.forEach()` and then create an array from its arguments, but this would likely be slower than the methods tested here.
2. Using `map()`: Similar to `forEach()`, you could use `Array.prototype.map()` on the NodeList, which would return a new array with the results of applying the callback function to each element.

**Pros and Cons**

Here's a brief summary of the pros and cons for each method:

1. `Array.prototype.concat()`: Efficient but can be slower than other methods due to its overhead.
2. ES6 spread operator (`...`): Fast, modern, and widely supported. However, it requires JavaScript 6+ (ECMAScript 2015+) for compatibility.
3. `Array.prototype.slice()` with `call()`: Can be faster than `concat()` but has a higher overhead due to the `call()` method.
4. `push.apply()` into an empty array: This can be slow due to its overhead, and it's not typically used in everyday JavaScript development.
5. `Array.from()`: Fast, modern, and widely supported. It's designed for performance and is often preferred over other methods.
6. `Object.values()`: Not necessary for this benchmark as it doesn't convert the NodeList into an array; rather, it extracts values from a NodeList object.

In general, when dealing with large datasets or performance-critical code, using modern JavaScript features like ES6 spread operator (`...`) and `Array.from()` can be beneficial.

Related benchmarks:

Array.prototype.concat vs spread operator on NodeList 2 (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 Object.values vs A-Push Apply reuse Array

Created: 3 years ago by: Guest

Jump to the latest result

slice

spread operator

push apply into empty array

Array.from

Object.values

A-Push Apply reuse Array

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