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

Create a Range of Numbers as an Array in JavaScript

Generating a sequence of numbers—often referred to as a "range"—is a common task in programming. Whether you're populating dropdowns, iterating through page numbers, or generating test data, you’ll often need an array of numbers like [1, 2, 3, 4, 5]. While JavaScript doesn’t have a built-in range() function like Python, there are multiple elegant ways to create numeric ranges.

Let’s explore different methods to build number ranges in JavaScript, all explained step-by-step for beginners.

Method 1: Using a for Loop

The classic approach. A for loop gives you the most control and works in all JavaScript environments. You define your start and end values and push each number into an array.

const start = 1;
const end = 5;
const range = [];

for (let i = start; i <= end; i++) {
  range.push(i);
}

console.log(range);

[1, 2, 3, 4, 5]

Method 2: Using Array.from()

Array.from() is a powerful method to generate arrays from array-like or iterable objects. We can provide a mapping function to populate the values on the fly.

const length = 5;
const range = Array.from({ length }, (_, i) => i + 1);
console.log(range);

[1, 2, 3, 4, 5]

Method 3: Using Array.fill() and map()

This technique creates an array with the desired number of elements using fill(), and then populates it using map(). It’s especially useful when you need more customization later.

const range = new Array(5).fill(0).map((_, i) => i + 1);
console.log(range);

[1, 2, 3, 4, 5]

Method 4: Creating a Custom range() Function

If you need to generate ranges frequently, you can write your own reusable utility function. This makes your code cleaner and reusable across projects.

function range(start, end) {
  const result = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
}

console.log(range(10, 15));

[10, 11, 12, 13, 14, 15]

When Would You Need a Range Array?

Range arrays are helpful in many real-world scenarios:

• Rendering page numbers for pagination
• Creating dropdown options (like days 1 to 31)
• Generating indexes or mock data for testing
• Performing bulk operations on predictable sets of data

Final Thoughts

While JavaScript may not have a built-in range() function, its flexibility allows you to easily create one using loops, Array.from(), or fill().map(). Choose the method that fits your coding style and project needs.

Start with a loop if you're learning, and once you're comfortable, experiment with more concise solutions. Eventually, you might find yourself wrapping up your own range() function and reusing it across all your JavaScript apps.