Easy understanding of JavaScript for loop

Last update: 01 - 11 - 2023

What is a loop in JavaScript?

Loops are nothing more than a repetition of a task or action a certain number of times.

In JavaScript loops are the repetition of a code that is executed through a structure called for. This is not the only way to make loops in JavaScript but it is the structure we are going to focus on in this post.

There is a more technical term in programming for using this type of task and it is called iteration; as for loops are widely used to traverse or print an array.

A JavaScript for loop example

for (let i = 0; i <= 10; i++){
  console.log(i);
}

Understanding the JavaScript for loop syntax

The for loop in the example above is the most common (And the most popular) iteration within the for family. It consists of three parts:

(let i = 0;

This is where you determine from which point, index or value the loop will start. There are cases where the initialization of the variable starts outside the for structure.

i <= 10;

The second part is used to indicate how many times this loop has to be repeated using the comparison operators.

i++)

The last part of the JavaScript for loop is where we determine what type of operation to apply to the variable we initialized at the beginning of the structure. These operations can be incrementing (++ / += 1) or decrementing (-- / -= 1).

//Just imagine a for structure here 😆{
  console.log(i);
}

Everything inside the code block (inside the curly brackets) is what will be executed as many times as we have indicated in the condition.

The result of this example is that it will show by the console of the navigator the numbers from 1 to 10.

The reason why a for loop is used is to avoid repetitive tasks.

You will realize throughout your studies or career as a developer that there is data that repeats a pattern of behavior and it is up to you to use the right tool to optimize that task. Let's see an example in the best style of As Seen on TV, lol 😂. The typical example of printing a multiplication table.

let factor = 1;

console.log(factor*1);
console.log(factor*2);
console.log(factor*3);
console.log(factor*4);
console.log(factor*1);
console.log(factor*5);
console.log(factor*6);
console.log(factor*7);
console.log(factor*8);
console.log(factor*9);
console.log(factor*10);

Now using a for loop.

let factor = 1;

for (let i = 0; i <= 10; i++){
  console.log(factor*i);
}

As I mentioned at the beginning of this post, JavaScript for loops can be used to iterate arrays. In this link I explain in more detail how to use a for loop in an array. Check it out.

Using a foreach loop in JavaScript

The for each loops are very effective for traversing an array because they iterate directly over the elements contained in the array, that is, you do not have to indicate how many times the loop has to do as in the for loop by adding the length method and it has a more direct syntax to execute this block of code.

ForEach syntax example

The forEach loop is a method for arrays, so we will use an array example to see how it is composed:

//Avatars cycle

let elements = ["Water","Earth","Fire","Air"];

//Using the forEach loop

elements.forEach(element => {
  console.log(element);
});

The parameters inside the for each loop will be a callback function that in turn will have as parameter the value to iterate. It can be any name you want but the standard is that it is the singular of the array to iterate.

The function can also receive two more parameters that will indicate the index and the array being iterated.

let elements = ["Water","Earth","Fire","Air"];

elements.forEach((element, index, array) => {
  console.log(element, index, array);
});

//Output "Water",0,["Water","Earth","Fire","Air"] First iteration
//Output "Earth",1,["Water","Earth","Fire","Air"] Second iteration
//Output "Fire",2,["Water","Earth","Fire","Air"] Third iteration
//Output "Air",3,["Water","Earth","Fire","Air"] Last iteration

Using a JavaScript for in loop

The For in loop has a very simple and easy to remember syntax. This type of for, used in a "simple" way, will only print the indexes of the array assigned to it.

let elements = ["Water","Earth","Fire","Air"];

for (element in elements){
  console.log(element);
}

//Output: index 0,1,2,3

Although you can manipulate the data within this loop to print the values contained in the array and not its indexes.

let elements = ["Water","Earth","Fire","Air"];

for (elementinelements){
  console.log(elements[element]);
}

//Output: Water, Earth, Fire y Air

Using the JavaScript for of loop

The JavaScript for of loop has the same syntax as its for in sibling, but with this loop it is easier to print the values of an array.

let elements = ["Water","Earth","Fire","Air"];

for (elementofelements){
  console.log(element);
}

//Output Water, Earth, Fire y Air
Back