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()]

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Array.from

3K/s

spread

3K/s

View exact numbers

✓ Array.from: 3,092 ops/sec
• spread: 3,090 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 8.1

View result in a separate tab

spread

885/s

Array.from

867/s

View exact numbers

Test name	Executions per second
✓ spread	885 Ops/sec
Array.from	867 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

Comparing performance of: `Array.from vs spread`

Created: 2 years ago by: Guest

Go to the latest result

Array.from

spread

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: Array.from vs spread

Created: 2 years ago by: Guest

Go to the latest result

Array.from

spread

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.from vs spread`