ES6 Iterator & Generator Fundamentals

This tutorial covers all the basics of how iterators and generators work. The connection with for...of loops is explained. How to use built-in iterators is demonstrated. How to build custom iterators for objects is explained and demonstrated.
Code GIST: gist.github.com/prof3ssorSt3v...
Iterables vs Enumerables video: • Iterable vs Enumerable...

[@ingressingress6841]

Hello Professor Steve : How to use for..of loop with the custom iterator when obj is passed into it?

[@SteveGriffith-Prof3ssorSt3v3]

Here you go - kzbin.info/www/bejne/hXScdWyIetOLhtk

[@ingressingress6841]

@@SteveGriffith-Prof3ssorSt3v3 Sir I have seen this video(the one you have suggested) multiple times to understand. However my question is: In the current video (the one with starwars) how do I use for...of loop when starwars object is paased something like this: for (let iterator of SW8[Symbol.iterator](starwars8)) { log (iterator) } this is currently throwing error. When SW8 is: let count = -1; let SW8 = { [Symbol.iterator]: function(obj){ return { next: ()=>{ count++; switch(count) { case 0: return { value: obj.title, done: false} case 1: return { value: obj.year, done: false } case 2: return { value: obj.director, done: false } case 3 : return { value: undefined, done: true} default: return { value: undefined, done: true} } } } } }

[@SteveGriffith-Prof3ssorSt3v3]

When you use a for..of loop you are looping with an iterator. The first line of the loop points at an object to loop through. That object MUST have an existing iterator. for( let resultFromIterator of objectThatHasAnIterator) { } You can't create the iterator after starting to loop. If you want to use for...of then you need to add an iterator to the object before the loop begins.

[@ingressingress6841]

@@SteveGriffith-Prof3ssorSt3v3 Thank you. I am still trying to understand, if there is a way to attach the object before the loop begins. This is just for curiosity. Your answers and replies are greatly appreciated. Thank you Sir.

[@SteveGriffith-Prof3ssorSt3v3]

@@ingressingress6841 You can add an iterator to any object, just like I did to the SW8 object in the video. As long as you add the iterator before the loop then you can use a for...of loop.

[@palashshanu]

This helped me, i was reading a book on JS and i had to take several breaks from the book to understand what it was saying but still couldnt grasp . But then i watched this video and BAMM , the book suddenly became relatable. Thanks Steve!!!

[@maninthecrowd5076]

The first video that doesn't make me want to rush back to the documentation immediately. No, some channels are good but they talk so slow and describe the obvious without going into what the stuff actually means and does, it's a breath of fresh air.

[@yinonelbaz5309]

Every time I get to the channel I learn something new

[@AnthonySherritt]

Really great, and fantastic voice

[@test_firstnametest_lastnam2290]

I've said before he's the Bob Ross of JavaScript

[@VV-kv5cc]

Thanks, Steve, it is definitely the clearest explanation on the Internet, I am going to use Iterators in my work after this video).

[@rotrose7531]

Your tutorials have become my daily routine, as always thank you very much.

[@ShreyasKumar]

Steve thanks for sharing your knowledge. It makes me feel much more confident after seeing your videos. Thanks again!

[@gauravnagar3712]

You is the only person who properly explained me iterators and generators

[@LokerDev]

Really great turtorial. Thanks a lot. I am search many time to try to understand what is generator and is here !!!

[@limitless9483]

thanks man you really have the skill to make complex stuff seem simple.

[@invinciblemuffi]

Simple yet powerful explanation and examples. Thanks a lot for sharing knowledge.

[@elsh11]

Great tutorial. Thank you so much!

[@barungh]

Thank you very much, I was struggling to grasp the concept of iterators and generators, and your video tutorial explained it very nicely.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. Please share the channel to help others.

[@barungh]

@@SteveGriffith-Prof3ssorSt3v3 Sure !

[@jamesclark1207]

Really great tutorial. Thanks a lot, I've subscribed.

[@momakplayz7985]

Man you helped me alot, even tho i had to watch this 18 minute video 3-5 times. Please make more JavaScript videos on the new tags coming up in javascript and much more! your AWESOME!

[@sanketraut8443]

really awesome! You made very easy to understand!

[@chesterxp508]

Another very cool tutorial!

[@alisonfromaccy]

Thanks Steve ...great Tut...please up the good work

[@GoryWory]

Super usefull tutorial, thanks A LOT !! :)

[@test_firstnametest_lastnam2290]

Great vid as usual Steve... Although I do have one very important technical tip: Use prequel names next time... I want me some Kit Fisto

[@Tussu17]

Really nice explanation! Thank you sir

[@satya4866]

I love your tutorials

[@stLmpp]

Great video, helped me a lot :)

[@derkvanderveen8938]

Very clear. Thanks.

[@yaolegoleynik]

Thank you!

[@xtremewolve]

Superb like always

[@sathishkumars3411]

subscribed immediately man ❤

[@abderrahmenlandolsi5350]

good job :D, very understandable

[@himbary]

great video ty

[@karma_yogi_42]

thanks that was awesome

[@dodokwak]

Thank you.

[@1polyron1]

You are the chosen one.

[@SteveGriffith-Prof3ssorSt3v3]

LOL

[@1polyron1]

Consider me like those daily positive affirmations posts. You are the light of tomorrow.

[@yinonelbaz5309]

This tutorial covers all the basics of how iterators and generators work. The connection with for...of loops is explained. How to use built-in iterators is demonstrated. How to build custom iterators for objects is explained and demonstrated.

[@ummuser]

Very informative and easy to understand, thank you

[@aram5642]

A huge tribute to Asterix

[@tseponkalai6528]

I am fairly new to programming. What does it mean to put Symbol.iterator in the square brackets like at [Symbol.iterator]: function(obj){...}

[@SteveGriffith-Prof3ssorSt3v3]

It's just the square bracket syntax that you would have with any object. Eg: let x = 'name'; let obj = { name: 'Tsepo', f: function() { console.log('called by obj.f( ) '); } } //now there are two ways to get to the props obj.name //or obj[x] Symbol.iterator is the property that we are overriding with our own custom function.

[@tseponkalai6528]

@@SteveGriffith-Prof3ssorSt3v3 oh, ok, I'm just used to obj.propert.

[@jp79cabral26]

​@@SteveGriffith-Prof3ssorSt3v3​ Thanks for this excellent explanation Steve! The thing that a little confused about is that you are using the square bracket syntax inside the object, I didn't know you could use it like that. So using it inside the actual object means that you are overwriting a default property of that object?

[@romikonlinepotapenko3475]

@@jp79cabral26 I know it's been a while, but I'd like to say that it is not just a simple property, it is a symbol. You can only add or access symbol properties by using brackets, dot notation won't work.

[@blessdarah1256]

Love your videos... but I have a question. Is it not possible to create a previous function for generators of arrays to complement the next function?

[@SteveGriffith-Prof3ssorSt3v3]

If you are building your own custom iterator you can add whatever functions you want but they wouldn't get used. Iterators step through an array or an object in one direction. That is their main purpose. A for...of loop is able to step through an Array or Object by calling a next( ) method. We don't specify what method to use. It just knows that all iterators have a next( ).

[@blessdarah1256]

Okay... thanks a lot. Will see how to create a previous function. I think it is a valuable asset.

[@MentorAliu]

you can use " for in" to iterate objects, i don't know if this video was released before that feature added to javascript

[@SteveGriffith-Prof3ssorSt3v3]

For...in iterates over enumerable properties. Iterable and enumerable are different.

[@ingressingress6841]

Sir, I have searched here and there and tried few things myself, like const stest = SW8[Symbol.iterator] and then looping over stest with for of by passing in starwars8 object, but nothing seem to work. Response is much appreciated.

[@SteveGriffith-Prof3ssorSt3v3]

When you use a for..of loop you are looping with an iterator. The first line of the loop points at an object to loop through. That object MUST have an existing iterator. for( let resultFromIterator of objectThatHasAnIterator) { } You can't create the iterator after starting to loop. If you want to use for...of then you need to add an iterator to the object before the loop begins.

[@SteveGriffith-Prof3ssorSt3v3]

I have updated the code gist to include a second version of the script that has the generic generator and shared iterator.

[@ba1anse]

You got it wrong. Generators are objects, as are iterators. Generator functions are special functions that creates generator objects upon calling. So the iter in your code "let iter = genny()" is really a generator.

[@adicide9070]

You know what, though, I thought you would make it so we can use for... of with that object-- wasn't that the point? to make that object iterable?

[@SteveGriffith-Prof3ssorSt3v3]

That's the next one - kzbin.info/www/bejne/hXScdWyIetOLhtk - this video was more about the iterator generator basics

[@adicide9070]

@@SteveGriffith-Prof3ssorSt3v3 checking that out--and a ton more from you--thanks a bunch! JS is a crazy beast with I dunno how many limbs :D

[@romikonlinepotapenko3475]

I added Symbol.iterator to the starwars8 object and made it its own method, like so: const starwars8 = { title: 'The Last Jedi', director: 'Rian Johnson', year: 2017, boxOffice: '1.3B', [Symbol.iterator]: function(){ let count = -1; return { next: ()=>{ count++; switch(count) { case 0: return {value: this.title, done: false} case 1: return {value: this.year, done: false} case 2: return {value: this.director, done: false} case 3 : return { value: this.boxOffice, done: false} default: return { value: undefined, done: true} } } } } }; for(let val of starwars8) log(val);

[@SteveGriffith-Prof3ssorSt3v3]

That works. The object just needs to have an iterator method which is named [Symbol.iterator].

[@nagendrapp2213]

if you don't mind could you please start building some complex projects plz

[@SteveGriffith-Prof3ssorSt3v3]

That will be what I do for the courses I create on Udemy

[@nagendrapp2213]

@@SteveGriffith-Prof3ssorSt3v3 could you plz share that link

[@SteveGriffith-Prof3ssorSt3v3]

@@nagendrapp2213 I haven't created the course yet.

[@nagendrapp2213]

@@SteveGriffith-Prof3ssorSt3v3 sorry for my bad english i'm not too good in english . are you in that process of creating?

[@SteveGriffith-Prof3ssorSt3v3]

@@nagendrapp2213 not yet. Maybe in the summer. 🙂

[@putinscat1208]

Generators are weird. They seem to be a way to encapsulate a counter on some group of things, that can be reused over and over. But there is no object or counter, just a function* that knows what to do with the group of things and uses yield.

[@SteveGriffith-Prof3ssorSt3v3]

pretty much. Arrays have built-in iterators so you can do things like .forEach( ) or .map( ). Objects don't have that ability. Custom iterators (or generators) give us that ability, without having to call .values( ) or .entries( ) to extract an Array first. It also gives us the ability to have granular control over which properties are iterable.

[@gosnooky]

Around 9:20, you know you can just use characters[i++];

[@SteveGriffith-Prof3ssorSt3v3]

Many JS style guides (Google and AirBNB) strongly recommend against using ++ at all due to problems it can cause. In Douglas Crockford's Javascript: The Good Parts, he writes: ++ and -- The ++ (increment) and -- (decrement) operators have been known to contribute to bad code by encouraging excessive trickiness. They are second only to faulty architecture in enabling to viruses and other security menaces. There is a plusplus option [in JSLint] that prohibits the use of these operators.

[@dansmith5783]

Sounds like Robert Downey Jr.

[@sawilliams]

What about Rose...😜

[@CottidaeSEA]

I have to admit that I do not really understand the value of these things. Even if we look at an iterator, you can iterate easier through other means.

[@SteveGriffith-Prof3ssorSt3v3]

Objects by default are not iteratable. Creating an iterator will let you control the order or properties as well as which properties can be iterated through. Additionally you can override iteration for objects that are already iterable. Definitely not something that a new web developer would often think or worry about though.

[@CottidaeSEA]

@@SteveGriffith-Prof3ssorSt3v3 Object.keys() gives you an iterable, so I just feel like that's a simpler option for iterating through an object. Being able to add an iterator to an object seems quite useful though, since you don't need to store an additional pointer for your iterator.

[@leannec6821]

Great tutorial. Thank you so much!