# How to create a range of numbers with vanilla JS

Yesterday, we looked at two practical uses for the `Array.fill()` method. In it, I shared how you can use `Array.fill()` with the `Array.map()` method to create an array of sequential numbers.

Reader Darren Jones, author of the upcoming book Learn to Code with JavaScript, wrote back to share another approach that I like even better, and I wanted to share that with you today.

Let’s take a look!

## The `Array.keys()` method

Darren’s trick relies on the `Array.prototype.keys()` method, which returns an iterator object that contains the key, or index, for each item in an array.

You can create a `new Array()`, use the `Array.keys()` method, and then create a new array from returned iterator to get an array of sequential numbers.

``````// Darren favors using the spread operator
// returns [0, 1, 2, 3, 4, 5, 6]
[...new Array(7).keys()];

// I prefer to use Array.from(), which I find more explicit
// also returns [0, 1, 2, 3, 4, 5, 6]
Array.from(new Array(7).keys());
``````

As you can see, this is a lot more concise than my `Array.fill()` solution yesterday.

## Creating a `range()` helper function

The above approach is great if you want your array to start at `0` but what if you want a range that starts with a different number?

Darren shared this super useful helper function. I want to recreate it in my style and explain what each part does.

``````function Range(a,b){
// if only one argument supplied then return random number between 1 and argument
if (b === undefined) {
b = a;
a = 1;
}
return [...Array(b-a+1).keys()].map(x => x+a);
}

// returns [0, 1, 2, 3, 4, 5, 6]
Range(7);

// returns [4, 5, 6, 7, 8, 9, 10, 11, 12]
Range(4, 11);
``````

## Deconstructing and recreating the `range()` helper function

The first thing I’m going to do is use lowercase naming for my helper function. I generally reserve uppercase function names for constructor patterns. Also, `Range` is already a web API, so it’s a good idea not to use the same name.

I’m also going to rename `a` and `b` to `min` and `max` so that I can keep them sorted in my head more easily (this is 100% a personal preference thing).

``````var range = function (min, max) {
// Code goes here...
};
``````

Next, we use the `Array.from(new Array().keys())` trick we talked about earlier to create a range of numbers.

Following Darren’s original code, we subtract the `min` from the `max`, then add `1`, to get the length of the array.

``````var range = function (min, max) {

// Create a ranged array
return Array.from(new Array(max - min + 1).keys());

};
``````

At this point, we have a helper function that will always return an array that starts with `0`, and will be the length of the difference between the `min` and `max`.

Darren used the `map()` function to add the `min` to each number, shifting the starting and ending numbers. We’ll do the same thing, but using a traditional function instead of an arrow function, because I find arrow functions harder to read (again, a personal preference thing).

``````var range = function (min, max) {

// Create a ranged array
return Array.from(new Array(max - min + 1).keys()).map(function (num) {
return num + min;
});

};
``````

Darren’s last trick, and it’s super clever, to allow users to provide just one number if they want a range of numbers that starts at `1`.

We can copy his code as-is for this. In it, if no `max` is provided, Darren reassigns the `min` argument to `max`, and sets `min` to `1`.

``````var range = function (min, max) {

// If only one number is provided, start at one
if (max === undefined) {
max = min;
min = 1;
}

// Create a ranged array
return Array.from(new Array(max - min + 1).keys()).map(function (num) {
return num + min;
});

};
``````

## Wrapping up

I put a copy of this helper method on the Vanilla JS Toolkit. You can play a demo on CodePen.

The `range()` helper method will work in all modern browsers, but the `Array.from()` and `Array.keys()` methods don’t work in IE and would require polyfills.