4.7 For...in Loops

So far, you've discovered three types of loops in JavaScript. The for loop, while loops and do-while loops. With all these loops, we can repeat an action several times. But we have two other types of loops in JavaScript and we use them to browse the properties of an object or elements in an array. So in this video, we'll look at the for-in loop. Let's say we have an object as a person, with two properties, For name: Toto and age 20. Let's say we want to display all the properties of this person object. This is where we use the for-in loop. So we do a for, in brackets and unlike the for loop that we learned before, we don't have three parts, so we don't have this initial expression followed by a semicolon and a condition followed by the incrementing part, This is different with the for..in loop. So we do a let key in person. So, at each iteration, this key variable in the loop will contain one of the properties of this person object, I'll give you an example. Here, I'm going to make a simple console .log of key, When we save the changes, we see in the first iteration that key is the name, and the age is the second iteration. Now what if you want to display the value of each property next to it. Well, there are two ways to access the properties of an object. We can use the dot notation which looks like this person.name or we can use the bracketed notation. So, we make a person in square brackets and the targeted property name as a string. Previously, I told you that we used the square bracket notation when we don't know in advance, when we write the code, what property we're going to access. Perhaps the name of the targeted property is calculated at runtime. Here is an example. When we browse the properties of the person object, at each iteration, the value key will be different. So here we can use dot notation to display the value of this property. In other words, we can't do something like this, because we don't have a property called key in the person object. So when we use the bracketed notation, we add square brackets and pass the key as the name of the target property. We'll now delete this. Save the changes so you can see the value of the name Toto and the value of age 20. So this is the for in loop and we use it to iterate over the properties of an object. We can also use them to cycle through an array. But that's not an ideal way, in the next video I'm going to show you a better way, but let's see how it works before we end this video. So I'm going to define an array called colors, with three values, red, green and blue. We can use the for in loop to traverse this array. So, to leave the index in colors, I named this loop variable index, because on each iteration, this index variable will be set to the index of one of the elements in this array. So, 0 1 and 2. We do a console.log of index, so we record the changes. And we get 0 1 and 2. Now, if you want to get the elements of a given index, again, we use bracketed notation. So comma, colors, and index in square brackets. Save the changes, and now we can see each element in our color table. From the ecma 6 script, or ES6, which is the modern version of JavaScript, we have a new type of loop called loop for of, it's a great way to browse arrays, and that's what you'll learn in the next video.