Check out a free preview of the full ES6: The Right Parts course:
The "Ranges" Lesson is part of the full, ES6: The Right Parts course featured in this preview video. Here's what you'd learn in this lesson:

Before wrapping up the course, Kyle briefly talks about ranges. Ranges are not in JavaScript but are a common structure in other programming languages. Now that JavaScript has iterators, Kyle demonstrates how a range can be added to the JavaScript Number prototype.

Get Unlimited Access Now

Transcript from the "Ranges" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kyle Simpson: So that constitutes the majority, the completion of the stuff I wanted to talk to you about today. Again, reminding you that this is not a complete guide through every part of ES6. You're gonna find some stuff that's really, really great like some of the stuff we've talked about today.

[00:00:21] You can find some really really terrible stuff like ES6 class and everywhere in between. And your journey will look different than my journey to learn ES6 but hopefully today is the jumping off point. This is the stuff I think you should spend the first focus on. This is the path I think you get into to learning ES6 is looking at this stuff and looking at how we can weave these different features together to achieve our goals.

[00:00:46] But I want to give you one last little piece of extra credit, just for fun. Kind of building off of what we just did. And then I promise, we're done for the day. I know it's been a long day. What I want to do is, I want to talk about a feature that is available in some other languages.

[00:01:06] And a trick of how we can sort of mimic it in JavaScript. I don't know how this feature really works that well because I don't know any other languages that well I don't really know JavaScript either. But I definitely don't know Ruby for example or Python but I know they have this notion of ranges in those languages.

[00:01:25] The ability to just have a number and then have give us some number. So I thought what to be interesting. If I could give myself an array of numbers by saying something like [...8] and that would automatically give me all the numbers in that array from zero up to eight.

[00:01:46] Kind of like the range in some of those other languages where they can just automatically do that. Wouldn't it be cool if I could just say [...8] and that would just work. So I got to thinking is this possible in JavaScript it turns out it's pretty straight forward.

[00:02:01] Because if you remember earlier somebody asked a question about doing something against one of the primitives and I said, whenever you do something against a primitive that needs to treated as an object. What happens is that automatically boxes it into its object counterpart. Numbers have a number object counterpart to them.

[00:02:21] The number object has a prototype. It doesn't by default ship with an iterator, but we could make one. So what if we did something like this? What if we said number.prototype [Symbol.iterator]
>> Kyle Simpson: As a generator, I'll it anonymous just to save space in the line. And we're not even to worry about being able to pass in arguments, so I'm just gonna make the plain old default value just to show you exactly the same kind of things we did before, what if I said

[00:03:05]
>> Kyle Simpson: Now where do I want to start? I want to start at zero. Maybe I don't want to start at zero, maybe you want to start somewhere else. I'm going to start at zero. I'm going to say I is less then and here's the trick, this keyword inside of that is going to refer to the number object itself when coerced to the value it's gonna be the value that that number is.

[00:03:27] So I can just say i less than this i++ yield i. Now I have native ranges built into JavaScript. So we take that we put it over here. And if I say [...8]. You get the array, I didn't do less than or equal to. I should've done less than or equal to.

[00:04:02]
>> Kyle Simpson: Now I have ranges. Now I actually my blog at the moment is not I had a blog post. And I will be back at some point soon but you could extend this. And maybe has some homework for you see if you could think about how would you extend this to be able to do negative ranges, what if I said negative three.

[00:04:19] Could you detect that it was a negative number and instead of doing plus plus you could do minus minus and go from zero down to negative one down to negative two down to negative three. Could you support being able to pass in customization of your range through arguments just like we did in exercise five?

[00:04:34] With just a fun little trick to look at the things that we now have available to us and push the language to support the kinds of things that we'd like to write.