DEV Community

Himanshupal0001
Himanshupal0001

Posted on

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)       })
Enter fullscreen mode Exit fullscreen mode

Output

Hari Mayank Preet Agam Manpreet Sukhpreet Keshav Sourav
Enter fullscreen mode Exit fullscreen mode

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     }
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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)     }
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)