Work with JavaScript For Loop, forEach and jQuery each Method

Rawat Digamber /  Read Time: 3 minutes

JavaScript For Loop

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.
JavaScript Array Diaphragm

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.

To make jQuery work on your project, don’t forget to add below jquery CDN URL. jQuery is dependent on external dependencies.

/* 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)
A 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())
    });
});

Conclusion

Looping over arrays is a primitive language construct in software development. JavaScript has some essential ways to loop through over an array. jQuery is a JavaScript library which also provides some best utilities functions to manage your programme.

As a programmer, this is your task to recognize which method or technique works best for you.

Written by Digamber

I am passionate about solving real-world problems through algorithms and functional design. I create digital products that make the user’s life easy using the latest programming languages and frameworks. e.g Angular 2+, Firebase Real-time Database, JavaScript, TypeScript, RxJS, Bootstrap, HTML5, CSS3, WordPress etc...