Benchmark: lodash range vs Array.from object + new Array vs keys() + spread

HTML Preparation code:

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

Script Preparation code:

var size = 10000;

Tests:

lodash range
_.range(size);
array from
Array.from({length:size});
keys spread
[...Array(size).keys()]
array from (array)
Array.from(new Array(size), (_, i) => i);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash range
array from
keys spread
array from (array)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash range	74534.5 Ops/sec
array from	5508.3 Ops/sec
keys spread	5939.7 Ops/sec
array from (array)	5988.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark in question compares various techniques for creating an array of numbers ranging from 0 to a specified size (`size = 10000`). This involves four different approaches: using Lodash's `_.range`, the ES6 feature `Array.from`, and two variations involving the spread operator and the Array constructor. Below, we break down the options being compared, the libraries involved, their pros and cons, and the performance implications.

### Options Compared

1. **Lodash's `_.range(size)`**:
   - **Description**: This function from the Lodash library generates an array of integers from 0 up to (but not including) the specified size.
   - **Pros**: 
     - Simplifies range creation with a concise and easy-to-read syntax.
     - Highly optimized for performance in Lodash.
   - **Cons**:
     - Requires an external library (Lodash), which adds to the bundle size.
     - May not be necessary if the built-in options are sufficient.

2. **`Array.from({length: size})`**:
   - **Description**: This utilizes the `Array.from` method to create an array of a specified length, filled with `undefined` values.
   - **Pros**: 
     - Built-in method available in modern JavaScript.
     - No additional libraries are required.
   - **Cons**:
     - The resulting array is initialized with `undefined` values, meaning you may need to do additional processing to populate the array if you need specific values.

3. **`[...Array(size).keys()]`**:
   - **Description**: Creates an array using the spread operator and the `keys()` method on a newly created array. This method generates keys for each index, which are then spread into a new array.
   - **Pros**: 
     - Purely uses built-in JavaScript features, making it lightweight.
     - Considered a clean and modern approach.
   - **Cons**:
     - The use of the spread operator and `keys()` may have some overhead compared to simpler methods.
     - Can be less straightforward for developers unfamiliar with this approach.

4. **`Array.from(new Array(size), (_, i) => i)`**:
   - **Description**: This also uses `Array.from`, but here a mapping function is provided to fill the array with integers ranging from 0 to size - 1.
   - **Pros**: 
     - Similar advantages as the previous `Array.from` method, with the added benefit of populating the array values directly.
     - More explicit in its purpose to create an array of numbers.
   - **Cons**:
     - Slightly more verbose and can impact readability for simpler use cases.

### Performance Results

From the latest benchmark results:
- **Lodash's `_.range(size)`** showed the highest performance with 74,534.53 executions per second.
- **Array.from({length:size})** recorded 5,508.29 executions per second, while
- **Array.from(new Array(size), (_, i) => i)** and **`[...Array(size).keys()]`** reported similar performances around 5,939.71 and 5,988.78 executions per second respectively.

### Other Considerations and Alternatives

When choosing an approach for creating arrays in JavaScript, consider the following:

- **Library Dependency**: If minimizing bundle size or dependency management is crucial, prefer native solutions over Lodash.
- **Readability vs. Performance**: Depending on the team’s familiarity with ES6 features, choose an approach that balances clarity and performance based on your project's requirements.
- **Cross-Browser Compatibility**: While most environments today support ES6 features, ensure compatibility with the target audience, especially if legacy support is needed.

Alternatives may include using simple loops (for or while) to populate arrays, which may be considered for unique situations or constraints, although they typically won't match the performance of optimized methods.

Utilizing tools like MeasureThat.net provides valuable insights into these performance differences, offering data-driven choices for effective coding practices in JavaScript.

Related benchmarks:

lodash range vs Array.from object + new Array vs keys() + spread (version: 1)

Comparing performance of: lodash range vs array from vs keys spread vs array from (array)

Created: 25 days ago by: Guest

Jump to the latest result

lodash range

array from

keys spread

array from (array)

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