Benchmark: _.range() vs Array.from() vs [...Array().keys()]

HTML Preparation code:

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

Script Preparation code:

var N = 100;

Tests:

_.range
_.range(N);
Array.from()
Array.from({length: N}, (_, i) => i)
[...Array().keys()]
[...Array(N).keys()]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.range
Array.from()
[...Array().keys()]

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/119.0

Browser/OS: Firefox 119 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
_.range	1908177.0 Ops/sec
Array.from()	1904004.6 Ops/sec
[...Array().keys()]	1176655.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested in the benchmark.

**Benchmark Definition**

The benchmark is defined by three test cases:

1. `_.range()`: This uses Lodash's `_` function to create an array from 0 to N-1.
2. `Array.from({length: N}, (_, i) => i)`: This creates an array using the `Array.from()` method, with a length of N and each element being its index (i).
3. `[...Array(N).keys()]`: This uses the spread operator (`...`) to create an array from the keys of an array created by `Array(N)`.

**Options Compared**

Each test case is comparing the performance of one specific approach:

* `_.range()` vs `Array.from()`
* `_.range()` vs `[...Array().keys()]`
* `Array.from()` vs `[...Array().keys()]`

**Pros and Cons**

Here's a brief overview of each option:

1. `_.range()`:
	* Pros: Fast, efficient, and optimized for Lodash users.
	* Cons: Limited to Lodash users; may not be familiar to other developers.
2. `Array.from()`:
	* Pros: General-purpose method, widely supported by browsers and Node.js engines.
	* Cons: May have performance overhead due to the additional function call.
3. `[...Array().keys()]`:
	* Pros: Simple, concise, and easy to understand.
	* Cons: May be slower than `_.range()` or `Array.from()`, as it creates an intermediate array.

**Library**

In this benchmark, Lodash is used for its `_` function, which provides a way to create arrays. The `_` function is not built-in to JavaScript and relies on external libraries like Lodash.

**Special JS Features/Syntax**

None of the test cases use special JavaScript features or syntax that's not widely supported by modern browsers and Node.js engines.

**Other Alternatives**

If you want to explore alternative approaches, here are a few options:

1. Use `Array.prototype.slice()` instead of `Array.from()`.
2. Implement your own array creation loop using `for` loops.
3. Consider using WebAssembly (WASM) or other low-level optimizations for performance-critical code.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and performance requirements.

Related benchmarks:

_.range() vs Array.from() vs [...Array().keys()] (version: 0)

Comparing performance of: _.range vs Array.from() vs [...Array().keys()]

Created: 5 years ago by: Guest

Jump to the latest result

_.range

Array.from()

[...Array().keys()]

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):