Benchmark: Array.from vs Spread for map values

Tests:

Array.from
var fooMap = new Map(); for(var i=0;i<500;i++) { fooMap.set(i, i); } var other = Array.from(fooMap.values());
Spread
var fooMap = new Map(); for(var i=0;i<500;i++) { fooMap.set(i, i); } var other = [...fooMap.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 year ago)

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

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	153871.5 Ops/sec
Spread	156006.9 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, compared, and their pros and cons.

**Benchmark Overview**

The benchmark measures the performance difference between two ways to extract values from a Map object in JavaScript: `Array.from` and the spread operator (`...`). The test case creates a large Map with 500 entries, sets each entry to its index value, and then extracts all values using both methods. The goal is to determine which method is faster.

**Options Compared**

Two options are compared:

1. **Array.from**: This method returns an array from the iterable arguments passed to it. In this case, `fooMap.values()` is used as the argument.
2. **Spread Operator (...)**: This operator creates a new array from the elements of an array or an iterable.

**Pros and Cons**

* **Array.from**:
	+ Pros: More explicit and readable way to create an array from an iterable. It's also more concise than using `for` loops.
	+ Cons: Can be slower due to the overhead of creating a new array and iterating over the Map values.
* **Spread Operator (...)**:
	+ Pros: More concise and efficient way to extract values from an iterable, as it avoids the need for a separate array creation step. It's also more modern and widely supported.
	+ Cons: Less readable and explicit than `Array.from`, especially for those not familiar with the spread operator.

**Libraries Used**

None are explicitly mentioned in this benchmark. However, JavaScript's built-in `Map` and `Array` objects are used.

**Special JS Features/Syntax**

The test case uses modern JavaScript features:

* **Spread Operator (...)**: Introduced in ECMAScript 2015 (ES6) to create arrays from iterables.
* **Template Literals**: Used for formatting the script preparation code and HTML preparation code (although not directly relevant to this benchmark).

**Other Alternatives**

If you were to implement this benchmark without using `Array.from` or the spread operator, you could use:

* Loops to iterate over the Map values and create an array by hand.
* Other methods like `for...of` loops or `forEach()` to achieve similar results.

Keep in mind that these alternatives would likely be less efficient than using `Array.from` or the spread operator.

**Benchmark Preparation Code**

The script preparation code is not provided, but it's expected to create a large Map with 500 entries and set each entry to its index value. The HTML preparation code is also not provided, as it's likely generated by the benchmarking tool itself.

Overall, this benchmark provides an opportunity to compare two common approaches for extracting values from a Map object in JavaScript, helping users understand which method is faster and more efficient.

Related benchmarks:

Array.from vs Spread for map values (version: 0)

Comparing performance of: Array.from vs Spread

Created: 5 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):