Using a loop is almost a must in our day to day life. But have you ever thought what kind of loop should you use? Do you know the difference between enumerables and iterables? This article sheds some light in this space, so read on if youβre interested.
\n\nLooping has seen quite a few changes from when I started programming. I remember using while loops and thinking wow, this is cool (I was printing starts on console using MS-DOS).
\nFor loop is another way to iterate through a data structure which contains many items. But non of these methods iterate over the actual structure. They use a sequence, usually named i which mirrors the identifier for you.
const fruits = ['π', 'π', 'π'];\r\n\r\nfor (let i = 0; i < fruits.length; i++) {\r\n console.log(fruits[i]);\r\n}\r\n\r\n// π, π, πHere i is an index which allows you to access the elements of fruits array and is not part of the array itself. But with progress on JavaScript towards more modern ways of programming, things have changes now. We have for...in, and for...of loops which use a different mechanism for going through items in a collection.
Before we delve into these newer ways of iteration, we need to be on the same page around some concepts. So letβs go through them now:
\nThat didnβt click for me at first, but after going through some examples, it finally made sense. If you consider a full pencil case, thatβs an enumerable. When you line up at Aldi to pay, that line is an iterable. A wad of cash is an enumerable, whereas a row of keys on your keyboard is an iterable.
\n\n\nπ‘ In order for an object to be
\niterable, it MUST implement an@@iteratorproperty which returns an iterator. An iterator object is one which has anextmethod which returns the next item in the collection. Thatβs why an object is not an iterable.
By now you should have started to see the pattern here. The best analogy I came across is:
\n\n\nπ Enumerables are like rectangles whereas iterables are squares. This means all
\niterablesareenumerables, however, not allenumerablesareiterables.
for...inSo letβs start from enumerables. You can go through enumerables using for...in. The use case is mainly to go through key-value pairs in an object:
const superCar = {\r\n make: 'Lamborghini',\r\n model: 'Veneno',\r\n year: '2020'\r\n};\r\n\r\nfor (let key in superCar) {\r\n console.log(`${key} --> ${superCar[key]}`);\r\n}\r\n\r\n// make --> Lamborghini\r\n// model --> Veneno\r\n// year --> 2020You can also use for...in to go through index values of an iterable like an array or a string:
let fact = 'Lamborghini is the best!';\r\n\r\nfor (let index in fact) {\r\n console.log(`Index of ${fact[index]}: ${index}`);\r\n}\r\n\r\n// Index of L: 0\r\n// Index of a: 1\r\n// Index of m: 2\r\n// Index of b: 3\r\n// ...\n\nπ‘ Beware that you canβt iterate on
\nSymbolproperties withfor...inand thatβs becauseSymbolsare primitive data types that are always unique. They are generally used as private properties to avoid name clashes when inheritance is used.
for...ofThis kind of loop is applicable to βiterable objectsβ meaning the item after of MUST be an iterable:
const fruits = ['π', 'π', 'π'];\r\n\r\nfor (let fruit of fruits) {\r\n console.log(`${fruit} is delicious.`);\r\n}\r\n\r\n// π is delicious.\r\n// π is delicious.\r\n// π is delicious.And again we can use it on strings, but with a slight difference:
\nlet fact = 'Yas';\r\n\r\nfor (let char of fact) {\r\n console.log(char);\r\n}\r\n\r\n// Y\r\n// a\r\n// sWe saw the difference between these two modern ways of looping through collections, letβs make more informed decisions as to use what where and write cleaner, more readable code ππ½.
","timeToRead":3,"frontmatter":{"unformattedDate":"2020-04-24T00:00:00.000Z","date":"April 24, 2020","title":"Have you ever thought about for loops? β°","subtitle":null,"id":null,"author":"Yaser Adel Mehraban","gravatar":null,"canonical_url":null,"tags":["showdev","webdev","javascript","forloops"],"thumbnail":null,"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8UlEQVR42h3O2Y6bMBQGYB66fYjeVxqpL1G1akaaGc20M1lMAmRvYiAsToCw2caYsIaoTqVPv/4Ln+MjrRGB4cWISyO+OLg8keqOVkdaIVIhXPusOed1wJqA1SFr/KxGpPRp5cRMmgc5jMsFSjcB2/jMCHMrys2QmWEGAwoDBv3Mirgb5yjhTsSsmDtJlVxuHqkkEOQywr8my99L82m6/bMwhks4XBqv0/Xju/Ixh2+zzcdCH6/N0dp8Hs/lrQW9PMivCJcS8DItrVekg7izaYdYf+K9X4i8efzqFTdPfFL0x6J3eX/kvegO6wzS7cOLBPxMi0rFzRSbLo7533NhJpVDWpR1fn712NUm7R1tLNIccGPT1iQNxO32zCVgJZqdKSZRXaYhLsxRvvG4mdQWbgUzbXXc6rSF5O5ecKOTdnMuJACjhUOXNlbtbKLHAjASxeUK4updoR4L1b+oca3hVg3b0aHRwnqHxTCXZIvOxmD5/EMx4sfJbgB2T9pBE6+PXD0Vqlfc81SIXStSfn/pPn+6/tTqFWtmXi6Jawev4OHrw9RKZlY6dbDsEjGsnQrN+08UscsvV/FlINdfvnVvRr3CzcSm0mjrTfTkfR/LhxSYCbBS2aWyEcnwLOuhvBcZARsDhwhTJ1FP6RQRYJHhPvwH64oPKxnnzDwAAAAASUVORK5CYII="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/3c8f6aeab4c36ac4fab0c123e77d3f29/a2195/socialpreview.png","srcSet":"/static/3c8f6aeab4c36ac4fab0c123e77d3f29/cadb4/socialpreview.png 750w,\n/static/3c8f6aeab4c36ac4fab0c123e77d3f29/a2195/socialpreview.png 800w","sizes":"(min-width: 800px) 800px, 100vw"},"sources":[{"srcSet":"/static/3c8f6aeab4c36ac4fab0c123e77d3f29/11ba1/socialpreview.webp 750w,\n/static/3c8f6aeab4c36ac4fab0c123e77d3f29/5f042/socialpreview.webp 800w","type":"image/webp","sizes":"(min-width: 800px) 800px, 100vw"}]},"width":800,"height":400}}},"img":null,"socialPreview":{"publicURL":"/static/3c8f6aeab4c36ac4fab0c123e77d3f29/socialpreview.png"}}}},"pageContext":{"title":"Have you ever thought about for loops? β°","postPath":"/blog/2020/04/24/iterators","nextPost":"/blog/2020/05/03/sorting","previousPost":"/blog/2020/04/13/lighthouse-ci"}},"staticQueryHashes":[],"slicesMap":{}}