For…in and For…of Loop in ECMAScript 6 


In this article, we will take a look for in and for of loop. In ECMAScript 6 new looping added which is for of loop.  so in this article, we will take a brief look on for in and for of loop. we will briefly describe the difference between for in and for of loop and also take an example of each.

For…in

for in loop

For in loop start with the for keyword and in the parenthesis we specify the expression. In the expression, we just declare a new variable with the iterable object. Following is the syntax of for loop.

Now the syntax is pretty much simple. I think I don’t need to describe the syntax again. we will move to the example and understand how for in loop works. If you’re familiar with for loop then this would be very easy to understand. You can use for the loop when you know the index value of the object or the array variable. But what if you don’t know the index number and you wanted to display an object on the console. In that situation without specifying index value for in loop will display your object data on the console.

let’s take a look at this example.

Now when you execute this statement you get 1234 on the console. Instead of specifying index value we just used for in loop and access the object element one by one. The for in loop start with 0 index and print all the elements in the object on the console step by step. for in loop will do the heavy lifting for you.

For in loop only access the iterable object. in each iteration for loop display object element on the console and move to the next element. So that is why you will get this type of output.

For…of

for of loop

For of loop is just like a for in loop but this only works on iterable objects. For of loop is new in ECMAScript 6. So the for of loop provide another way to loop over the element in the collection. For of loop generally used to iterate over an array,  an object, Type array, map, set, string and other iterable objects.

Following is the syntax of for of loop.

For of loop start with the for keyword and in the parenthesis we specify variable with of Keyword and the object and then we specify the statement which we wanted to execute. The for loop can be used on the array but more generally You can use it on any object that is iterable.

So now here is the example of for of loop.

So when you execute this statement you will get 12345 on the console. For of loop, loop over each array element and print on the console. As I said for of loop work like a for in loop but there is a little difference between for of and for in loop.

Suppose if I had changed the for of loop into for in loop then what would be the output.

so the output is 01234.  so the for in loop will not print the element on the console instead it will print index of an array. So the output you are seeing right now is the index value of an array element.  I will just change this for in loop in for of loop. Right, Using for of loop you can also print string characters.

So suppose you have a string tuition.

Now you need to specify this string in the for of loop. When you execute is code for of low will separate each character and print on the console. As I said before the string is just a collection of characters so for of loop will just print that character on the console.

Just simple as that.

For of loop is the best choice when You need to look over an array. But don’t know the index number of an element. If you know the index then you can use for loop also.

The difference between for in loop and for of loop. For in loop, loop over the enumerable properties and for of loop does use an iterable object and loop over generated values. So the benefit of for of loop if you can change the iterable element.

Suppose I increase the value of the array by one. Then you will get the valid output.  So this will increase the value of the array element by one using for of loop.

If you know the concept of for loop then this topic will not really hard to understand. So I hope you understand what is for in and for of loop. If you don’t understand yet then comment me I will write another article for you. That is all for this article we will see you in the next one.