ES6 Iterator & Generator Fundamentals

Поділитися
Вставка
  • Опубліковано 18 гру 2024

КОМЕНТАРІ • 87

  • @ingressingress6841
    @ingressingress6841 3 роки тому +2

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

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому +3

      Here you go - ua-cam.com/video/OC9D9REnXPw/v-deo.html

    • @ingressingress6841
      @ingressingress6841 3 роки тому

      @@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
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому +2

      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
      @ingressingress6841 3 роки тому

      @@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
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому

      @@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
    @palashshanu 4 роки тому +4

    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
    @maninthecrowd5076 4 роки тому

    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
    @yinonelbaz5309 3 роки тому

    Every time I get to the channel I learn something new

  • @gauravnagar3712
    @gauravnagar3712 5 років тому

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

  • @VV-kv5cc
    @VV-kv5cc 3 роки тому +2

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

  • @AnthonySherritt
    @AnthonySherritt 5 років тому +25

    Really great, and fantastic voice

  • @ShreyasKumar
    @ShreyasKumar 3 роки тому +1

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

  • @rotrose7531
    @rotrose7531 4 роки тому +2

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

  • @LokerDev
    @LokerDev 5 років тому +2

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

  • @invinciblemuffi
    @invinciblemuffi 3 роки тому +1

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

  • @momakplayz7985
    @momakplayz7985 3 роки тому +1

    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!

  • @limitless9483
    @limitless9483 4 роки тому +1

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

  • @yinonelbaz5309
    @yinonelbaz5309 3 роки тому

    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.

  • @jamesclark1207
    @jamesclark1207 6 років тому +8

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

  • @barungh
    @barungh 6 років тому

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

  • @test_firstnametest_lastnam2290
    @test_firstnametest_lastnam2290 5 років тому +1

    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

  • @tseponkalai6528
    @tseponkalai6528 6 років тому +1

    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
      @SteveGriffith-Prof3ssorSt3v3  6 років тому +2

      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
      @tseponkalai6528 6 років тому

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

    • @jp79cabral26
      @jp79cabral26 6 років тому

      ​@@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
      @romikonlinepotapenko3475 4 роки тому

      @@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.

  • @alisonfromaccy
    @alisonfromaccy 4 роки тому

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

  • @Tussu17
    @Tussu17 2 роки тому

    Really nice explanation! Thank you sir

  • @MentorAliu
    @MentorAliu Рік тому

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

  • @sanketraut8443
    @sanketraut8443 4 роки тому

    really awesome! You made very easy to understand!

  • @GoryWory
    @GoryWory 5 років тому +3

    Super usefull tutorial, thanks A LOT !! :)

  • @chesterxp508
    @chesterxp508 3 роки тому

    Another very cool tutorial!

  • @ingressingress6841
    @ingressingress6841 3 роки тому

    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
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому

      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
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому

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

  • @blessdarah1256
    @blessdarah1256 5 років тому

    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
      @SteveGriffith-Prof3ssorSt3v3  5 років тому

      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
      @blessdarah1256 5 років тому

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

  • @sathishkumars3411
    @sathishkumars3411 2 роки тому

    subscribed immediately man ❤

  • @adicide9070
    @adicide9070 4 роки тому

    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
      @SteveGriffith-Prof3ssorSt3v3  4 роки тому

      That's the next one - ua-cam.com/video/OC9D9REnXPw/v-deo.html - this video was more about the iterator generator basics

    • @adicide9070
      @adicide9070 4 роки тому +1

      @@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

  • @leannec6821
    @leannec6821 5 років тому

    Great tutorial. Thank you so much!

  • @satya4866
    @satya4866 3 роки тому

    I love your tutorials

  • @xtremewolve
    @xtremewolve 3 роки тому

    Superb like always

  • @MohammedAli-p7e9d
    @MohammedAli-p7e9d 3 місяці тому

    There are alot of topics to cover in js 😞
    Thanks Sir!

  • @1polyron1
    @1polyron1 5 років тому +1

    You are the chosen one.

  • @derkvanderveen8938
    @derkvanderveen8938 3 роки тому

    Very clear. Thanks.

  • @aram5642
    @aram5642 Рік тому

    A huge tribute to Asterix

  • @abderrahmenlandolsi5350
    @abderrahmenlandolsi5350 3 роки тому

    good job :D, very understandable

  • @stLmpp
    @stLmpp 4 роки тому

    Great video, helped me a lot :)

  • @ba1anse
    @ba1anse 3 роки тому

    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.

  • @gosnooky
    @gosnooky 5 років тому +1

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

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  5 років тому +3

      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.

  • @ummuser
    @ummuser 4 роки тому

    Very informative and easy to understand, thank you

  • @nagendrapp2213
    @nagendrapp2213 5 років тому

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

  • @karma_yogi_42
    @karma_yogi_42 4 роки тому +1

    thanks that was awesome

  • @yaolegoleynik
    @yaolegoleynik 5 років тому +1

    Thank you!

  • @himbary
    @himbary 4 роки тому

    great video ty

  • @romikonlinepotapenko3475
    @romikonlinepotapenko3475 4 роки тому

    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);

  • @dodokwak
    @dodokwak 3 роки тому

    Thank you.

  • @putinscat1208
    @putinscat1208 2 роки тому

    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
      @SteveGriffith-Prof3ssorSt3v3  2 роки тому

      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.

  • @sawilliams
    @sawilliams 4 роки тому

    What about Rose...😜

  • @dansmith5783
    @dansmith5783 4 роки тому

    Sounds like Robert Downey Jr.

  • @CottidaeSEA
    @CottidaeSEA 2 роки тому

    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
      @SteveGriffith-Prof3ssorSt3v3  2 роки тому

      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
      @CottidaeSEA 2 роки тому

      @@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.

  • @elsh11
    @elsh11 Рік тому +1

    Great tutorial. Thank you so much!