Iterable vs Enumerable in JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ก.ค. 2018
  • Iterable and Enumerable are different things in JavaScript.
    When you add properties to an object they can be defined as enumerable or not.
    Some object types like Arrays, Strings, Maps, Sets, and NodeLists also have Iterators which are objects that let you access certain values from the object.
    This video discusses the difference between the two and how the for...in and for...of loops take advantage of the difference.

ความคิดเห็น • 63

  • @RogerontheKeys
    @RogerontheKeys ปีที่แล้ว +2

    Thank you! I kept running into these terms while studying objects, and no one seemed to really explain it.

  • @rotrose7531
    @rotrose7531 4 ปีที่แล้ว +6

    These fine details can not be found elsewhere except in your channel. Your tutorials give me great power to face my real world problems. Thank you so much!

  • @sachinjaveri1
    @sachinjaveri1 2 ปีที่แล้ว +1

    Why are you not famous yet.. ? Best Prof !

  • @ctfrancia
    @ctfrancia 5 ปีที่แล้ว +8

    I really really like this! I mean it's still something that I will need to rewatch but this is by far the best and clearly articulated explanation I've found thus far!

  • @amansaxena4446
    @amansaxena4446 ปีที่แล้ว +1

    Gold mine content available for free. Thanks you so much

  • @emilewamsteker3412
    @emilewamsteker3412 5 ปีที่แล้ว +3

    This is an excellent explanation. Thanks.

  • @tseponkalai6528
    @tseponkalai6528 5 ปีที่แล้ว +2

    Thank you so much, you just helped me understand in less than 10 minutes whtat took me the last 2 hours NOT to understand. Video liked and subscribed

  • @koki1721
    @koki1721 2 ปีที่แล้ว

    easy and clear english and expalination. as a second language user, can understand everything thanks!

  • @aparnaiyer5873
    @aparnaiyer5873 3 ปีที่แล้ว

    Thank you , this was extremely concise and helpful!

  • @zakariaelaissaoui9990
    @zakariaelaissaoui9990 4 ปีที่แล้ว

    Brilliant explanation! Thanks

  • @elnurshabanov1608
    @elnurshabanov1608 4 ปีที่แล้ว

    Great and brief explanation!

  • @ataddata
    @ataddata 3 ปีที่แล้ว

    Great Video, very insightful and clear

  • @devenpatil6
    @devenpatil6 5 ปีที่แล้ว

    Awesome...Really nice and clear explanation

  • @inetmiguel
    @inetmiguel 4 ปีที่แล้ว

    Very clear, thanks so much!

  • @chesterxp508
    @chesterxp508 2 ปีที่แล้ว

    Another very cool tutorial!

  • @leannec6821
    @leannec6821 4 ปีที่แล้ว

    Great tutorial, thanks a lot!

  • @eugene1207
    @eugene1207 3 ปีที่แล้ว

    Thanks! Awesome explanation!

  • @santhoseaghilsanthose3317
    @santhoseaghilsanthose3317 4 ปีที่แล้ว

    Awesome!! clear explanation

  • @bridgetfitzgerald7656
    @bridgetfitzgerald7656 3 หลายเดือนก่อน

    Thank you for this video 🙌

  • @ShreyasKumar
    @ShreyasKumar 3 ปีที่แล้ว

    Such an confusing concept got cleared after watching your video.. thank you..

  • @lavdixit2267
    @lavdixit2267 3 ปีที่แล้ว

    Thanks , For Good Explanation

  • @ramusesandasari8451
    @ramusesandasari8451 2 ปีที่แล้ว

    Wow great explained 🙂

  • @1polyron1
    @1polyron1 4 ปีที่แล้ว

    You are a king.

  • @kalishamalama5805
    @kalishamalama5805 5 ปีที่แล้ว

    pheew...! I finally got it well explained thankx....

  • @shirodeepdahal3772
    @shirodeepdahal3772 3 ปีที่แล้ว

    It helped to understand something more than my guru

  • @blank-vw2sb
    @blank-vw2sb 3 ปีที่แล้ว

    Thanks. You are awesome

  • @AshishGupta-wk4ts
    @AshishGupta-wk4ts ปีที่แล้ว

    Thanks !

  • @codea8901
    @codea8901 2 ปีที่แล้ว

    So glad I came across your channel Steve, only regret is that I didn't find it few years ago! Is there a way users can make a donation to your channel?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 ปีที่แล้ว +1

      Thanks. Yes, there is the Super Thanks - look below the video for the heart icon with the dollar sign inside it.

    • @codea8901
      @codea8901 2 ปีที่แล้ว

      @@SteveGriffith-Prof3ssorSt3v3 Hmm, I cannot see this option, only like, dislike, share, save and three dots at the end.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 ปีที่แล้ว

      @@codea8901 When you click on the three dots what additional options are you shown?

    • @codea8901
      @codea8901 2 ปีที่แล้ว

      @@SteveGriffith-Prof3ssorSt3v3 Report and Show Transcript links. I looked up on TH-cam help centre but couldn't find any helpful information to work out what's going on.

  • @virajjay
    @virajjay 3 ปีที่แล้ว

    Many thanks for making these awesome videos, Steve - much appreciated!
    Just wondered what's the difference between using 'Object.defineProperty' vs 'names.elf' as per this example, please? What you've done using 'Object.defineProperty' can also be achieved by writing 'names.ent = {value: 'Treebeard', enumerable: false}, is that correct?
    Thanks in advance.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 ปีที่แล้ว

      You need to use defineProperty or defineProperties to set the values for the property descriptors. Your example would not work, it would just set names.ent's value as an object that contains two properties - value and enumerable. They would not be seen as descriptors.

    • @virajjay
      @virajjay 3 ปีที่แล้ว +1

      @@SteveGriffith-Prof3ssorSt3v3 Many thanks for the explanation.

  • @fs17792
    @fs17792 2 ปีที่แล้ว

    Danke!

  • @treea5063
    @treea5063 4 ปีที่แล้ว

    great

  • @hamzaakbar5321
    @hamzaakbar5321 5 ปีที่แล้ว

    best thx

  • @zachdelorenzo1903
    @zachdelorenzo1903 4 ปีที่แล้ว

    What are some situations in which you'd want to purposely make a property non-enumerable?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 ปีที่แล้ว

      When you don't want the property to appear in a loop. Maybe you have internal properties that maintain state or measure the other properties. Some properties are the data and others are for your reference when working with the object. You might want to loop and display all the data but not a property that refers to the total number of properties.

  • @lycan2494
    @lycan2494 5 ปีที่แล้ว

    ty

  • @codea8901
    @codea8901 2 ปีที่แล้ว

    Hi Steve, My understanding of iteration is the ability to loop over. So since we can iterate an Object using for...in, how come Objects are classed as not iterable by default? Just struggling to get my head around that bit. Many thanks.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 ปีที่แล้ว +3

      Iterable means specifically that there is an order to looping over the object. The items are numbered. With a standard object the properties do not have a specific order.
      The for...in loop relies on the enumerable property descriptor.

    • @codea8901
      @codea8901 2 ปีที่แล้ว +1

      @@SteveGriffith-Prof3ssorSt3v3 Thanks Steve, it makes sense now.

  • @saumyagaur3500
    @saumyagaur3500 ปีที่แล้ว

    Where does one learn all this? I would love to learn all these in depth concepts by myself. Can you please refer me some resources where you learned all this from.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว +1

      There's not one or even just a few resources where I have learned all the things that I have learned about JavaScript over the last 25 years. That's one of the reasons that I make these videos - to try and bring these topics together in one place as much as I can.

  • @darkfrozen1860
    @darkfrozen1860 ปีที่แล้ว +1

    Practically it was really well defined but the main question still remains what is enumerable?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      An object can have properties that are enumerable or not. With a for...in loop you step through the properties that are enumerable only.
      An object that is iterable has an iterator which controls which properties can be seen and in what order, when you use a for..of loop.

  • @ateshrampersaud2664
    @ateshrampersaud2664 4 ปีที่แล้ว

    So, iterable refers to the properties (i.e. index), while enumerable refers to the values assigned to those properties?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 ปีที่แล้ว

      Not quite. Both are properties that describe how and when you can loop over the properties in an Object. They are different ways of controlling the ability to loop in different ways. You could have an Object whose properties are both iterable and enumerable and another object whose properties are neither.

  • @nigelbrie5693
    @nigelbrie5693 3 ปีที่แล้ว

    So in summary, iterable object will have access to only values and enumerable will only show properties?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 ปีที่แล้ว +3

      Nope. iterable means that the object (whatever it is) has a specialized function called an Iterator which decides which properties and in which order are available from the object.
      Enumerable is a property descriptor on every property of every object. The for in loop uses this to loop through the available properties.
      Remember in JS that Arrays are Objects too.

  • @rafaelanataly2192
    @rafaelanataly2192 4 ปีที่แล้ว

    I'm sorry but I'm a really really dumb one. So there's no way to, let's say, get middleEarth[0], right? Or to iterate with a regular for loop?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 ปีที่แล้ว +1

      middleEarth is an object, so we can't use numbers to get to the properties, we have to use the property names.
      You can iterate through an array with a for loop. However, you can't use a for loop with an Object, again because it doesn't use numbers to access the values.

    • @rafaelanataly2192
      @rafaelanataly2192 4 ปีที่แล้ว +1

      @@SteveGriffith-Prof3ssorSt3v3 Thank you!

  • @Sharukkhan-kx9rw
    @Sharukkhan-kx9rw 4 ปีที่แล้ว

    Your Videos Are Legendary Man!!!!!!!!
    Can you help Me?
    Use Plotly for Android Apps is permitted?
    I wanna use plotly for my analysis in my android app and publish in Google Play Store and IOS AppStore, Is that Acceptable to use plotly inside my Android App as well as IOS App, Or Is there any subscription to use Plotly in Android App,I didn't get into my mind by reading the license, Please answer in layman terms and answer will be very useful for me.
    Thank you in advance!

  • @DmitriyMalayevProfile
    @DmitriyMalayevProfile 2 หลายเดือนก่อน

    gist?

  • @ordaniel7699
    @ordaniel7699 ปีที่แล้ว

    I am confused. You compare in the title of the video between two things that aren't the opposite, because 'iterables' describe (objects!!) that are iterable, while 'enumarables' describe the (properties!!) of an object.
    My unresolved questions:
    1. Are the properties or the values called 'iterables' as well? Because you once said this and once that.
    2. I think the topic of the video should have been for...in loops VS for...of loops, and not iterables vs enumarables.
    3. If I want to sum up this video, would it be right to say:
    Iterables describe objects that are iterable. Enumarables describe the properties of an object, therefore they're called 'property descriptors'.
    **for ... in loop**, loops over the properties that are enumerable. In other words, we can access them and write them out.
    **for ... of loop**, loops of the values there are returned by an iterator object built in the object we're iterating. Arrays, maps, sets, strings all have built-in iterators.
    When you add properties to an object they can be defined as enumerable or not.
    Iterable object means that the object has a specialized function called an Iterator which decides which properties and in which order are available from the object.

  • @SimonSirumba
    @SimonSirumba ปีที่แล้ว +1

    didnt understand a thing

  • @HassanMalikTW
    @HassanMalikTW 3 ปีที่แล้ว

    The extremely gooey mouth of yours is in the microphone. keep that out please!!

  • @DmitriyMalayevProfile
    @DmitriyMalayevProfile 2 หลายเดือนก่อน

    // for of vs. for-in loops
    // Iterable vs. Enumerable
    //for in is looking for all of the enumerable properties (not the values) of the object and loops through them
    let names = ["Gandalf", "Bilbo", "Aragorn", "Gimli"]
    names.elf = "Legolas"
    Object.defineProperty(
    names, "ent", { value: "Treebeard", enumerable: true }
    )
    let middleEarth = {
    "towns": ["Hobbiton", "Rivendell"],
    "races": ["Elves", "Hobbits", "Men"]
    }
    middleEarth.creator = "JRR Tolkien"
    Object.defineProperty(middleEarth, "age", {value: "3rd", enumerable: false})
    for (let p in names){
    console.log("in names: ", p)
    }
    for (let p in middleEarth){
    console.log("in middleEarth", p)
    }
    //Iterators
    //The for of loop is designed to use the iterators. An iterator is another object attached to the array that tells some other function how to access all the different values inside it.
    //Arrays, Strings, Sets, Maps, and NodeLists have built-in Iterators. Object do not (must be custom made)
    for (let p of names){
    console.log("in names: ", p)
    }
    for (let p of middleEarth.towns){
    console.log("in middleEarth", p)
    }