Benchmark: Converting a small Set to an Array

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/* This "JavaScript preparation code" is executed just once in each run.
   Therefore, although `s` randomly generated, consistency is unaffected
   because the same object is used across all test cases below. */
const s = new Set();
for (let i = 0; i < 10; ++i) {
    s.add(Math.random());
}

Tests:

Spread operator (...)
const a = [...s];
Array.from()
const a = Array.from(s);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator (...)
Array.from()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 24 days ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Spread operator (...)	58700096.0 Ops/sec
Array.from()	56705608.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 25 days ago):

LLMs can make mistakes. Check important info.

The benchmark defined here evaluates two different methods for converting a `Set` to an `Array` in JavaScript. Both methods aim to produce a new array that contains all elements from a given `Set`, maintaining the insertion order of those elements. The benchmark is focused on the performance comparison between these two approaches.

### Options Compared

1. **Spread Operator (`[...]`)**
   - **Benchmark Definition:** `const a = [...s];`
   - **Description:** The spread operator is a syntax feature in JavaScript that allows iterables (like `Set`, `Array`, etc.) to be expanded in places where zero or more elements are expected, such as in array literals or function calls. In this case, it converts the `Set` `s` into an array by expanding its values.

2. **Array.from() Method**
   - **Benchmark Definition:** `const a = Array.from(s);`
   - **Description:** `Array.from()` is a built-in method provided by JavaScript to create a new `Array` instance from an array-like or iterable object. It can take an optional mapping function as a second argument but is being used here simply to convert the `Set` into an array.

### Pros and Cons of Each Approach

- **Spread Operator (`[...]`)**
  - **Pros:**
    - Concise and easy-to-read syntax.
    - Well-integrated into modern JavaScript, making it a popular choice among developers.
    - Works well in constructing new arrays during declaration.
  - **Cons:**
    - Slightly newer syntax; may not be supported in older environments (though this is less of a concern today).

- **Array.from() Method**
  - **Pros:**
    - More explicit in indicating that an array is being created from an iterable, which can enhance readability for some developers.
    - Also supports an optional mapping function, providing more flexibility if transformations are required during the conversion.
  - **Cons:**
    - Slightly more verbose than the spread operator.
    - Can be perceived as less intuitive if the intent is simply to convert to an array.

### Considerations

- **Performance:** In this benchmark, the results measure how many times each operation can be executed per second. In the latest results, both methods are shown to perform remarkably well, with the spread operator achieving about 20,961,132 executions per second and `Array.from()` at about 19,841,234 executions per second. While the spread operator has a slight edge in this particular environment and browser setup, performance can vary based on the JavaScript engine used (like V8 in Chrome or SpiderMonkey in Firefox).

- **Browser Compatibility:** Both methods are widely supported in modern browsers. The spread operator is a part of ES6 (ECMAScript 2015), while `Array.from()` also comes from ES6. Developers can generally expect these features to be available, but it's always good practice to check compatibility if dealing with legacy systems.

### Other Alternatives

Beyond these two methods, there are other approaches to convert a `Set` to an `Array`, although they may not be as efficient or straightforward:

1. **Loop with `push`:**
   ```javascript
   const a = [];
   for (const item of s) {
       a.push(item);
   }
   ```
   - This method explicitly iterates over the `Set` and adds items one by one. While clear, it's less efficient and more verbose than the other methods.

2. **Using `forEach`:**
   ```javascript
   const a = [];
   s.forEach(item => a.push(item));
   ```
   - Similar to the loop approach, this uses the `forEach` method to iterate over the `Set`. This method can be less performant when compared to the spread operator or `Array.from()` due to the overhead of function calls.

In conclusion, the benchmark provides valuable insights into the performance of these two popular methods for converting a `Set` to an `Array`, allowing developers to make informed decisions based on their specific needs and the contexts in which they operate.

Related benchmarks:

Converting a small Set to an Array (version: 1)

Return a new Array containing all elements in a Set in insertion order.

Comparing performance of: Spread operator (...) vs Array.from()

Created: 25 days ago by: Registered User

Jump to the latest result

Spread operator (...)

Array.from()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 25 days ago):