Understand the Difference Between for...in and for...of Loops in Javascript
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.