Home Javascript JavaScript For Loop, forEach and jQuery each Method

JavaScript For Loop, forEach and jQuery each Method

by Shahriar Sagor

Hello Dev, today now in this post i will show JavaScript For Loop, forEach and jQuery each Method. We are going to learn about JavaScript for loop, forEach and jQuery’s each() Loop. Loops are the basic fundamental of programming, loops are handy when it comes to run over a block of code number of times while a particular condition is true.

1. How to use For Loop in Javascript?

The for loop is very useful when you already know how many times a piece of code should run. In JavaScript for loop iterates through each and every item in an array. Arrays in JavaScript are zero-based, that means array’s first item’s index number will be 0 and so on as mentioned below in the screenshot.

Let’s understand for loop

The below block of code sets up a loop which contains 3 conditions within.

for (condition 1; condition 2; condition 3) {
    // Execute your code here
}

condition 1
This condition runs only once before the execution of the code block.

condition 2
This condition sets up the statement for executing the code block

condition 3
This condition runs every time after the code has been executed in the for loop.

Examples For Loop

// Example 1
for (i = 0; i < 5; i++) {
    console.log('Hello World', + i);
}
/* Loop output
Hello World 0
Hello World 1
Hello World 2
Hello World 3
Hello World 4
*/

In this example, I will be iterating through cars array and print cars items in the console using JavaScript’s for loop method.

// Example 2
var carsArray = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford'];
for(let i = 0; i < carsArray.length; i++){
   console.log(carsArray[i]);
}
/* Loop output
Tesla
Toyota
BMW
Honda
Ford
*/

2. How to use forEach Loop in Javascript?

Javascript forEach method calls a provided function for each and every element in an array.

arrayName.forEach(function(currentValue, index, array), thisValue)

JavaScript forEach() Method – Parameter Values

currentValue
currentValue is a required argument. It represents the value of the current item in an array.

index
index is an optional parameter. It represents the current element in an array.

array
array is an optional parameter. This array represents the current element which belongs to the array object.

thisValue
this parameter is an optional parameter. It represents the used values when executing the callback

Example forEach method

// Example 2
var namesArray = ['Olivia', 'Ruby', 'Emily', 'Grace', 'Jessica'];
// forEach method
namesArray.forEach(function(data){
   console.log(data);
})
/* Loop output
Olivia
Ruby
Emily
Grace
Jessica
*/

3. How to work with jQuery each Loop?

jQuery’s each() method is very useful when it comes to loop through each and every item of the targeted jQuery object. It specifies a method to run for each matched item in an array in jQuery.

/* Paste jQuery CDN URL in footer on above all js files */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("selector").each(function(index,element){
   // Your code goes here
})

jQuery each() Method – Parameter Values

function(index,element)
function(index, element) is required value in jQuery’s each loop. It runs for every matched item.

index
The index represents the index position of the selector element.

element
The element represents the current element of the selector. We can also use this method for it.

Example jQuery each

/* Click on header and show text of every elemnet wrapped within ".nav a" class using jQuery each method*/
$("#header").click(function(){
    $(".nav a").each(function(){
        alert($(this).text())
    });
});

Read Also: How to Create Password Show / Hide Toggle Button in React

Thanks for read. I hope it help you. For more you can follow us on facebook.

close

You may also like