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];

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

Array.from

246K/s

Spread

243K/s

View exact numbers

✓ Array.from: 246,487 ops/sec
• Spread: 242,952 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 month ago)

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

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Array.from

373K/s

Spread

357K/s

View exact numbers

Test name	Executions per second
✓ Array.from	372,590 Ops/sec
Spread	357,060 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.

Array.from vs Spread (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 13 community runs

Desktop Results:

Chrome 13 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 (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 13 community runs

Desktop Results:

Chrome 13 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`