How to Generate a Range (Numbers/Letters) in JavaScript

This article will show you how to generate a range of numbers or letters in JavaScript, and provide some functions you can copy and paste into your own project.

The Python, PHP, and many other popular programming languages provide a range() function, for generating a range of numbers or letters between two values.

JavaScript does not have a built-in function for doing this, but it’s easy functionality to implement yourself.

Here’s how to do it, and some pre-made functions you can just paste into your own project to use immediately.

Copy & Paste JavaScript Functions

Generating a Range of Numbers

There are a lot of clever ways to generate ranges, often reducing the amount of code to a single line.

This article won’t cover those – they are difficult to read and difficult to understand for newcomers. I’ll stick to simple loops which clearly show what is happening in the code.

Below, you will see how a range of numbers can be generated. This function accepts three parameters – start, stop, and step. The range will start at start, end at stop and numbers in the range will be incremented by step.

function range(start, stop, step) {
    var result = [start];
    var next = start;
    while (next < stop) {
        result.push(next += step || 1);
    }
    return result;
}

How does this work? The result array is initialised to contain the first number in the range (start), and then each sequential value is appended to the result array using a while loop which increments each subsequent value by the step.

Generating a Range of Letters

Note that this function relies on the above function for generating a range of numbers!

This function will do the same, but for letters in the English alphabet. It will wrap around, so if the range exceeds 26 numbers, it will wrap around and repeat letters from the beginning of the alphabet until the required number of items in the range is reached.

function alphaRange(start, stop, step){
    //Assume starting at 0
    var alphabet = 'abcdefghijklmnopqrstuvwxyz';
    var numRange = range(start, stop, step);
    var result = numRange.map(el => {
        return alphabet[el % 26];
    });
    return result;
}

How does this work? First, a number range is generated. The array.map() method is then used to iterate over this array of numbers and find the corresponding value in the alphabet. The % (remainder) operator is used so that if the range includes numbers greater than 26 (the number of letters in the alphabet), the remainder will be used so that the function wraps around the alphabet.

Helper Libraries

You could also use a helper library like lodash in your project, which provides it’s own function for generating ranges.