Understand the Difference Between for...in and for...of Loops in Javascript

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 5 years ago

In general: Use for...in loops to loop over the keys of an object. Use for...of loops to iterate over an array or string.

The two loop types: for...in and for...of behave differently in javascript. Both loops can be used with Arrays and Strings - but only for...of loops iterate over the values in order. for...in loops actually loop over the enumerable properties of an object. For an array, that means that a for...in loop iterates over the indices of the array - and order is not guaranteed. So use for...of for arrays or strings, and for...in for objects.

Instructor: [00:00] If we have an object, a for in loop will iterate over the enumerable properties of the object and give us that property at each iteration of the loop. The for of loop will only work with iterables. Objects in JavaScript aren't iterable. If we switch to a for of loop, we can see the error that objects don't have a defined interator. For objects, you'll always want to use for in loops.

[00:30] For objects with a defined iterator though, like an array, we can use a for of loop to loop over each element in order. That works because an array is iterable. For of loops also work for everything that has a defined iterator, which includes strings. That's a convenient way to iterate over all the letters in a string.

[00:55] You'll want to use for in loops for objects. You should use for of loops for arrays and strings. If you try to use a for of loop for an object, then you'll get an error. You're protected there.

[01:08] However, if you use a for in loop on an array, it will actually work. But it may not be what you expect. If we have an array, we can actually do a for in loop with it because arrays actually have innumerable properties just like objects. When we run that, what you see are the properties of the array object, which are the indices of the set values in the array.

[01:32] You can actually use a for in loop with an array to get both the keys and the values. But there's one big caveat, which is that for in loops don't guarantee any order. We happen to have all the keys in order here. That's not true all the time. You still probably want to use a for of loop with arrays.

[01:51] However, I'll mention just one more edge case. If we manually set an array index past the end of our defined array, like six, and run that with our for of loop, then we get all the indices from zero up to six, including the values that we don't set at all. Because they're included in between the start and the end index.

[02:12] If we switch to a for in loop, it will only iterate over the actual properties that we've set. For arrays, you probably want a for of loop. A for in loop may be helpful in some cases as well.

egghead
egghead
~ just now

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today