JavaScript For Loop, forEach and jQuery each Method

Last Updated on by in JavaScript

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++){

/* Loop output

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 is a required argument. It represents the value of the current item in an array.

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

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

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

/* Loop output

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=""></script>
   // Your code goes here

jQuery each() Method – Parameter Values

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

The index represents the index position of the selector 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*/

    $(".nav a").each(function(){


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.

Digamber - Author

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.