Benchmark: array.from vs spread on Map

Tests:

Array.from
const map = new Map() for(let i = 0; i < 10000; i++){ map.set(i,i) } const arr = Array.from(map.values())
spread
const map = new Map() for(let i = 0; i < 10000; i++){ map.set(i,i) } const arr = [...map.values()]

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 month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	1907.3 Ops/sec
spread	1960.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the Benchmark Definition and test cases.

**Benchmark Purpose**

The benchmark measures the performance of two ways to convert a Map object's values to an array:

1. `Array.from(map.values())`
2. Using the spread operator (`[...map.values()]`)

These approaches are being compared because they have different performance characteristics. The spread operator is more modern and concise, but it may be slower due to its syntax sugar.

**Options Compared**

The two options are being compared in terms of their execution time. The goal is to determine which approach is faster and more efficient for large datasets like the one used in this benchmark (10,000 iterations).

**Pros and Cons of Each Approach**

1. **`Array.from(map.values())`**
	* Pros:
		+ More concise and readable code.
		+ Can be used with older browsers that don't support the spread operator.
	* Cons:
		+ May be slower due to its syntax sugar, which can lead to additional overhead during execution.
2. **Using the spread operator (`[...map.values()]`)**
	* Pros:
		+ More modern and concise code.
		+ Can be faster for large datasets because it avoids creating an intermediate array with `Array.from()`.
	* Cons:
		+ Requires support for the spread operator, which may not be available in older browsers.

**Library Used**

In this benchmark, no libraries are explicitly mentioned. However, it's worth noting that the `Map` object is a built-in JavaScript API, so no external library is required to use it.

**Special JS Features or Syntax**

The benchmark uses two modern features:

1. **Spread operator (`[...]`)**: A syntax sugar introduced in ECMAScript 2015 (ES6) for creating arrays from iterables.
2. **Arrow functions (`=>`)**: Used in the `for...of` loop to define a concise and readable loop body.

**Benchmark Preparation Code**

The benchmark preparation code is provided as a string, which is executed before running each test case:

```javascript
const map = new Map()
for (let i = 0; i < 10000; i++) {
  map.set(i, i)
}
```

This code creates a `Map` object with 10,000 key-value pairs and sets the value of each key to its corresponding index.

**Other Alternatives**

If you wanted to compare other approaches for converting a Map object's values to an array, some alternatives could be:

1. Using `forEach()` method: `map.forEach((value) => { arr.push(value); })`
2. Using `reduce()` method: `arr = map.values().reduce((acc, value) => acc.concat([value]), [])`
3. Using a traditional loop with `for` and `push()`: `const arr = []; for (let i = 0; i < 10000; i++) { arr.push(map.get(i)); }`

Keep in mind that these alternatives may have different performance characteristics compared to the spread operator or `Array.from()`.

In conclusion, this benchmark aims to determine which approach is faster and more efficient for converting a Map object's values to an array. The spread operator and `Array.from()` are two modern approaches with different pros and cons, while traditional loops and older browsers may require alternative solutions.

Related benchmarks:

array.from vs spread on Map (version: 0)

Comparing performance of: Array.from vs spread

Created: 10 months ago by: Guest

Jump to the latest result

Array.from

spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):