4.4 The `for .. in` Loop

Hi folks, in this lesson we're going to continue looking at loops, this time focusing on the for in loop. As we saw in the last lesson, the regular for loop is useful for iterating the values in an array. The for in loop is useful for iterating the values inside an object instead. The for in loop has a much simpler structure than the basic for loop. With this loop, we also start out with the reserved word for and a set of parentheses. But inside the parentheses, we just have a single expression. Let's take a look at an example. So let's recap the syntax briefly. We start out with the for keyword. We then have an expression within parentheses. And lastly we have a block which will be executed for each property in the object that's being iterated. So this time the expression inside parenthesis is much simpler. We simple declare a new variable, in this case called prop, and then use the in keyword followed by the object that we'd like to iterate. Inside the block, we can add a simple console.log, which shows the value of the prop variable on each iteration of the loop. And also uses the prop variable with square bracket notation to extract each value from the object. Let's just take a look at the output in the browser, and we see the three key names, and the three values. On each iteration of the loop, the variable defined within parenthesis has the value of one of the keys in the object. And the block of expressions will be invoked for each key value pair within the object. With this type of loop, we don't need to specify or maintain a counter variable manually, JavaScript takes care of that for us. For in loops are only able to iterate over properties that are marked as enumerable. When we create an object literal, like we have done here, all of the properties that we specify are enumerable. But there are ways to define object properties as non-enumerable, and we'll look at that later in the course. Just be aware that the for loop will only iterate innumerable properties. However, it is possible for objects to inherit enumerable properties from other objects. So there is a simple check that we should always perform inside the body of a for loop. So in this example, the object literal that we've defined in the variable obj has inherited a method called hasOwnProperty. And this is used to check that the property that we're currently iterating actually belongs to the object. The hasOwnProperty method itself is non-enumerable, so it doesn't get logged out in the for loop. But there are situations were enumerable properties do get inherited, even by simple object literals. So it's very common to see this hasOwnProperty check inside the body of for loops. Another difference between for loops and for in loops is that with for loops, an array's elements are accessed sequentially. From the 0th index to the last index. For in loops, however, do not guarantee the order in which properties are accessed. This means that if you use the for in loop with an array rather than an object, the loop may not access the array items in the correct sequential order. And that's the primary reason why we should always use a for loop with arrays, and a for in loop with objects. So in this lesson we looked at the for in loop which is used to iterate all of the enumerable properties within an object. We looked at the structure of the loop, and saw how to perform a hasOwnProperty check to ensure that we are only working with the object's own properties and not any that it has inherited. In the next lesson, we'll focus on the newest type of loop in JavaScript, the for of loop. Thanks for watching