Benchmark: Array.prototype.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);
Object.values
var other = Object.values(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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 20 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
slice	8367287.0 Ops/sec
spread operator	3762632.0 Ops/sec
push apply into empty array	9080717.0 Ops/sec
Array.from	3072857.2 Ops/sec
Object.values	5960292.5 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmarking results.

**What is being tested?**

The test case compares different methods for creating a copy of a NodeList (a collection of DOM elements) from an HTML document body. The goal is to find the most efficient way to create a new array or list containing all the elements from the NodeList.

**Options compared:**

1. **`Array.prototype.slice.call(dom)`**: This uses the `slice()` method on the Array prototype, calling it as a function with the NodeList as an argument.
2. **`[ ...dom ]`**: This uses the spread operator (`...`) to create a new array from the NodeList.
3. **`[]; .push.apply(other, dom)`**: This creates an empty array and then uses `Array.prototype.push.apply()` to add all elements from the NodeList to it.
4. **`Array.from(dom)`**: This uses the `Array.from()` method to create a new array from the NodeList.
5. **`Object.values(dom)`**: This uses the `Object.values()` method to create an array of values (i.e., DOM element references) from the NodeList.

**Pros and cons:**

* **`slice()`**: This method is well-established in JavaScript, but it's not as efficient for large collections as some newer methods. It has a time complexity of O(n), where n is the number of elements.
* **Spread operator (`...`)**: This is a concise way to create a new array from an existing collection. It's also O(n) time complexity, but more readable and easier to write than `slice()`.
* **`push.apply()`**: This method can be slower for large collections because it creates a new array and then adds elements one by one. Time complexity is also O(n), but with some overhead.
* **`Array.from()`**: This method provides an efficient way to create a new array from any iterable, including NodeLists. It's generally faster than `slice()` or the spread operator for large collections. Time complexity is also O(n).
* **`Object.values()`**: This method creates an array of values (i.e., DOM element references) from the NodeList, but it's not as efficient as other methods for this specific use case.

**Other considerations:**

* **Browser support**: All methods are supported in modern browsers, including Chrome 127.
* **Performance differences**: The benchmark results show significant performance differences between the methods. `push.apply()` is the slowest, while `Array.from()` and `slice()` perform similarly but faster than the spread operator.

**Library:**

None specific to this test case. However, the test uses standard JavaScript built-in methods like `Array.prototype.slice.call()`, `[ ... ]` (spread operator), `Array.from()`, and `Object.values()`.

I hope this explanation helps you understand what's being tested and compared in this benchmark!

Related benchmarks:

Array.prototype.concat vs spread operator on NodeList (version: 3)

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

Created: 6 years ago by: Registered User

Jump to the latest result

slice

spread operator

push apply into empty array

Array.from

Object.values

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 2 months ago):