# JS Tip of the Day: Generating Ranges

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-generating-ranges/643148>\
**Category:** web dev\
**Created:** [March 19, 2020, 5:30pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-generating-ranges/643148 "2020-03-19T17:30:58Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 19, 2020, 5:30pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-generating-ranges/643148/1 "2020-03-19T17:30:58Z")

</div>

**Generating Ranges**  
Version: ES2015 (generators)  
Level: Intermediate

Have you ever needed to run through a sequence of numbers, or to create a range of values between two numbers? If so, you may have used a `for` loop. They’re often well suited for this purpose.

```javascript
for (let i = 0; i < 5; i++) {
    console.log(i); // 0 1 2 3 4
}

```

We can take this idea further and create a function specifically for creating a number sequence like this. If you’re familiar with Python, you may already be familiar with the built-in `range()` function it has which does this. We can recreate that same function for JavaScript with the help of generators.

The `range()` function takes anywhere from 1 to 3 arguments. It works much like a `for` loop having a starting value, counting up to but not including an ending value, and finally using an increment value to determine how to go between them. For the values not provided, defaults are supplied. Also, if only one argument is passed, it is considered the ending value with the starting value being 0. A simple generator function to accomplish this (not accounting for and argument validation and other fancy error handling etc.) would look something like:

```javascript
function * range (startOrEnd, end = undefined, step = 1) {
    let start = startOrEnd;
    if (end === undefined) {
        end = startOrEnd;
        start = 0;
    }
    for (let i = start; i < end; i += step) {
        yield i;
    }
}

```

To use this in place of the `for` loop used earlier, a `for...of` is used instead, iterating through the values of the generator object created when `range()` is called.

```javascript
for (let num of range(5)) {
    console.log(num); // 0 1 2 3 4
}

```

While you’re not exactly saving a lot in terms of code size here, this does become easier to read and your intentions of creating a range is more clear. More importantly, because `range()` uses a generator, it can be used anywhere iterables are accepted! For example, you can easily add a range of values into a new array or spread them into a function call.

```javascript
let evens = [...range(2, 11, 2)];
console.log(evens); // [2, 4, 6, 8, 10]

let obviously = Math.min(...range(1, 1000));
console.log(obviously); // 1

```

More info:

- [function\* on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)
- [Spread on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [Number.range (stage 0) proposal](https://github.com/Jack-Works/proposal-Number.range)