{"id":6458,"date":"2020-01-18T18:21:44","date_gmt":"2020-01-18T17:21:44","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=6458"},"modified":"2020-01-18T18:21:44","modified_gmt":"2020-01-18T17:21:44","slug":"what-is-the-difference-between-forin-and-forof-in-javascript","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2020\/01\/18\/what-is-the-difference-between-forin-and-forof-in-javascript\/","title":{"rendered":"What is the Difference Between \u2018for\u2026in\u2019 and \u2018for\u2026of\u2019 in JavaScript?"},"content":{"rendered":"

What is the Difference Between \u2018for\u2026in\u2019 and \u2018for\u2026of\u2019 in JavaScript?<\/a><\/em><\/p>\n

<\/p>\n

\n
\n
\n

What is the Difference Between \u2018for\u2026in\u2019 and \u2018for\u2026of\u2019 in JavaScript?<\/h1>\n<\/div>\n<\/div>\n
\n

One for enumerables, one for iterables\u2026how should you use each?<\/h2>\n<\/div>\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\"Jonathan<\/div>\n<\/div>\n
\n
\n
\n
Jonathan Hsu<\/a><\/span><\/p>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Dec 4, 2019<\/a> \u00b7 3 min read<\/div>\n
\n
<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n

<\/div>\n<\/div>\n<\/div>\n<\/div>

Photo by Filip Mroz<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n

Looping has come a long way. Starting with while<\/code> loops and progressing to vanilla for<\/code> loops, neither iterate over the actual data structure. Rather, they iterate over a sequence that mirrors the identifiers for user.<\/p>\n

let nums = [1,2,3,4,5];<\/span>for(let i=0; i < nums.length; i++) {\n   console.log(nums[i]);\n}<\/span><\/pre>\n
The variable i<\/code> is not actually part of nums<\/code>, but happens to be analogous to the indexes of nums<\/code>.<\/p>\n
Modern JavaScript has better ways to loop through data \u2014 specifically the for...in<\/code> and for...of<\/code> loops. Learn the difference between the two as well as the underlying principles that guide us in when to use each.<\/p>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
Enumerables vs Iterables<\/h1>\n
To understand the distinction between for...in<\/code> and for...of<\/code> it is important to define the difference between enumerables and iterables. This can be tricky since there is some overlap and the terms are often used interchangeably.<\/p>\n
I like to think of enumerables as a rectangle and iterables as a square. Consequently, all iterables are enumerables<\/strong>; however, not all enumerables are iterables.<\/p>\n
Keeping that in mind, let\u2019s dig deeper into their definitions.<\/p>\n
We\u2019ll define an enumerable <\/strong>first. The verb enumerate<\/em> is defined as making mention of \u2014 or counting \u2014 items one at a time. Applying that to programming, an enumerable becomes an entity where its parts can be distinctly identified and referenced.<\/p>\n
Now, on to an iterable<\/strong>. From the root verb iterate<\/em>, defined as performing in repetition, an iterable is an entity where the same set of actions are performed on each item.<\/p>\n
So what\u2019s the difference? Here are some examples of each before we highlight what elevates an enumerable to be an iterable:<\/p>\n