Contact Information

KodeBlog

We're Available 24/ 7. Drop us an email.

JavaScript For Loop

The for loop is used to execute the same code a number of predefined time. for example, you may want to execute the same 10 times. The for loop allows you to accomplish this. Use cases where you may need to do this include when you receive data from an API and you know it has 100 items. You may need to loop through the items 100 times so that you can write them to the local database.

Topics to be covered

We will cover the following topics in this lesson

Lesson Prerequites

For you to successfully complete this lesson, you should have the following requirements

  • NodeJS - we will be executing JavaScript files directly using NodeJS from the command line. Alternatively you can execute the files in the web browser but that takes a a little more time and involves working with multiple programs.
  • Web Browser - a web browser can be used as an alternative to executing JavaScript files that we will be working with.
  • Visual Studio Code - we will be using it as the code editor. It comes with a built-in terminal that will allow us to easily execute JavaScript code from within the text editor. You can also use any code editor that you prefer.
  • JavaScript Basics - this is an added advantage and not mandatory. We will explain every piece of code covered in these lessons.

Lesson Practical Project Setup

For you to successfully execute the code in this example, you will need to have the following project directories

Create a new directory javascript-for

Create the file for.js in the directory javascript-for

The project setup should be as visualized below

javascript-for
-for.js

Open the directory javascript-for in Visual Studio Code or your favorite code editor

JavaScript for loop syntax

The syntax for the for loop is as follows

for (initialize counter; condition; increment counter){
    //do something
}

HERE,

  • for (initialize counter; condiotion; increment counter){... the for keyword is used to start the for loop. the first parameter is the counter that we initialized to a starting value. the second parameter is the condition that we want to evaluate. The third parameter is used to increment the counter.

JavaScript for loop example

Let's now create a simple example that generates odd numbers between 1 and 10. Open the file for.js and add the following code

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

HERE,

  • for (i = 1; i < 10; i++){...} start the body of our for loop. The variable i is the counter variable that we initialize to the value 1. i < 10 is the condition that we want to evaluate. i++ increments our counter variable by 1.

open the terminal in visual studio code and run the following command

node for.js

You should be able to get the following results

1
2
3
4
5
6
7
8
9

The condition that we set in the for loop is set to execute only when the value of i is less than 10. When the value becomes greater than 10, the execute of the for loop code is terminated.

JavaScript Break statement

Ideally, the for loop should be executed until the condtion that has been set becomes false. but they are times when you might want to terminate the execution of the loop prematurely. this is where the break statement comes in handy.

Let's look at a pratical example.

for (i = 0; i < 50; i++){
    console.log(i);

    if (i > 13){
        break;
    }
}

HERE,

  • for (i = 0; i < 50; i++){...} defines a for loop that is to execute as long as the value of the counter variable is less than 50.
  • if (i > 13){...} sets a special condition that checks if the value of the counter variable is greater than 13.
  • break; the break statement is used to terminate the for loop prematurely.

executing the above code produces the following result

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Notice that even if we set our for to execute as long as the counter is less than 50, our loop only executed until the counter was 14.

The break statement is very useful when during the execution of the loop, a special condition occurs like a runtime error and you would like to abort the process and not continue.

JavaScript Continue Statement

The continue statement is used to skip loop execution and move to the next step. Let us look at a practical example. We will create a program that prints numbers between 0 and 4 but we will not print the value 3.

add the following code to for.js.

for (i = 0; i < 5; i++){
    console.log(i);

    if (i == 3){
        continue;
    }
}

HERE,

  • for (i = 0; i < 5; i++){...} defines a for loop that is set to execute as long as the value of the counter variable i is less than 5.
  • if (i == 3){...} sets a condition that checks if the value of i is 3. the continue statement is used to jump to the next step and skip the rest of the code that is below the continue statement.

executing the above code produces the following results

0
1
2
3
4

JavaScript application generate odd numbers between 1 and 100

We will now create a simple program that will generate odd numbers between 1 and 100. we will use the continue statement to skip even numbers.

create a new file odds.js in the project directory

add the following code to the new file

for (i = 0; i< 100; i++){
    if (i % 2 == 0){
        continue;
    }

    console.log(i);
}

HERE,

  • for (i = 0; i< 100; i++){...} sets a for loop that should be executed as long as the value of the counter variable is less than 100.
  • if (i % 2 == 0){...} uses the modulus operator to check if the value of counter is divisible by 2 without giving a remainder. if that is true then we continue to the next number
  • console.log(i); prints the value of i in the terminal.

open the terminal and run the following command

node odds.js

You should be able to get the following results

1
3
5
.
.
.
99

Summary

The for loop is useful when you know exactly how many times you want to execute the same piece of code. the for loop uses a counter variable to keep track of how many times it has been executed. the counter variable is incremented after every execution. the break statement is used to terminate the loop prematurely while the continue statement is used to skip the step when a set condition becomes true.

Author: Rodrick Kazembe

Rodrick is a developer who works on Desktop, Web and Mobile Applications. He is familiar with Python, Java, JavaScript, C++, C#, Kotlin, PHP, Python and the list goes on. Rodrick enjoys sharing knowledge especially when it comes to technology.

JavaScript Switch Statement

JavaScript While Loop

Leave A Reply