Skip to main content

Command Palette

Search for a command to run...

Know the Difference between For loop & forEach loop in JavaScript

Updated
3 min read
Know the Difference between For loop & forEach loop in JavaScript
S

I am self-taught Full stack Developer learning through online resources. I would love to connect with people and have a chat. The majority of my learning comes from online resources. I started this blog so that I can document my journey as a self-taught developer, its hardships, tips, and tricks.

Hello everyone hope you are all doing well, My name is Surya L.

The aim of this blog is to teach you Know the Difference between For loop & forEach loop in JavaScript.

for Loop

  • JavaScript for loops are used to iterate through arrays or elements for a specified number of times. If a certain number of iterations is known, it should be used.

  • Faster in performance.

  • The break statement can be used to come out from the loop.

  • Syntax:
for (initialization; condition; increment)  
{  
   // code to be executed
}
  • The parameters are the iterator, counter, and incrementor.

  • It works with the await keyword.

  • For Example:

    for (let i = 1; i <= 5; i++)
    {
    console.log(i);
    }
    
  • Output

    1
    2
    3
    4
    5
    

forEach Loop

  • The forEach() method is also used to loop through arrays, but it uses a function differently than the classic “for loop”. Each element of the array is passed a callback function together with the parameters given below:

  • Current Value (required): The value of the current array element

  • Index (optional): The index number of the current element
  • Array (optional): The array object the current element belongs to

  • Syntax:


array.forEach(function(paramater) {
//code to be executed
});
  • For example:
alpha = ["a", 'b', "c", 'd', 'e'];

alpha.forEach((number, index) => {
    console.log('Index: ' + index + 
                ', Value: ' + number);
});
  • Output
Index: 0, Value: a 
Index: 1, Value: b 
Index: 2, Value: c 
Index: 3, Value: d 
Index: 4, Value: e
  • The parameters are the iterator, index of item, and array to iterate.

  • The break statement cannot be used because of the callback function.

  • We use a callback function to loop through the array by using the forEach method.

  • It is slower than the traditional loop in performance.

1. Program to display the string length using for loop

let a =["Apple","Banana","Cupid","Diamond"];
for(let i=0;i<a.length;i++)
{
    console.log(a[i],a[i].length);
}
  • Output
Apple 5
Banana 6
Cupid 5
Diamond 7

2. Program to display the string length using forEach loop

let a =["Apple","Banana","Cupid","Diamond"];
a.forEach((items)=>
{
    console.log(items,items.length);
});
  • Output
Apple 5
Banana 6
Cupid 5
Diamond 7

Conclusion:

  • JavaScript for loops are used to iterate through arrays or elements for a specified number of times. If a certain number of iterations is known, it should be used.

  • The parameters are the iterator, counter, and incrementor.

  • Syntax:

for (initialization; condition; increment)  
{  
   // code to be executed
}
  • The forEach() method is also used to loop through arrays, but it uses a function differently than the classic “for loop”. Each element of the array is passed a callback function together with the parameters.

  • Syntax:


array.forEach(function(paramater) {
//code to be executed
});
  • forEach parameters are Current Value (required) Index (optional) Array (optional).

Thanks for reading the blog. Do let me know what you think about it.

You can connect me with Showwcase Twitter Blog GitHub Contact Me

Interview-Prep

Part 3 of 5

This Series is all about the interview question asked in Your Web developer Interview.

Up next

Know the Difference Between Slice( ) and Splice( ) in JavaScript

With Awesome Examples.

More from this blog

S

Surya's Web Blogs

68 posts

Hello Everyone ,I am SURYA. This blog Will be all About Full stack dev things along with tips and tricks. And a glimpse of the twists of my Personal Life