Fun with ES2015 Custom Iterators

In this video we cover the ES6/ES2015 Iterable Protocol AND the Iterator Protocol. It sounds scary, but it's not that bad once you learn the basics! We'll have fun messing with the default Array & String iterators and then we'll learn to create our own custom iterators.

[bikabas]

Thanks a lot Colt for the video. I believe the sequence is gradually building up to how async await work under the hood with help of generators. Would love to have you cover this topic. If it's in your cards, cant wait to see it.

[patrickren]

this is so cool, got the same feeling I realised I can do operator overloading in C++

[Luxcium]

Wow 😮 you always find the most interesting things about JavaScript I like that... I was watching stuff about Iterable protocol one hour ago and then thought the YouTube algo was amazing 😉 but it’s you who are amazing at finding interesting subjects 😄

[sonukr]

You are Awesome teacher Colt.
//From India

[yuhceeofficial]

Thanks Colt. Your number one fan here.

[yapayzeka]

one of the best explanations out there. thank you sir

[theprakashkumar]

How do you make and maintain notes for yourself.

[Mitsunee_]

It would probably be good to point out for the range() example that you need to put checks in place before returning the object including next(), to make sure the arguments are all numeric, convert them from string to number if required, and make sure that end is greater than start unless step is negative in which case end needs to be smaller than start. Without those checks infinite loops are easily possible or at best you get a technically incorrect result including at least one step, that shouldn't be there.

[sergiyparhomenko]

Hi Colt, could you explain why the spread operator works with object literals?. For example, I can create a copy of an object by using spread although it is not considered iterable:
const person = {
firstname: "John",
lastname: "Doe"
};
const clone = {...person};
console.log(clone);

[AbhinavKulshreshtha]

I have a feeling you are using firefox dev tools, How did you set it like that. It feels awesome. Is it firefox developer edition?

[RobertWildling]

Indeed that is fun, especially when it is presented in such an entertaining, well-done video! Thank you!
Instead of adding an additional result variable, I did this:
next() {
if(current <= end) {
current += step;
return {
done: false,
value: current - step // do not return the incremented "current"
} [...]
Would that be terribly wrong?

[sourishdutta]

Very informative!! Thanks, need more videos like this.Can you please upload video on Microfrontend and Functional programming in js.

[AssemblyWizard]

6:17 Python has almost exactly the same iterable & iterator protocol... (except StopIteration which is a bit better)

[evenaicantfigurethisout]

Can you please cover streams next? (No pun intended ;)

[jatin_nagar]

Colt can you please add webcam videos in future videos?! I love watching you teach. Anyway, thanks for these awesome videos.

[DiegoStiehl]

Woow. That's so clear now. Very good. =D

[willadams]

I'm predicting a generators video coming up soon....

[evenaicantfigurethisout]

Is "done" a JS reserved keyword? That's why it knows to stop iterating right? Also is "value" also a reserved keyword?

Edit: I think I get it now. It's not so much that done and value are reserved keywords. It's that the spread operator has been hardcoded to look for these keywords to tell it what to output and when to stop. That sounds about right?

[shubhamdogra]

Actually there is a issue I am facing in jQuery section.in web developer bootcamp course . I can't use the property .css. I am using latest j query .It keeps saying type error .css() is not defined ..need help!!!!

[danielsharp]

A thing I'd like to point out is that the current state should definetely not be a part of the range function but rather the [Symbol.iterator] otherwise.
const myRange range(0, 10, 5);
[...myRange] => [0, 5, 10]
[...myRange] => [] as the current is already 10