The difference between forEach, for..of and for..in
Published: 2022-02-14 13:05:39

Hi folks, As most of us as beginner may get confuse between these different loops while learning Javascript. Today I'm gonna explain What's the difference between different for loops in js.

## forEach()
`Syntax` -  forEach(function()){}

forEach() function take a function as an argument. It used to iterate over an array of objects in ordered manner.
Example: 

`Code`
```
const Arrayobj = [
    {name:"Hari", age:"23", position:"Junitor", Salary: "$23k"},
    {name:"Mayank", age:"20", position:"Social_Media Analyst", Salary: "$27k"},
    {name:"Preet", age:"25", position:"Digital Market Analyst", Salary: "$32k"},
    {name:"Agam", age:"23", position:"Clerk", Salary: "$25k"},
    {name:"Manpreet", age:"21", position:"Accountant", Salary: "$35k"},
    {name:"Sukhpreet", age:"24", position:"Dev I", Salary: "$67k"},
    {name:"Keshav", age:"26", position:"Dev II", Salary: "$85k"},
    {name:"Sourav", age:"22", position:"Dev III", Salary: "$100k"}
    ]


    Arrayobj.forEach((item)=>
    {
        console.log(item.name)   
    })
```

`Output`

```
Hari
Mayank
Preet
Agam
Manpreet
Sukhpreet
Keshav
Sourav
```
Note that forEach() won't be useful in case of objects. It do not iterate over object or object of objects. 

## For..in Loop

To iterate over objects for..in is introduced in Js. It return the keys of object in js.

`Syntax` - for(const property in obj){}

Example:-
`Code`
```
    const obj = {
    Employee1:{name:"Hari", age:"23", position:"Junitor", Salary: "$23k"},
    Employee2:{name:"Mayank", age:"20", position:"Social_Media Analyst", Salary: "$27k"},
    Employee3:{name:"Preet", age:"25", position:"Digital Market Analyst", Salary: "$32k"},
    Employee4:{name:"Agam", age:"23", position:"Clerk", Salary: "$25k"},
    Employee5:{name:"Manpreet", age:"21", position:"Accountant", Salary: "$35k"},
    Employee6:{name:"Sukhpreet", age:"24", position:"Dev I", Salary: "$67k"},
    Employee7:{name:"Keshav", age:"26", position:"Dev II", Salary: "$85k"},
    Employee8:{name:"Sourav", age:"22", position:"Dev III", Salary: "$100k"}
    }

    for (const property in obj)
    {

        console.log(property) //To access keys
    }
    
    
    for (const property in obj)
    {

        console.log(obj[property] ) //To access values
    }
```

`Output`

```
Employee1
Employee2
Employee3
Employee4
Employee5
Employee6
Employee7
Employee8
{ name: 'Hari', age: '23', position: 'Junitor', Salary: '$23k' }
{
  name: 'Mayank',
  age: '20',
  position: 'Social_Media Analyst',
  Salary: '$27k'
}
{
  name: 'Preet',
  age: '25',
  position: 'Digital Market Analyst',
  Salary: '$32k'
}
{ name: 'Agam', age: '23', position: 'Clerk', Salary: '$25k' }
{ name: 'Manpreet', age: '21', position: 'Accountant', Salary: '$35k' }
{ name: 'Sukhpreet', age: '24', position: 'Dev I', Salary: '$67k' }
{ name: 'Keshav', age: '26', position: 'Dev II', Salary: '$85k' }
{ name: 'Sourav', age: '22', position: 'Dev III', Salary: '$100k' }
```

## For..of loop

for..of loop is used to iterate over array object. The difference in forEach() and for..of is that is you don't need to pass a callback function in for..of loop.

`Syntax` - for(const property of obj){}

Example-

`Code`
```
const Arrayobj = [
    {name:"Hari", age:"23", position:"Junitor", Salary: "$23k"},
    {name:"Mayank", age:"20", position:"Social_Media Analyst", Salary: "$27k"},
    {name:"Preet", age:"25", position:"Digital Market Analyst", Salary: "$32k"},
    {name:"Agam", age:"23", position:"Clerk", Salary: "$25k"},
    {name:"Manpreet", age:"21", position:"Accountant", Salary: "$35k"},
    {name:"Sukhpreet", age:"24", position:"Dev I", Salary: "$67k"},
    {name:"Keshav", age:"26", position:"Dev II", Salary: "$85k"},
    {name:"Sourav", age:"22", position:"Dev III", Salary: "$100k"}
    ]

    for(const property of Arrayobj)
    {
        console.log(property)
    }
```

`output`

```
{ name: 'Hari', age: '23', position: 'Junitor', Salary: '$23k' }
{
  name: 'Mayank',
  age: '20',
  position: 'Social_Media Analyst',
  Salary: '$27k'
}
{
  name: 'Preet',
  age: '25',
  position: 'Digital Market Analyst',
  Salary: '$32k'
}
{ name: 'Agam', age: '23', position: 'Clerk', Salary: '$25k' }
{ name: 'Manpreet', age: '21', position: 'Accountant', Salary: '$35k' }
{ name: 'Sukhpreet', age: '24', position: 'Dev I', Salary: '$67k' }
{ name: 'Keshav', age: '26', position: 'Dev II', Salary: '$85k' }
{ name: 'Sourav', age: '22', position: 'Dev III', Salary: '$100k' }
-------------forEach-----------------------
{ name: 'Hari', age: '23', position: 'Junitor', Salary: '$23k' }
{
  name: 'Mayank',
  age: '20',
  position: 'Social_Media Analyst',
  Salary: '$27k'
}
{
  name: 'Preet',
  age: '25',
  position: 'Digital Market Analyst',
  Salary: '$32k'
}
```

`Note to remember` - To remember this you can use verbose as 
for..in === foreign key of objects
for ..of === for value of array objects


## Finish with one liner 
Can use this function to print key value pair in one line

```
Object.entries(obj).forEach(([key, val])=> console.log(key, val));
```

## Bonus Info

Difference between objects and array objects

The main difference between objects and arrays is the index. While objects in array are indexed meanwhile objects use key:value pair structure. 
You can access values of arrays as array.indexName while in objects objects[key].