JavaScript Loops: for/forEach/for.. in/for.. of Explained

There are quite a few ways in Javascript to loop through an array of items or any other iterable item in Javascript. You may have seen them: arr.forEach() for(let item of arr) for(let item in arr) for(let item = 0; item < arr.length; ++item) This may seem like a lot of ways to accomplish the same thing, but they all have their nuance. For any of these to work, the item in question also needs to be . So while they will work with things like maps, s, and Arrays, they will not work with Objects. Strings are also iterable. iterable Set Since there are so many ways, it can be confusing when to use , or in Javascript. Today, let's understand in detail what each of these does, and when to use them. forEach in of The forEach Method is a tool many are drawn to because linguistically it makes sense. sounds right, and it provides an easy callback function to do whatever we want to do with item in an iterable like an array: forEach arr.forEach each let x = [ 1, 2, 3, 4, 5 ]; x.forEach((item, index) => { x[index] += 1; }); console.log(x); // [ 2, 3, 4, 5, 6 ]; However, is a method - which means that it only appears on certain data types in Javascript. For example, all s have a method, and so do s and s - but despite being iterable, s do not. Notably, . So while it is reliably available in many different circumstances. It is also slower than a regular old loop. forEach Array forEach Map Set String DOM elements didn't have forEach until recently much for Beyond that, does not work with async methods like or promises either. In circumstances where you need to use promises or , its best to avoid it and use loops instead. forEach await await for While is an easy way to iterate over an array, but it's not always the best. forEach ## Using for loops on iterables There are three types of loops to run over iterables in Javascript: for for(let item of arr) for(let item in arr) for(let item = 0; item < arr.length; ++item) For those new to the language, the syntax can seem quite confusing. When Javascript first started, the original loop everyone used was the last one listed above: for let x = [ 1, 2, 3, 4, 5 ]; for(let i = 0; i < x.length; ++i) { console.log(x[i]); // 1.. 2.. 3.. 4.. 5 } This is an easy, straightforward way of accessing the index of an array. Here, starts at, and increases for each item in the array . Therefore, reliably represents the index for each item, and thus writing will let us do something with each item in the array. i x i x[i] Since then, two new types of loops have been introduced - and . for in of in vs of in Javascript for loops The best way to understand and in Javascript for loops that is a simplification of the loop we just looked at. It is an easier way to access the in an array. in of in for index Meanwhile, is an easy way to represent the . Let's look at a quick example. Here, we get the index of each item in our array using : of array item itself in let x = [ 5, 10, 15, 20, 25, 30 ]; for(let i in x) { console.log(i); // 0.. 1.. 2.. 3.. 4.. 5 } Meanwhile, if we use it gets the actual value of the array item: of let x = [ 5, 10, 15, 20, 25, 30 ]; for(let i of x) { console.log(i); // 5.. 10.. 15.. 20.. 25.. 30 } So while simplifies , gives us new functionality to access the array contents itself. This can be particularly useful if we have objects in our arrays: in for(let i = 0; i < x.length; ++i) of let x = [ { name: "John" }, { name: "Jacob" }, { name: "Jingleheimer" }, { name: "Schmidt" }] for(let item of x) { console.log(item.name); // John.. Jacob.. Jingleheimer.. Schmidt } It should also be noted that for other iterables like s and s, will return an array of both key and value, while will not work. For example: Map Set for.. of in let myMap = new Map(); myMap.set('x', 5); for(let x of myMap) { console.log(x); // [ 'x', 5 ] } for(let x in myMap) { console.log(x); // does not console log anything } To learn more about Maps and Sets you can read my detailed and here. Javascript Map guide Javascript Set guide Iterating through objects While objects themselves aren't iterable in Javascript, they can be converted to iterables by using or . This converts an object into an array of either its keys or values, which can then be iterated on: Object.keys() Object.values() let obj = { name: "John", secondName: "Jacob", age: 154 }; let iterableKeys = Object.keys(obj); for(let item of iterableKeys) { console.log(item); // name.. secondName.. age } Conclusion That about covers everything you need to know. In summary: is a method that is attached to most iterable items in Javascript, with a few exceptions. It is callback based, usually doesn't work with promises, and is slower than a traditional for loop. forEach loops are available on every iterable object, and it used to be the only format anyone used. for for(let i = 0; i < x.length; ++i) was introduced to simplify to . for.. in for(let i = 0; i < x.length; ++i) for(let i in x) Finally, we gained the ability to access the values of each item in the iterable rather than just the key, using . for.. of I hope you've enjoyed this guide, and have a better idea of when to use , , and in Javascript. in forEach of Also Published here