Benchmark: Array.from vs Spread with square and map

Tests:

Array.from
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = Array.from(fooSet, i => i * i);
Spread
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = [...fooSet].map(i => i * i);
Array.from with map
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = Array.from(fooSet).map(i => i * i);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread
Array.from with map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Android 15; Mobile; rv:147.0) Gecko/147.0 Firefox/147.0

Browser/OS: Firefox Mobile 147 on Android

View result in a separate tab

Test name	Executions per second
Array.from	205100.5 Ops/sec
Spread	155174.4 Ops/sec
Array.from with map	173233.1 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 explain what's being tested.

**Benchmark Overview**

The test measures the performance of three different approaches to convert a Set object to an array:

1. `Array.from(fooSet, i => i * i)`
2. `[...fooSet].map(i => i * i)`
3. `Array.from(fooSet).map(i => i * i)`

**Approach 1: `Array.from(fooSet, i => i * i)`**

This approach uses the spread operator (`...`) to convert the Set object to an array, and then applies a mapping function to each element.

Pros:

* Clear and concise syntax
* Easy to read and understand

Cons:

* May involve additional overhead due to the spread operation
* The mapping function may introduce additional complexity if not optimized correctly

**Approach 2: `[...fooSet].map(i => i * i)`**

This approach uses the spread operator (`...`) to convert the Set object to an array, and then applies a mapping function to each element.

Pros:

* Similar benefits as Approach 1 in terms of syntax clarity
* Can be more efficient than Approach 3 due to the use of `map` instead of `forEach`

Cons:

* May still involve additional overhead due to the spread operation

**Approach 3: `Array.from(fooSet).map(i => i * i)`**

This approach uses `Array.from()` to convert the Set object to an array, and then applies a mapping function to each element.

Pros:

* Can be more efficient than Approaches 1 and 2 due to the use of `forEach`
* Simplifies the code by using a single method call

Cons:

* May involve additional overhead due to the creation of a new array
* The mapping function may introduce additional complexity if not optimized correctly

**Library Used: Set**

The `Set` object is a built-in JavaScript data structure that stores unique values. In this benchmark, a Set object is created and populated with 100 elements, and then converted to an array using the three different approaches.

**Special JS Feature/Syntax: Spread Operator (`...`)**

The spread operator (`...`) is a relatively new feature in JavaScript that allows for spreading elements of an iterable (such as an array or Set) into a new array. This feature was introduced in ECMAScript 2015 (ES6).

In the context of this benchmark, the spread operator is used to convert the Set object to an array.

**Other Alternatives**

If you need to convert a Set object to an array, there are other alternatives that may be more efficient or convenient:

* Using `Array.from()` without a mapping function: `Array.from(fooSet)`
* Using `convertToArray()` from the `lodash` library: `_`.convertToArray(fooSet)`
* Using a custom implementation using `forEach()`: `fooSet.forEach((value, index) => { array[index] = value; })`

However, these alternatives may not be as concise or readable as the approaches tested in this benchmark.

Related benchmarks:

Array.from vs Spread with square and map (version: 0)

Comparing performance of: Array.from vs Spread vs Array.from with map

Created: 6 years ago by: Guest

Jump to the latest result

Array.from

Spread

Array.from with map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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