Iterable vs Enumerable in JavaScript

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.

[@RogerontheKeys]

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

[@rotrose7531]

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]

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

[@ctfrancia]

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!

[@tseponkalai6528]

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

[@amansaxena4446]

Gold mine content available for free. Thanks you so much

[@emilewamsteker3412]

This is an excellent explanation. Thanks.

[@koki1721]

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

[@aparnaiyer5873]

Thank you , this was extremely concise and helpful!

[@ataddata]

Great Video, very insightful and clear

[@devenpatil6]

Awesome...Really nice and clear explanation

[@elnurshabanov1608]

Great and brief explanation!

[@inetmiguel]

Very clear, thanks so much!

[@zakariaelaissaoui9990]

Brilliant explanation! Thanks

[@eugene1207]

Thanks! Awesome explanation!

[@chesterxp508]

Another very cool tutorial!

[@leannec6821]

Great tutorial, thanks a lot!

[@santhoseaghilsanthose3317]

Awesome!! clear explanation

[@bridgetfitzgerald7656]

Thank you for this video 🙌

[@ShreyasKumar]

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

[@ramusesandasari8451]

Wow great explained 🙂

[@kalishamalama5805]

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

[@lavdixit2267]

Thanks , For Good Explanation

[@1polyron1]

You are a king.

[@shirodeepdahal3772]

It helped to understand something more than my guru

[@blank-vw2sb]

Thanks. You are awesome

[@virajjay]

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]

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]

@@SteveGriffith-Prof3ssorSt3v3 Many thanks for the explanation.

[@AshishGupta-wk4ts]

Thanks !

[@codea8901]

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]

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

[@codea8901]

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

[@SteveGriffith-Prof3ssorSt3v3]

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

[@codea8901]

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

[@zachdelorenzo1903]

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

[@SteveGriffith-Prof3ssorSt3v3]

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]

ty

[@treea5063]

great

[@fs17792]

Danke!

[@SteveGriffith-Prof3ssorSt3v3]

Vielen Dank

[@hamzaakbar5321]

best thx

[@darkfrozen1860]

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

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

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

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.

[@codea8901]

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]

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]

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

[@ateshrampersaud2664]

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

[@SteveGriffith-Prof3ssorSt3v3]

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.

[@Sharukkhan-kx9rw]

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!

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. Sorry, I don't know anything about Plotly.

[@rafaelanataly2192]

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]

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]

@@SteveGriffith-Prof3ssorSt3v3 Thank you!

[@nigelbrie5693]

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

[@SteveGriffith-Prof3ssorSt3v3]

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.

[@DmitriyMalayevProfile]

gist?

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

didnt understand a thing

[@HassanMalikTW]

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

[@DmitriyMalayevProfile]

// 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) }