Benchmark: Array.from vs Spread vs Slice with Node List

HTML Preparation code:

<ul>
</ul>

Script Preparation code:

var fooSet = new Set();
var ul = document.querySelector('ul');
for(var i=0;i<100;i++) {
  fooSet.add(i);
  ul.appendChild(document.createElement('li'));
}

var listItems = document.querySelectorAll('li');

Tests:

Array.from
var other = Array.from(fooSet);
Spread
var other = [...fooSet];
Array.from on NodeList
var other = Array.from(listItems);
Spread on NodeList
var other = [...listItems];
Slice
var other = [].slice.call(listItems);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread
Array.from on NodeList
Spread on NodeList
Slice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 8.1

View result in a separate tab

Test name	Executions per second
Array.from	390618.0 Ops/sec
Spread	394333.6 Ops/sec
Array.from on NodeList	111663.5 Ops/sec
Spread on NodeList	111740.0 Ops/sec
Slice	481917.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark data.

**What is tested:**

The benchmark compares the performance of three different methods for converting or copying an array (or a set) to another data structure:

1. `Array.from()`
2. Spread operator (`...`)
3. `Array.prototype.slice()` method

In each test case, we have one of these methods being compared to create a new array (or list) from the input data.

**Options comparison:**

Here's a brief overview of each option and their pros/cons:

* **`Array.from()`**: This method was introduced in ECMAScript 2015. It creates a new array by taking an iterable (such as a set, list, or string) and mapping over it to create the array.
	+ Pros: Concise syntax, efficient for large datasets.
	+ Cons: May have slower performance compared to other methods for small datasets.
* **Spread operator (`...`)**: This is a shorthand way of creating a new array by spreading an iterable into multiple elements.
	+ Pros: Very concise syntax, can be faster than `Array.from()` for small datasets.
	+ Cons: May not work as expected with certain iterables or use cases.
* **`Array.prototype.slice()` method**: This method creates a shallow copy of a portion of an array by specifying the start and end indices.
	+ Pros: Well-established and widely supported, can be faster than other methods for small datasets.
	+ Cons: Requires more code and may have slower performance compared to `Array.from()` or spread operator for large datasets.

**Library and syntax considerations:**

The benchmark uses the `Set` data structure, which is a collection of unique values. The `Set` object is created using the `new Set()` constructor.

There are no special JavaScript features or syntax used in this benchmark that would require additional explanation.

**Alternative approaches:**

If you're interested in exploring alternative methods for converting arrays to other data structures, here are some options:

* Using `Array.prototype.forEach()` and pushing elements onto a new array.
* Using `Array.prototype.reduce()` to create a new array from the input iterable.
* Using other libraries or frameworks that provide more advanced data structure manipulation capabilities.

However, it's worth noting that these alternative approaches may not be as efficient or concise as the methods being compared in this benchmark.

**Benchmark results:**

The latest benchmark results show that `Array.prototype.slice()` is the fastest method for creating a new array from an iterable, followed closely by the spread operator. The performance of `Array.from()` is slower than both of these options.

Related benchmarks:

Array.from vs Spread vs Slice with Node List (version: 0)

Comparing performance of: Array.from vs Spread vs Array.from on NodeList vs Spread on NodeList vs Slice

Created: 4 years ago by: Guest

Jump to the latest result

Array.from

Spread

Array.from on NodeList

Spread on NodeList

Slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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