Benchmark: Map values to Array: Array.from vs Array Spread

Tests:

Array.from
const map = new Map([['a',{a:1}],['b',{b:2}],['c',{c:3}]]); const maps = Array.from(map.values());
Array Spread
const map = new Map([['a',{a:1}],['b',{b:2}],['c',{c:3}]]); const maps = [...map.values()];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Array Spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	3249432.0 Ops/sec
Array Spread	4806365.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches to converting a Map object's values into an array:

1. `Array.from(map.values())`
2. `...map.values()` (using array spread syntax)

**What is being tested?**

These two approaches are essentially equivalent, as they both convert the map's values into an array. The main difference lies in how they're written.

* `Array.from()`: This method creates a new array from an iterable or an array-like object. In this case, it takes the `values()` method of the Map object and converts its output into an array.
* Array spread syntax (`...map.values()`): This syntax uses the spread operator to convert an iterable (in this case, the map's values) into an array.

**Options compared**

The two options being compared are:

1. **Function-based approach**: Using `Array.from()` or a similar method to create an array from an iterable.
2. **Spread-based approach**: Using array spread syntax (`...`) to convert an iterable into an array.

**Pros and Cons of each approach**

* Function-based approach (e.g., `Array.from()`):
	+ Pros:
		- More explicit and readable code
		- Easier to maintain and debug
	+ Cons:
		- May require more memory allocations, as a new array is created
		- Can be slower due to the overhead of function calls
* Spread-based approach (`...`):
	+ Pros:
		- More concise and expressive code
		- Faster execution time, since it avoids creating an intermediate array
	+ Cons:
		- May be less readable for developers unfamiliar with spread syntax
		- Can lead to confusion if the underlying iterable is not suitable for spreading

**Library used**

None. The benchmark uses built-in JavaScript methods and features.

**Special JS feature or syntax**

The array spread syntax (`...`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows you to spread an iterable into multiple arguments, effectively converting it into an array.

In this benchmark, the spread-based approach uses this syntax to convert the map's values into an array.

Related benchmarks:

Map values to Array: Array.from vs Array Spread (version: 0)

Comparing performance of: Array.from vs Array Spread

Created: 2 years ago by: Guest

Jump to the latest result

Array.from

Array Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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