The difference between forEach, for..of and for..in

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].

Blog

The difference between forEach, for..of and for..in

Himanshupal0001

forEach()

For..in Loop

For..of loop

Finish with one liner

Bonus Info

Join Our Newsletter. No Spam, Only the good stuff.

Related