Benchmark: array.from vs spread syntax

Tests:

array.from
var map = new Map(); map.set("hello", "world"); map.set("done", "do"); const array = Array.from(map.values());
spread syntax
var map = new Map(); map.set("hello", "world"); map.set("done", "do"); const array = [...map.values()]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.from
spread syntax

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

Browser/OS: Chrome 83 on Linux

View result in a separate tab

Test name	Executions per second
array.from	1733401.0 Ops/sec
spread syntax	2875558.0 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of two ways to create an array from the values of a Map object in JavaScript:

**1. `Array.from()` method:** This method takes an iterable (like a Map's `.values()`) and creates a new array with its elements.  The code for this test case is:

```javascript
var map = new Map();
map.set("hello", "world");
map.set("done", "do");
const array = Array.from(map.values()); 
```

**2. Spread syntax (`...`):**  This syntax expands the values of an iterable directly into a new array. The code for this test case is:

```javascript
var map = new Map();
map.set("hello", "world");
map.set("done", "do");
const array = [...map.values()];
```

**Pros and Cons:**

* **`Array.from()`**: 
    * **Pros:**  Well-established method, generally considered safe and reliable.
    * **Cons:**  Can be slightly slower than the spread syntax in some cases due to the extra overhead of a separate method call.
* **Spread Syntax (`...`)**:
    * **Pros:** More concise and often faster than `Array.from()`. 
    * **Cons:** Newer syntax (ES6+), may not be as widely supported in older browsers, can sometimes lead to less readable code depending on context.

**Other Considerations:**

* **Context Matters:** In most cases, the performance difference between these two approaches will be negligible unless you're dealing with extremely large Maps or running this operation millions of times per second.
* **Readability:** If you prioritize code readability, `Array.from()` might be slightly easier to understand for those unfamiliar with the spread syntax.

**Alternatives:**

There are other ways to iterate over a Map's values and potentially create an array:

* **`for...of` loop:** This provides more explicit control over the iteration process but might require more code.
    ```javascript
    const array = [];
    for (const value of map.values()) {
      array.push(value);
    }
    ```
* **`map()` method:** You can use `map()` on an iterable to transform each element, effectively creating a new array with modified values:

```javascript
   const array = Array.from(map.values()).map(value => value.toUpperCase()); 
   ```

Related benchmarks:

array.from vs spread syntax (version: 0)

Comparing performance of: array.from vs spread syntax

Created: 4 years ago by: Registered User

Jump to the latest result

array.from

spread syntax

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):