Benchmark: Array from Set vs lodash setToArray

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>

Script Preparation code:

const arr = ['Jane', 'Bob', 'Kat', 'Kat', 'Bob', 'Jane', 'Ian', 'Jane', 'Bob', 'Kat', 'Kat', 'Bob', 'Jane', 'Ian'];
const set = new Set(arr);

function setToArray(set) {
    var index = -1,
        result = Array(set.size);

    set.forEach(function(value) {
      result[++index] = value;
    });
    return result;
  }

Tests:

Array from Set
Array.from(arr)
lodash setToArray
setToArray(arr)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array from Set
lodash setToArray

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Array from Set	46619900.0 Ops/sec
lodash setToArray	14180104.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares two methods for converting a `Set` to an array in JavaScript: the native `Array.from()` method and a custom implementation using Lodash's `setToArray` function.

### Comparison of Options

1. **Array.from(set)**
   - **Test Name**: "Array from Set"
   - **Description**: This is a built-in JavaScript method that creates a new `Array` instance from an iterable or array-like object (in this case, a `Set`). It leverages the underlying optimizations of the JavaScript engine.
   - **Performance**: In the benchmark results, this method executed at an impressive rate of approximately 46,619,900 executions per second.
   - **Pros**:
     - Native to JavaScript, so it eliminates the need for external libraries which can reduce bundle size.
     - Typically faster and more optimized since it is part of the core language.
   - **Cons**: 
     - Limited to environments that support ECMAScript 2015 (ES6) or later.

2. **lodash setToArray(set)**
   - **Test Name**: "lodash setToArray"
   - **Description**: This custom function uses Lodash, a popular utility library in JavaScript, to convert a `Set` to an array by iterating over the `Set` and populating a new array with its values.
   - **Performance**: This method registered about 14,180,104 executions per second in the benchmark.
   - **Pros**:
     - Experiments with custom implementations can be beneficial for understanding performance implications and tuning code for specific scenarios.
     - Lodash offers many more utility functions that can simplify common programming tasks.
   - **Cons**:
     - Adds a dependency on an external library, which can increase the bundle size and loading time.
     - Generally slower than the native method in this specific benchmark, suggesting it's less optimized for this task.

### Other Considerations

- **Lodash and its Purpose**: Lodash is a utility library that provides a range of functions for common programming tasks such as manipulating arrays, objects, and strings. Its functions are designed to be both performant and provide a wealth of helpful features that aren't inherently available in JavaScript.
- **Browser and Environment**: The benchmark was executed in Chrome 134 on a Windows desktop, which is notable because performance can vary significantly across browsers and JavaScript engines.

### Alternatives

In addition to the two methods tested, there are other approaches to converting a `Set` to an array in JavaScript:

1. **Spread Operator**: 
   - `const array = [...set];`
   - The spread operator (`...`) allows you to expand elements of an iterable (like a `Set`) directly into an array. It is generally comparable in performance to `Array.from()` but might have slight overhead due to ES6 syntax.

2. **For...of Loop**:
   - ```javascript
     const array = [];
     for (const item of set) {
         array.push(item);
     }
     ```
   - This method can be more verbose but gives control over the insertion process, which might be beneficial in specific contexts.

3. **Using `Array.prototype.map()` on an iterable transformation**:
   - First convert the `Set` to an array-like structure, and then use map, although this is less direct and not as efficient.

In summary, while both `Array.from()` and `lodash setToArray` serve a purpose in converting a `Set` to an array, the native method is typically more efficient and should be preferred unless there's a specific requirement that justifies the use of Lodash.

Related benchmarks:

Array from Set vs lodash setToArray (version: 1)

Comparing performance of: Array from Set vs lodash setToArray

Created: one year ago by: Guest

Jump to the latest result

Array from Set

lodash setToArray

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):