range()

range(start, end?, step?): number[]

Creates an array of numbers from start up to, but not including, end.

remarque

Automatically determines direction when step is omitted.

---

Parameters

start: number

The start of the range (or end if end is omitted, starting from 0).

end?: number

The end of the range (exclusive).

step?: number

The increment/decrement value. Defaults to 1 or -1 based on direction.

---

Returns: number[]

The range of numbers.

---

Throws

RangeError If step is zero.

---

Since

2.0.0

---

Performance

O(n) time & space where n is range size. Uses for loop with pre-allocated array. Separate loops for positive/negative steps.

---

Also known as

range (Lodash, es-toolkit, Remeda, Radashi, Ramda, Effect, Modern Dash, Antfu)

---

Example

range(5);        // => [0, 1, 2, 3, 4]
range(0, 10, 2); // => [0, 2, 4, 6, 8]
range(5, 0);     // => [5, 4, 3, 2, 1]
range(5, 0, -2); // => [5, 3, 1]

---

How it works?

Creates an array of numbers from start up to (but not including) end.

Signatures

Call	Result
range(5)	[0, 1, 2, 3, 4]
range(0, 10, 2)	[0, 2, 4, 6, 8]
range(5, 0)	[5, 4, 3, 2, 1]
range(5, 0, -2)	[5, 3, 1]

Direction Detection

Ascending vs Descending

---

Use Cases

Generate numeric sequences 📌

Create arrays of numbers for iteration or data generation. Comparable to Python's range() function.

#generate#sequences#numbers#iteration#range#Python

const indices = range(5); // [0, 1, 2, 3, 4]
const evens = range(0, 10, 2); // [0, 2, 4, 6, 8]

Create pagination controls

Generate page numbers for navigation components.

#create#pagination#controls#pages#navigation#UI

const totalPages = 10;
const pages = range(1, totalPages + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Render placeholder skeletons

Generate indices for list rendering in React.

#render#placeholders#skeletons#loading#React#UI

const skeletons = range(pageSize).map((i) => (
  <Skeleton key={i} />
));

Generate dropdown options for forms

Create numeric options for time pickers, year selectors, or quantity inputs. Very common in form-heavy applications with numeric selection fields.

#dropdown#select#options#form#hours#years#UI#input

// Hour picker: 0–23
const hours = range(0, 24);
// => [0, 1, 2, ..., 23]

// Year selector: 2020–2030
const years = range(2020, 2031);
// => [2020, 2021, ..., 2030]

// Quantity selector: 1–10
const quantities = range(1, 11);
// => [1, 2, 3, ..., 10]

// Render as <select> options
years.map((year) => <option key={year} value={year}>{year}</option>);