JavaScript array range (Array.from, start/stop/step, loop)

There is no single built-in range() in JavaScript like in some other languages, but you can build javascript array range values in a few lines. This guide covers how to create an array with values within range javascript using Array.from, a reusable start/stop/step helper (exclusive stop, like Python’s range), a classic for loop, and Array.prototype.keys() tricks for js range array and array range js searches. The Array.from factory is the same building block highlighted in the JavaScript classes tutorial; copying generated rows without aliasing nested objects may call for clone object patterns.

Tested on: Node.js v20.18.2. A short note after each runnable snippet describes what you should see in the console.

Quick reference

Exclusive stop is the usual convention for range(start, stop, step) helpers; [...Array(n).keys()] is the shortest 0…n-1 pattern.

Array.from — JavaScript range 1…n

For “how to create an array with values within range javascript” when the range is a simple arithmetic sequence starting at 1, Array.from with a length object and a mapper is the clearest javascript array range pattern: one line, no manual indexing, and easy to read for anyone used to map on a normal js range array.

const numbers = Array.from({ length: 10 }, (_, i) => i + 1);
console.log(numbers);

You should see one line: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].

The second argument is a mapping function applied while the array is created (MDN: Array.from); it is not Array.prototype.map on a pre-filled array.

new Array + for — JavaScript range array (explicit)

If you need a javascript range array without Array.from (very old engines, strict lint rules, or teaching the mechanics), pre-allocate with new Array(length) and fill indexes in a for loop. It is more verbose than a one-liner js range array, but the intent—“create array of numbers in range javascript” by assignment—is obvious in code review.

const numbers = new Array(10);
for (let i = 0; i < numbers.length; i++) {
  numbers[i] = i + 1;
}
console.log(numbers);

You should see one line: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].

Reusable range(start, stop, step) — JS array range

When the same array range javascript logic appears in several places, extract a range(start, stop, step) helper. It answers “javascript create array of numbers in range” for any stride: the length comes from Math.ceil((stop - start) / step), matching the usual MDN-style sequence generator so your javascript range stays predictable for teammates and for FAQ-style questions about inclusive vs exclusive ends.

const range = (start, stop, step = 1) =>
  Array.from(
    { length: Math.max(0, Math.ceil((stop - start) / step)) },
    (_, i) => start + i * step
  );
console.log(range(2, 24, 1));

You should see one line: integers 2 through 23 (stop exclusive).

Here stop is exclusive: range(2, 24, 1) yields 2 through 23. Same pattern as MDN’s “sequence generator” example.

Exclusive stop and step > 1

These examples stress two things people look up under js array range and javascript range: stop is exclusive (the last value is stop - step for a positive step), and step greater than 1 skips entries—handy for odd numbers, grid coordinates, or sampling. If you need an inclusive upper bound, adjust stop (for example L + step) so the javascript array range still ends exactly at L.

const range = (start, stop, step = 1) =>
  Array.from(
    { length: Math.max(0, Math.ceil((stop - start) / step)) },
    (_, i) => start + i * step
  );
console.log(range(0, 5, 1));
console.log(range(1, 10, 2));

You should see two lines: [ 0, 1, 2, 3, 4 ], then [ 1, 3, 5, 7, 9 ].

keys() shorthand — range in JavaScript from 0

For 0…n-1, [...Array(n).keys()] is a compact range in javascript idiom: iterator keys() over sparse slots, then spread into a real array range js. When you need 1…n instead, offset with map using the index argument ((_, i) => i + 1)—see JavaScript map with index—or stick with Array.from above; both beat hand-rolled loops for short javascript range snippets in demos and tests.

console.log([...Array(5).keys()]);
console.log([...Array(5)].map((_, i) => i + 1));

You should see two lines: [ 0, 1, 2, 3, 4 ], then [ 1, 2, 3, 4, 5 ].

[...Array(n)] materializes n slots so map runs for each index (MDN: Array() constructor).

Summary

Array.from is the workhorse for 1…n and custom range(start, stop, step); keys() is shortest for 0…n-1.

• Array.from({ length }, mapFn) — best default for a javascript range array of mapped values (e.g. 1…n).
• new Array + for — explicit js range array fill when you want zero abstraction or maximum compatibility.
• range(start, stop, step) — reusable javascript array range with exclusive stop; use Math.ceil on the length for fractional steps in other variants.
• [...Array(n).keys()] — minimal range in javascript for 0…n-1; combine with map for offsets.
• Prefer Array.from over [...Array(n)].map(...) when you only need a generated javascript range (fewer intermediate arrays).

References

Deep dives on Array.from, sparse Array(length) behavior, and keys()—the primitives behind most javascript create array of numbers in range snippets in modern codebases.

• MDN: Array.from()
• MDN: Array() constructor
• MDN: Array.prototype.keys()