Benchmark: Array.from vs Spread and map

Tests:

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

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: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Linux

View result in a separate tab

Test name	Executions per second
Array.from	125267.5 Ops/sec
Spread	204996.0 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 is being tested.

**What is being tested?**

The benchmark compares two approaches to iterate over a Set object: `Array.from()` and the spread operator (`...`) combined with `map()`. The test creates a Set object `fooSet` with 100 elements, adds each element individually, and then converts the set to an array using one of the two approaches.

**Options being compared**

The benchmark compares two options:

1. **Array.from():**
	* This method creates a new Array instance from the elements of the given iterable (in this case, the Set object `fooSet`).
	* The callback function `(e => 'index: ' + e)` is applied to each element in the set.
2. **Spread operator (`...`) + map():**
	* This method uses the spread operator to convert the Set object to an array, and then applies the `map()` function to transform each element.

**Pros and cons of each approach**

1. **Array.from():**
	* Pros:
		+ Can be more readable for complex transformations.
		+ Does not require the spread operator.
	* Cons:
		+ Creates a new Array instance, which can lead to increased memory usage.
		+ May have performance implications due to array creation.
2. **Spread operator (`...`) + map():**
	* Pros:
		+ More concise and expressive code.
		+ Does not create an intermediate array (only a temporary iterator).
	* Cons:
		+ Requires the spread operator, which can be less readable for some developers.
		+ May have performance implications due to the creation of a new array.

**Library used**

None is explicitly mentioned in the benchmark definition. However, the `Set` object and the `map()` function are built-in JavaScript features that do not require additional libraries.

**Special JS feature or syntax**

The spread operator (`...`) is a relatively recent addition to the JavaScript language, introduced in ECMAScript 2015 (ES6). It allows for the creation of arrays from iterables, such as sets or objects. The `map()` function is also a built-in JavaScript method that applies a transformation function to each element of an array.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **forEach()**: Instead of using the spread operator and `map()`, you could use the `forEach()` method to iterate over the set and apply the transformation:
```javascript
fooSet.forEach((value) => {
  console.log(`index: ${value}`);
});
```
2. **reduce()**: Another alternative is to use the `reduce()` method, which can be used to accumulate values in an array:
```javascript
var result = [];
fooSet.forEach((value) => {
  result.push(`index: ${value}`);
});
console.log(result);
```
Keep in mind that these alternatives may have different performance characteristics or code readability implications.

In summary, the benchmark compares two approaches to iterate over a Set object: `Array.from()` and the spread operator combined with `map()`. The choice of approach depends on personal preference, code readability, and potential performance implications.

Related benchmarks:

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

Comparing performance of: Array.from vs Spread

Created: 4 years 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):