Benchmark: Array.from vs Spread (Map)

Tests:

Array.from
var fooMap = new Map(); for(var i=0;i<100;i++) { fooMap.set(i, 'hello' + i); } var other = Array.from(fooMap);
Spread
var fooMap = new Map(); for(var i=0;i<100;i++) { fooMap.set(i, 'hello' + i); } var other = [...fooMap];

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: 15 days ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	180789.7 Ops/sec
Spread	150246.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 the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark compares two approaches to convert a Map object to an array: `Array.from()` and the spread operator (`...`). The goal is to determine which approach performs better in terms of execution speed.

**Test Cases**

There are two individual test cases:

1. **`Array.from()`**: This test case creates a new Map object, sets 100 entries with increasing keys (0 to 99), and then converts the Map to an array using `Array.from()`.
2. **`Spread`**: Similar to the first test case, but instead of using `Array.from()`, it uses the spread operator (`...`) to create a new array from the Map object.

**Library Used**

In both test cases, the `Map` class is used. A Map in JavaScript is a collection of key-value pairs that can be stored and retrieved efficiently.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntaxes being tested here. Both approaches rely on standard JavaScript methods (`Array.from()` and spread operator).

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

1. **`Array.from()`**:
	* Pros: Explicit, readable, and widely supported.
	* Cons: May incur additional overhead due to the creation of an intermediate array.
2. **Spread Operator (`...`)**:
	* Pros: Concise, expressive, and efficient (creates a new array directly).
	* Cons: Less explicit than `Array.from()`, may not be as readable.

**Benchmark Results**

The latest benchmark results show that the spread operator approach (`"Spread"` test case) outperforms the `Array.from()` method. However, it's essential to note that these results are specific to this particular scenario and might not reflect real-world performance differences in all situations.

**Other Alternatives**

If you were to explore other approaches for converting a Map object to an array, you could consider:

1. Using `for...of` loop: Iterate over the Map entries using a `for...of` loop and push each value into a new array.
2. Using `Array.prototype.concat()`: Create an empty array, iterate over the Map entries, and use `concat()` to add each value to the array.

Keep in mind that these alternatives might have different performance characteristics compared to the spread operator approach.

In summary, the benchmark compares two approaches for converting a Map object to an array: `Array.from()` and the spread operator. The spread operator approach is shown to be more efficient in this specific scenario, but it's essential to consider the trade-offs between readability, expressiveness, and performance when choosing an approach depending on your use case.

Related benchmarks:

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

Comparing performance of: Array.from vs Spread

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