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

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}, (_, i) => i);
keys spread
[...Array(size).keys()]
array fill
Array(size).fill(0).map((_v, 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 fill

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 3 days ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and analyze what's being tested.

**Benchmark Overview**

The benchmark compares the performance of four different ways to generate an array of numbers:

1. Lodash `_.range(size)`
2. `Array.from({length: size}, (_, i) => i)`
3. `[...Array(size).keys()]`
4. `Array(size).fill(0).map((_v, i) => i)`

**Library Used**

The benchmark uses the Lodash library, which is a popular utility library for JavaScript that provides a wide range of functions for tasks such as array manipulation, string manipulation, and more.

In this case, the benchmark specifically uses the `_.range(size)` function from Lodash to generate an array of numbers.

**Special JS Features or Syntax**

None are used in this benchmark.

**Approach Comparison**

The four approaches being compared can be summarized as follows:

* **Lodash `_.range(size)`**: This approach creates an array using Lodash's `_.range` function, which generates a sequence of numbers from 0 to the specified size.
* **`Array.from({length: size}, (_, i) => i)`**: This approach uses the `Array.from` method to create an array from an array-like object with a length property. The callback function `(i) => i` is applied to each index `i` of the new array, effectively generating numbers from 0 to the specified size.
* **`[...Array(size).keys()]`**: This approach uses the spread operator (`[...]`) to create an array from the keys of an array with a length property. The resulting array contains numbers from 0 to the specified size.
* **`Array(size).fill(0).map((_v, i) => i)`**: This approach creates an array of zeros with the specified size using `Array(size).fill(0)`, and then uses the `map` method to transform each zero into its index.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Lodash `_.range(size)`**: Pros: concise, efficient. Cons: requires Lodash library, may not be as straightforward for some developers.
* **`Array.from({length: size}, (_, i) => i)`**: Pros: flexible, can be used in various contexts. Cons: creates an intermediate object, can be slower due to overhead of `Array.from`.
* **`[...Array(size).keys()]`**: Pros: concise, efficient. Cons: requires spread operator, may not be as familiar to all developers.
* **`Array(size).fill(0).map((_v, i) => i)`**: Pros: explicit, can be easier to understand for some developers. Cons: creates multiple intermediate objects, can be slower due to overhead of `fill` and `map`.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* Performance: If performance is critical, `_.range(size)` or `[...Array(size).keys()]` may be more efficient.
* Readability: For some developers, `_.range(size)` may be easier to understand due to its concise syntax. Others may prefer the explicitness of `Array(size).fill(0).map((_v, i) => i)`.
* Library dependencies: If you're working in an environment where Lodash is not available, `[...Array(size).keys()]` or `Array(size).fill(0).map((_v, i) => i)` may be better options.

**Alternatives**

Other alternatives for generating arrays of numbers include:

* Using a traditional `for` loop: `for (var i = 0; i < size; i++) { ... }`
* Using the `Array.from` method with an array literal: `Array(size).fill(0)`
* Using the `generateArray` function from the `mathjs` library: `mathjs.generateArray(size, Math.floor)`

Latest run results:

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

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

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash range	53256.1 Ops/sec
array from	3675.2 Ops/sec
keys spread	6161.0 Ops/sec
array fill	39247.9 Ops/sec

Related benchmarks:

lodash range vs Array.from vs keys() + spread + fill (version: 0)

Comparing performance of: lodash range vs array from vs keys spread vs array fill

Created: 2 years ago by: Guest

Jump to the latest result

lodash range

array from

keys spread

array fill

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 3 days ago):