Benchmark: creating array from array like objects

HTML Preparation code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>

Script Preparation code:

list = document.querySelectorAll('p');

Tests:

Array#from
Array.from(list);
Spread Operator
[...list]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array#from
Spread Operator

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark definition is represented by the JSON object that describes the task to be measured. In this case, it's "creating array from array like objects".

The script preparation code `list = document.querySelectorAll('p');` creates an HTML list of 10 paragraph elements (`<p>`) and assigns them to a variable named `list`.

**Options Compared**

Two options are compared:

1. **Array.from()**: This method takes an iterable (like the `document.querySelectorAll()` array) and returns a new array with the same elements.
2. **Spread Operator ([...])**: This operator can be used to create a new array by spreading an existing array or an iterable.

**Pros and Cons**

**Array.from():**

Pros:

* Can handle non-array iterables (like `document.querySelectorAll()`)
* Can be more readable for complex iterables
* Works well with ES6+ syntax

Cons:

* May have overhead due to the method call
* Less performant than native array operations in some cases

**Spread Operator:**

Pros:

* Fast and efficient for simple iterables
* Can be more concise
* Works well with older browsers (before ES6)

Cons:

* May not work correctly with non-array iterables
* Less readable for complex iterables
* Only works in modern browsers (ES6+)

**Library**

The `document.querySelectorAll()` function is a part of the DOM (Document Object Model) API, which is a library of APIs that allow you to interact with and manipulate HTML documents.

**Special JS Feature/Syntax**

None mentioned explicitly, but note that the spread operator was introduced in ES6, so browsers using older versions of ES may not support it.

Related benchmarks:

creating array from array like objects (version: 0)

Comparing performance of: Array#from vs Spread Operator

Created: 9 years ago by: Guest

Jump to the latest result

Array#from

Spread Operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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