Benchmark: Array.from vs Spread using 10000 elements / only counts conversion

Script Preparation code:

var fooSet = new Set();
for(var i=0;i<10000;i++) {
  fooSet.add(i);
}

Tests:

Array.from
var other = Array.from(fooSet);
Spread
var other = [...fooSet];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	82899.8 Ops/sec
Spread	83235.7 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 benchmark and its results.

**Benchmark Definition**

The benchmark is designed to compare two approaches: `Array.from` and the spread operator (`...`). The test case creates a new Set (`fooSet`) with 10,000 elements using a JavaScript loop. Then, it measures the performance of creating an array from this set using both methods.

**What are we testing?**

We're not testing the actual conversion process or the usage of the `Array.from` method in general. Instead, we're focusing on two specific scenarios:

1. Creating an array from a Set using `Array.from`.
2. Creating an array from a Set using the spread operator (`...`).

**Options Compared**

The two options being compared are:

1. **`Array.from(fooSet)`**: This method creates a new array by iterating over the elements of the Set and adding them to the array.
2. **`[...fooSet]`**: This syntax is called the spread operator or rest operator. It creates a new array by spreading the elements of the Set into the array.

**Pros and Cons**

Here are some pros and cons of each approach:

1. `Array.from(fooSet)`.
	* Pros:
		+ More explicit and readable code.
		+ Can be used with any iterable (not just Sets).
	* Cons:
		+ May incur additional overhead due to the iteration process.
2. `[...fooSet]`.
	* Pros:
		+ More concise and expressive syntax.
		+ Fast and efficient, as it avoids iteration.
	* Cons:
		+ Less readable for developers without prior experience with the spread operator.

**Library and Purpose**

In this benchmark, no specific library is used. However, if you were to use a library like Lodash, you might use `lodash.each` or `lodash.toPairs` to create an array from a Set. These libraries provide additional functionality beyond the built-in `Array.from` method.

**Special JavaScript Feature or Syntax**

The spread operator (`...`) is a relatively recent feature introduced in ECMAScript 2015 (ES6). It allows you to expand the elements of an iterable into an array, which can make code more concise and expressive. However, it's not supported in older browsers like Internet Explorer.

**Other Alternatives**

If you're looking for alternatives to `Array.from` or the spread operator, here are a few options:

* For creating arrays from iterables: You can use `new Array()` with the `length` property set to the size of the iterable.
* For creating arrays from objects: You can use `Object.keys()`, `Object.values()`, or `Object.entries()` to extract the key-value pairs or values from an object, and then use `Array.from()` to create an array.

In summary, the benchmark is designed to compare two specific approaches to creating arrays from Sets. The spread operator offers a concise and expressive way to achieve this, but may incur additional overhead due to iteration.

Related benchmarks:

Array.from vs Spread using 10000 elements / only counts conversion (version: 0)

Comparing performance of: Array.from vs Spread

Created: one year ago by: Guest

Jump to the latest result

Array.from

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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