Skip to main content

How to Create an Array Containing a Range of Numbers in JavaScript

A common programming task is to generate an array containing a sequence of numbers, such as [1, 2, 3, 4, 5] or [0, 1, 2, 3]. This is useful for loops, data seeding, or creating placeholders. While JavaScript doesn't have a single built-in range() function like some other languages, it offers several powerful and concise methods to achieve this.

This guide will teach you the modern and most flexible method using Array.from(). We will also cover the traditional for loop and a clever shortcut using the spread syntax (...).

The Array.from() static method is the most powerful and flexible tool for this job. It can create a new array from an array-like object and provides a mapping function to generate the values.

We use a two-argument version of Array.from():

  1. First Argument: An "array-like" object with a length property. This tells Array.from how many elements to create (e.g., { length: 5 }).
  2. Second Argument: A mapping function that is called for each new element. This function receives two arguments: the element's value (which is undefined) and its index. We can use the index to generate our sequence.

For example, we need to create an array of numbers from 1 to 5. How to create that array?

Solution:

const length = 5;

// The mapping function uses the index to generate the numbers.
// Since the index is 0-based, we add 1 to start from 1.
const oneToFive = Array.from({ length: length }, (_, index) => index + 1);

console.log(oneToFive);  // Output: [1, 2, 3, 4, 5]

// To create an array from 0 to 4, you can just use the index directly.
const zeroToFour = Array.from({ length: length }, (_, index) => index);
console.log(zeroToFour); // Output: [0, 1, 2, 3, 4]
note

The underscore (_) is a common convention for an unused function parameter.

For reusability, you can wrap this in a function:

function createRange(length, startAt = 0) {
  return Array.from({ length: length }, (_, index) => index + startAt);
}
console.log(createRange(5, 1));   // Output: [1, 2, 3, 4, 5]
console.log(createRange(3, 10));  // Output: [10, 11, 12]

The Traditional Method: The for Loop​

The classic, imperative way to build an array is with a for loop. This method is straightforward, easy to understand, and perfectly valid.

const length = 5;
const startAt = 1;
const myArray = [];

for (let i = startAt; i < startAt + length; i++) {
  myArray.push(i);
}

console.log(myArray); // Output: [1, 2, 3, 4, 5]
note

While more verbose than Array.from(), the for loop is highly readable and can be a great choice, especially for developers who are less familiar with functional programming concepts.

A Concise Alternative: Spread Syntax with keys()​

A clever trick for generating a zero-based sequence is to combine the Array() constructor, the .keys() method, and the spread syntax (...).

The logic:

  1. Array(5): Creates an array with 5 empty slots.
  2. .keys(): Returns an iterator for the array's keys, which are its indexes (0, 1, 2, 3, 4).
  3. [... ]: The spread syntax unpacks the iterator into a new array.

Solution:

const length = 5;

// This is the fastest way to create a ZERO-BASED array.
const zeroToFour = [...Array(length).keys()];

console.log(zeroToFour); // Output: [0, 1, 2, 3, 4]

To create a one-based sequence with this method, you need an extra step, such as map() or slice(), which makes it slightly less direct than the Array.from() approach.

// Using map to adjust the values
const oneToFive = [...Array(length).keys()].map(index => index + 1);

console.log(oneToFive);  // Output: [1, 2, 3, 4, 5]

Conclusion​

JavaScript provides several excellent ways to generate an array of sequential numbers.

  • The Array.from({ length: N }, (v, i) => i + start) method is the most flexible and recommended best practice. It is highly readable and can generate any range with a simple change to the mapping function.
  • A traditional for loop is a perfectly valid and easy-to-understand alternative.
  • The [...Array(N).keys()] syntax is a very concise shortcut for creating zero-based ranges.

Table of Contents