DEV Community

Difference between for...of and for...in loop in JavaScript.

Swastik Yadav on November 11, 2021

Hello Everyone, The difference between for-of and for-in loop really troubled me when I was learning JavaScript. And with this blog I will try to ...

Read full post

leob • Nov 11 '21 • Edited

I can never remember which one is which, always need to look it up ... do you happen to know a clever mnemonic to remember it?

You could say "of" is for "o"bject and "in" is an "index" (key) but unfortunately that's not good (for ... of does NOT work with objects).

In fact "for of" (not "for in") is for "iterables" ... so this is a mnemonic that's just the wrong way around, lol.

Siddhesh Mungekar • Nov 11 '21

You can remember it as
of - objects iterable
in - enumerable objects

I hope it won't be confusing 😃

leob • Nov 11 '21

Hmm yeah that might work ... I can't come up with anything better either lol

DrBatroni • Nov 11 '21

I use it like this:
in - iterate in object
of - iterate over something (string/array)

leob • Nov 12 '21

Yes I like that! best one I've seen until now ...

Narayan Deshmukh • Nov 15 '21

Thanks , this will really help !

Swastik Yadav • Nov 15 '21

I am glad that this helped, Narayan 😊

Sharan Gudimalla • Nov 12 '21

Exactly, so I remember the opposite way XD. I used to do it in school too😂

Robin Pokorny • Nov 15 '21 • Edited

To add one more reason why for..in is bad for arrays is that it skips gaps in sparse arrays:

const arr = ['a']
arr[5] = 'b'

for(const value of arr) {
  console.log(value);
}
// -> a
// -> undefined
// -> undefined
// -> undefined
// -> undefined
// -> b

for(const key in arr) {
  console.log(arr[key]);
}
// -> a
// -> b

epic71 • Apr 1 • Edited

Very useful

Swastik Yadav • Apr 1

Thanks @epic71

Brad • Nov 11 '21

I used to get these mixed up all the time. Then I came up with a funny/simple saying.

"Use for...in if you want to be in trouble"

The most common use-case is to iterate over an array of things within an Array, where you'd want for...of, so using for...in would give you the "keys", or numbers which can create confusion.

You don't want to be "in" trouble, so don't use for...in. Hope that helps with remembering :D

Tathagat • Nov 14 '21

I have recently used for of to iterate over array and element of array were to passed to a async function as parameter and I need to hold the execution of loop util async function gets resolved I tried many things but at the end for of loop work in this case.

Nadine M. Thêry • Nov 17 '21

I was about to ask what's the difference between forEach, which I tend to use a lot and these other methods. Honestly, I use forEach because I learnt it first and I didn't feel need to learn others haha.
Are these methods a better practice or a refactor method?

Swastik Yadav • Nov 17 '21

Hey Nadine,

forEach is an Array method just like Array.prototype.map and Array.prototype.filter. The difference between forEach and other Array methods is that unlike "map" and "filter", "forEach" does not return the array it always returns undefined.

I hope this cleared the confusion.

Thanks for bringing this up in the comments. 😊