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

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)
For of push
var other = []; for (let el of dom) { other.push(el); }
Array.contact
var other = [].concat(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
For of push
Array.contact

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Safari/605.1.15

Browser/OS: Safari 12 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
slice	1620778.1 Ops/sec
spread operator	1915647.4 Ops/sec
push apply into empty array	2253431.8 Ops/sec
Array.from	1404954.6 Ops/sec
Object.values	1183592.2 Ops/sec
For of push	2955744.0 Ops/sec
Array.contact	4791288.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested.

**Benchmark Definition**
The benchmark measures the performance of different methods to convert an array-like NodeList (in this case, `dom`) to an array. The tests compare various approaches:

1. `Array.prototype.concat()`
2. Spread operator (`[ ...dom ]`)
3. `push()` and `apply()` on an empty array (`[]; .push.apply(other, dom)`)
4. `Array.from()`
5. `Object.values()`
6. `for...of` loop with `push()` (`for (let el of dom) { other.push(el); }`)

**Options Compared**

Each test case compares a specific method or approach to convert the NodeList to an array. The main differences lie in:

* Whether the conversion is done using a built-in method (e.g., `Array.prototype.concat()`, `Array.from()`) or a custom implementation (e.g., spread operator, `push()` and `apply()`).
* How the NodeList is converted: by iterating over its elements (`for...of` loop), by calling a specific method (`Object.values()`), or using built-in methods (`Array.prototype.concat()`, `Array.from()`).

**Pros and Cons of Each Approach**

Here's a brief summary of each approach:

1. **Built-in methods (`Array.prototype.concat()`, `Array.from()`)**:
	* Pros: often faster, more concise, and well-maintained.
	* Cons: may not be suitable for all use cases (e.g., older browsers, certain data structures).
2. **Spread operator (`[ ...dom ]`)**:
	* Pros: concise, easy to read, and works with modern browsers.
	* Cons: may not be supported in older browsers, and can lead to slower performance due to the creation of a new array.
3. **Custom implementation ( `push()` and `apply()` )**:
	* Pros: can be optimized for specific use cases, reduces overhead of built-in methods.
	* Cons: more verbose, harder to maintain, and may not be as efficient as built-in methods.
4. **`for...of` loop with `push()`**:
	* Pros: easy to understand, works well with modern browsers.
	* Cons: slower than other approaches due to the iteration over elements.
5. **`Object.values()`**:
	* Pros: concise, works well with modern browsers, and suitable for converting NodeList to an object's value array.
	* Cons: may not be as efficient as built-in methods, requires Node.js compatibility.

**Library Used**

None of the provided tests use any external libraries.

**Special JS Features or Syntax**

The benchmark does not mention any special JavaScript features or syntax. However, it's worth noting that some of these approaches rely on modern browser support for newer features like spread operator (`[ ...dom ]`) and `for...of` loop with `push()`.

Now, if you're interested in exploring more alternatives or optimizing the performance of your own JavaScript code, there are several other methods and tools available:

* Other built-in methods: `Array.prototype.reduce()`, `Array.prototype.map()`
* Custom implementations using WebAssembly (WASM) or Just-In-Time (JIT) compilation
* Browser-specific optimizations (e.g., Safari's `map()` optimization)
* Third-party libraries and frameworks for optimizing JavaScript performance

Feel free to ask if you'd like me to elaborate on any of these points!

Related benchmarks:

Array.prototype.concat vs spread operator on NodeList v2 (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 For of push vs Array.contact

Created: 5 years ago by: Guest

Jump to the latest result

slice

spread operator

push apply into empty array

Array.from

Object.values

For of push

Array.contact

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