All language subtitles for 7- For.in

So far you have

learned about 3 kinds of loops in JavaScript. 4 loops,

while loops and do-while loops.

With all these loops we can repeat an action a number of times.

But we have two more kinds of loops in JavaScript and we use them

to iterate over the properties of an object or

elements in an array. Let me show you. In this lecture, we're going to look at

the for-in loop. So let's say we have an object like

person, with two properties name,

Mosh and age 30. Let's say

we want to display all the properties of this person object.

That's when we use the for in loop. So for,

now in parenthesis, unlike the for loop that we learned about earlier,

we don't have three parts, so we don't have that initial

expression followed by a semi colon, condition

followed by the increment part. It looks a little

but different, let me show you. So we have let

key in person. So in every iteration

this key variable in the loop will hold the

one of the properties in this person object, let me show you.

So here I'm going to do a simple console.log of key,

save the changes. So in the first iteration, key is

name, and the second iteration it is age. Now what if you

want to display the value of each property next to it. Well

earlier that 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 bracket notation.

So person square brackets, the name of the target

property as a string. Earlier I told you, that we used

the bracket notation when we don't know ahead of time, at the time of writing

code, what property we're going to access. Perhaps the name

of the target property is calculated at run time. Here is

a real example. When we iterate over the properties

of the person object, in each iteration the

value key is going to be different. So here we can use the 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 that's

when we use the bracket notation. So we add square brackets,

and pass key as the name of the target property.

Now let me delete this stuff here. Save the changes

so you can see the value of name is Mosh and the value of age

is 30. So this is the for in loop. and we use it to

iterate over the properties of an object. We can also use these

to iterate over an array. But it's not an ideal way, in the next lecture

I'm going to show you a better way, but let's see how that works before we finish this

lecture. So I'm going to define an array called colors,

with three values, red, green,

and blue. Now we can use the for in

loop to iterate over this array. So for let

index in colors, note that I

named this loop variable index, because in each iteration,

this index variable will be set to the index

of one of the elements in this array. So it's going to be 0

1 and 2. Let's take a look. So console.log

index. Save the changes. So,

we get 0 1, and 2. Now if you want to get the elements

of a given index. Once again we use the square bracket notation.

So, comma, colors of

index. Save the changes, and now we can see each

element in our colors array. Now starting from

ecma script 6, or ES6, which is the modern

version of JavaScript we have a new kind of loop that is called

for of loop, and that is an ideal way to iterate

over arrays, and that's what you're going to learn in the next lecture.