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].
Top comments (0)