JavaScript for/in Statement

Java script Basics

Java script for/in Statement

(00:00)

Hello guys welcome to our series Java script, since last segment we are studying the loops available to us in Java script. In our previous segment we covered for, while, and do while loop, two loops which were remaining are for in and for off. So in today’s segment we will cover these two loops. So let’ start with for in loops.

As we can see in slide for in loops are specifically made for object, so if you are using for in outside object then it will not work, we use for in loops to iterate the property of object, here it is written as well for in loops through the property of an object. Means whatever our object’s property is defined, means let’s say we made a person object earlier, and we defined different properties of that object like first name, last name, age and eye color.

So for the throughout working of our object’s property we use for in loop, here you can see syntax of for in loop, initially we have written for and then in bracket we have written in between variable and object, we will take variable which we have to define and the name of object. So var object appears at left and right side of in, after that we can execute our piece of code through the property is written.

So if we see an example, a person named object has been created, and that person’s first name, last name, and age properties are defined. We have to move these properties in text named variable, for that we have used here for…in loop, how? So if we want to show first name, last name, and age simultaneously, like first name is John and last name is Doe and age is 25, if I have to show John Doe 25, then in that case what will I do?

So here we have text plus equal to this plus equal to we have covered this in our operators segment that plus equals to means equal to variable means text plus equal to person, so it means text equal to text plus person. So if we have to append other values in one variable so in that case we will write it in this way, variable the object then another value again another value so that it will be added to it. so how will we write this?

I will open sublime text, I will copy paste my previous code and remove the do...while portion, this is my for…in loop, so here also we will repeat for….in loop, save for…in, okay so this is our for…in loop. We saw that for…in loops work on object so for that we will need object, so let’s say I create person named object. In person I will take first name as I took last time, Joel, last name- Christian then age 28 which is in number, then eye color, but for time being we will skip eye color.

So we have three things in person object, first name, last name, age, now we will iterate our person object. So for that what we will do, I want my first name, last name, and age should be printed one by one in variable through text. For that I will require two things first is person object and next a variable in which I can store this string.

(04:59)

So let’s say I name it temp, so I will take var temp, now I can leave temp as it is after declaring so that it will be undefined or I can add equal to and double quotes to it, this proves that temp is accepting string, I have initially only made temp a string and left it and here I have taken person object so I have both the things. Here I will run for…in loop, for in bracket I need a temporary variable so that I can store my temporary variable so for that we can take anything, I will take value and in which is our keyword and then object person.

 So my curly braces got open, here my temporary value becomes a variable, in for loop we used to define variable by writing var , in while also we used to write var same in do…while but in for…in we don’t have to define variable by writing var, for…in loop will work without var keyword also. So now we will print our value, let’s say I print our value as it is, document.writeln value, now I am getting output first name, last name, and age as in I am getting our properties as output.

So here what is happening? I am getting person’s properties, what are those? First name, last name, and age. So on printing only value we are getting this as output but I don’t want those properties I want the value of those properties. For that what will I do? After value person’s first name and person’s last name I want in this manner, so what will I write here?

I will write person and this value so save and reload, so now I am not getting properties I am getting values- Joel Christian 28, if I will print only value, then names of properties will get printed but if I write person and in bracket if I write the variable which I defined then I will get my property’s value. But I want this as string so on writing document.writeln also I am getting my output.

But I want this to be shown as stored in a string, so for that we will take temp equal to temp plus and person(value) and we want to leave some space in between so for that space, now I will comment this temp and if I print this temp after one round of loop(4 seconds gap)okay, still I am getting same output, but this time where I am getting output from? I turned my loop, I have stored all the values in temp variable in loop.

Temp equal to temp plus person and I have given some space also, I will remove this space then you can see output is coming at one place only, If I give space then again space will come in output. This was how to work in temp, in temp variable I made string of three values and printed it, if you want to avoid these two statements, this defining variable and getting the values and then printing it, then you can simply document.writeln person value and print it.

So this was our for….in loop. We need to remember while using for…in loop that it works only and only on object. If you have to work with non-primitive data type for that we have to use for…of loop. Now comes for…of loop, whenever we work with iterable object that time we can use for…of loop. Here in non-primitive data type we had array as well as object also, so our for…of loop works on array as well as object also.

(10:15)

But for…in loop works only on our object, it will not work on array. So for…of loop becomes convenient when we want to work with more than one things. So we will take two example to understand for…of loop, we will take array as well as object also. We will take this example in both , the syntax is like this, for then it is same like for…in variable then instead of in we will use of, for of then variable and then iterable, iterable can have two things it can be either array or object, it is not necessary that it will be array or object it can be string also, if we consider string then how it works, we will see this also.

Then our code block which we have to execute, let’s take an example, we have two examples available in first example we have taken object and in second example we have taken string. First we will see first example, let’s see what is first example about, instead of object we will work with array, we have already seen object in for…in so now we will see this example with help of array.

Let’s go to the program, I will copy paste this program, for…of, for..of, if here we keep this same program as it is, if I write of and remove this temp variable temporary, I will save this and write for…of, you can see for…of is running here but we are not able to see output. Which means something is wrong so, F12 so here you can see person is not iterable, what is person? Person is object, if my person means our object is iterable then my for…of loop would have been executed. If my person my object is not iterable then it will not work with it.

So you can see in the program, in person object I have taken some things like first name, last name which are kind of mixed up things, so iteration cannot be performed. So we have seen for…of loop works with array, object and string but when we are performing it practically, for…of is not working with object, so practically we will consider for…of loop will not work with object. We have to use for…in, in case of object that is the only possibility we have. So guys for array and string we have for…of, but for object for…in.

So from this program I will remove this object and will remove this variable also, now what I have to do here? I want iterable things which can come one after one. I will take an array, initially we took array of cars, I can take array of alphabets or something like that, so let’s say I take var alphabets equal to array, in array I will take A and after comma B comma C comma D, so in total I took four alphabets, now I want to print these alphabets so for that what will I do?

I will take a for…in loop and in bracket as we know we need a variable, so I will write value this is our for….of so we will write of and my array is alphabets, now here I will simply write document.writeln and I will print my value, save and reload, so you can see A B C D are getting printed here. There was no problem while getting the value, I have easily printed these values. Now instead of for…of I want to iterate my array of alphabets with for then how will that happen? I will comment this and take a for loop here, so let’s say I take here initially initialization will happen, let I equal to 0 semicolon I is less than, what is my array, it is alphabet, so alphabets.length semicolon I plus plus, so this is my initialization process, I have taken a variable I, how many times I have to turn I? as many times as is my alphabet’s length.

(15:37)

So if my alphabet’s length is 1 2 3 4, then it will start at zero and it will go till alphabet.length minus 1 means if we are counting from 0 then 0,1,2,3 I have to turn it 4 times if take only till length then it will turn 5 times that’s why I have to turn till length minus 1 and here I plus plus so that every time increment will take place. Now here what I have to print? I have to print alphabets, so I will write document.writeln , element of alphabets, okay reload now you can see d has been removed.

So here I am getting A B C D here you can see less than equal to means total length minus 1 total length is 4 and 4 minus 1 is 3 , so my loop will turn till 0 1 2 i.e. till A B C, we have to turn it 4 times so less or equal to alphabets.length minus 1 . so this was our for loop , if I have to do same thing by for loop then I will write it in this way if I want to do same thing by for…of then I will write in this way.

Here you can see in for loop I have to initialize for loop, add condition I have to add increment operator so in total all these three things which I have to do here can be skipped if I use for…of loop. So guys this can be considered as an add on functionality in Java script, when we are using for…of loop when compared with traditional for loop and our work can be done very easily.

We don’t need to initialize we don’t need any condition nor we need any increment operator, with simple for…of loop we took values from our array alphabet and we printed it. So as compared to for with less line of code and with less logic we can finish our work. So I will remove this for loop from here because with help of for…of loop our work is easily done. So this was our program for…of, in that we saw how it works? In this program only I will take one more thing example of for…of loop with array and now this same thing we are doing with string okay, so our first example was of array and now we are taking string.

We have to print something in string, I take a variable let’s say var s, s for string ad in s I will write “ learnvern” okay now I want to print this learnvern character by character, means I want l differently e differently I want everything segregated so what will I do, to differentiate it I will use for…of loop. It will be like for I will take value of s , document.writeln in that I will print value , I want space between all the characters so I will add br tag, okay so my first value will be printed then br tag then In another line another value will be printed so I will save this and reload, so you can see learnvern which I added as string is getting differentiated character by character.

First L is getting printed then E is getting printed then A then R. so now my value is holding each and every character , means each and every character from learnvern has differentiated, L has been separated E has been separated. So if I want to separate every character in string so for that also we can use for…of. So here we saw two uses of for…of loop, first use is for array and second is for string, apart from this also we can use for…of for many different purpose, but majorly when we are working on some web application development that time we take array as our iterable data type or we take as a string.

Whenever you appear for interviews in interview this type of programs are asked a lot, you are given a string and you have to find the occurrences of string. Let’s how many times L is appearing, how many times E is appearing, so you can see e is appearing two times in learnvern . so sometimes question can be asked like in interviews or coding like from given string which character is repeating how many times? So here we can see L is appearing 1 time, E is appearing 2 times so how can we identify this, from s we are taking value one by one so first we are getting L, for L we can write some logic like if occurrence of L is one time then write it 1 time if occurrence of E is two times then counter increases by two times. So we can move further slowly by this way.

So whenever we want single alphabets, characters, or elements for given array or given string that time we use for…of loop. Guys this was our loops, we have seen in total 5 loops combining this segment and previous segment like for, while, do while, for in and for of. All the 5 loops are used for different purpose, based on requirement we take judgment as in which loop should be used when.

But if you are moving further in Java script then instead of for, while and do while we can use for in and for of loop. As it shortens our huge line of codes easily and we can execute it with less line of code. I request you to practice all the 5 practical in order to understand it in better way and if you have any questions or queries during practical or segment then tell us on forums.learnvern.com we will revert back with solutions to your questions.

Our next topic is also very important segment, functions in Java script, we will see that in next segment.

Thank you.

(video duration- 23 minutes 27 seconds)