for , forEach , for of and for in loops in JavaScript
Tags: javascript
Published: 2020-04-03 13:33:28

You probably know the **for** and **forEach** loop but you may not know about **for of** and **for in** loops🤔. **for of** and **for in** are actually new in JavaScript and their usage is not so frequent yet.
Let’s talk about all of these four loops one by one.

**for loop**
	Let’s make a simple array of fruits.

```javascript
fruitsArray = ["apples", "bananas", "oranges", "peaches", "berries"]
```

We have made an array called `fruitsArray` having five items, right? Let’s print out all items through for loop.

```javascript
for(let i = 0; i < fruitsArray.length; i++){
console.log(fruitsArray[i]);
}
```

Above for loop give us following output.(checked for chrome console)

```javascript
apples
bananas
oranges
peaches
berries
```

**forEach loop**
	In our for loop we got all the items(that were fruits) one by one. Now let’s head over to forEach loop to know how it is handling things.

```javascript
fruitsArray.forEach(item => {
console.log(item);
})
```

forEach loop is iterating on all items present in `fruitsArray` and printing them out using `console.log(item)` after each iteration. Word `item` is just a parameter that represents value of an index in `fruitsArray`. This is not fixed, you can use any other of your own instead of this.
Here is the output(same as our previous for loop);

```javascript
apples
bananas
oranges
peaches
berries
```

Now let’s talk about the new loops **(I guess you’re waiting for this!)**

**for of loop**

```javascript
for(item of fruitsArray){
console.log(item);
}
```

On first iteration, this loop is saying, hey give me first item of fruitsArray then after first iteration give me second item and so on this iteration process continues until last item of fruitsArray.
It has same output as for previous for and forEach loop.

**for in loop**
	for in loop is such loop that is not for arrays, it is for objects. Actually it is used to print out properties of objects. Let’s take an example;

```javascript
const fruitsQuantity = {
apples:5,
oranges:10,
grapes:20
}
```

We have an object called `fruitsQuantity` that has properties as different fruit names. Along with every property there is corresponding number that shows the quantity of each property.
Now let’s print out all properties of this object.

```javascript
for(items in fruitsQuantity){
console.log(items);
}
```

This loop give us all properties of fruitsQuantity object. See output below.

```javascript
apples
oranges
grapes
```

For in loop has not kind of iterating process. Because we never heard iteration on objects, we heard iteration on arrays or strings. For me it seems okay for understanding.

After all this discussion, we were just talking about how these loops were working. Now lets talk about some differences.
**for loop** takes more time and space while writing code and its Syntax is confusing if we have many lines of code.
**forEach loop** seems okay to write while we are saying that hey give me all items or indexes on each iteration. This seems nice.
**for of loop** is actually better than for each loop while tracing the code for understanding, it is just saying hey give me items of an array one by one. And also it takes less space while writing. A beginner or novice doesn’t feel confusion while reading for of loop.
**for in loop** working is similar to for of loop. Difference is, for of loop is used for arrays and strings whereas for in loop is used for objects. for in again is simplified version to comprehend the code.

##Conclusion
See, the Conclusion here is that with the passage of time languages syntax is becoming user friendly so that when a person write or trace the code he or she can easily comprehend it.

*(Note: This is my first post on DEV, if there is any mistake let me know. I like DEV community and will learn from you people how to write good stuff.)*
That's it.

__Always Learn Right and Carry on the Learning Process!🙂🥦💻__