A 12 year old Nirof along with some of her friends is playing the blind man's buff in the community park. Nirof is blindfolded so she'd just run into anyone (friends and strangers). Since she can not free her eyes, there is simply no way she can tell who she catches hold of. Her friends while trying to save themselves would also run into people, they could however identify the people they do not know. What am I even saying? I will finish the story (not really a story) towards the end of the post. Before we delve into the real deal, let us try to understand something much important and way much easier to grasp. Let us talk about Enumerables and Iterables.
Blind Man's Buff.
Enumerables VS Iterables
For simplicity just remember the following two points before I elaborate on them:
1 - All objects in JavaScript support enumeration.
2 - Not all objects in JavaScript are iterable.
If not entirely the same, when you google the terms enumeration and iteration you find quite a bit similarity in their meaning. How do we differentiate between them in JavaScript? To answer that let me tell you that to fall under the category of "Iterables", a JavaScript object must have an implementation of a special method known as '@@iterator'. To be honest the name of the function goes something like this [Symbol.iterator]. If you can then please ignore the silly name and let's call it the '@@iterator' method for simplicity. If you want to delve deep, read more here.
Continuing to answer our question, not every object has this function implemented, so not every object is an iterable. Every object still supports enumeration. Basically, when we say that a JavaScript object supports enumeration, it simply means that we can use a "for...in" loop to read keys of its properties ({key : value}) one by one. On the other hand when we call an object iterable, we indirectly say that the particular object has implemented the '@@iterator' function and we can use a "for..of" loop on the object.
This will get clearer with an example. Array, String, Map etc. have internally implemented the '@@iterator' function all in their own way. A "for...of" loop on an Array object returns elements of the array one by one because the '@@iterator' function it implements is designed to do so. For no other reason, a "for...of" loop on a String object, gives the characters that make up the string.
Iteration Example. Try on codepen.
Enumeration Example. Try on codepen.
From the example on iteration, you can easily understand that the iterator on an array simply returns its content. It doesn't have to do anything with the fact that arrays in JavaScript are also objects. It successfully ignores any additional properties added to the JavaScript object but considers all the elements added to the array. On the other hand, when you study the enumeration example you will see that the "for..in" loop is concerned about arrays being objects. It treats the array as an object and gives you the keys to the properties of the object. In the case of arrays, the keys are nothing but indices of the elements in the array. To prevent a property from being considered for enumeration you can simply set "enumerable" option to "false" in the property descriptor.
Do you still remember Nirof, the 12 year old girl. "ni...rof" is the "for..in" loop, she can catch hold of anyone without discrimination. The "for..in" loop works on any kind of object in JavaScript. Nirof's friends are the "for...of" loop (not blind-folded) who can identify the people they know by their faces, the face being the '@@iterator' implementation. "for..of" loops won't play with any object that does not have this face.
Conclusion
1 - All objects in JavaScript support enumeration. You can use the "for..in" loop to read their properties ( keys ) one by one. Basically its the properties of an object which are enumerable or non enumerable (property descriptor).
2 - Not all objects in JavaScript are iterable. Only the objects which implement the '@@iterator' function can be called iterable and will work with the "for...of" loop.
3 - Simple Objects - Non-iterable & Support Enumeration
4 - Arrays, Strings etc.. - Iterable & Support Enumeration
Top comments (2)
Great article! Bookmarked because I'm sure I'll revisit soon. I did want to point out that when considering using the
for...instatement it should be taken in to account that the statement does not guarantee the values will be returned in order. Mdn covers this in thefor...inarticle.Hey @jasonf ! Thanks for adding more information to the post.