Javascript Logical Statements and Loops

📣 Sponsor

Logical statements and loops are statements which allow us to do certain things based on conditions. The main types that are used most frequently:

if ... else - lets you do things if something is true, else do something else.
switch - another way to do certain things if certain things are true.
for and while - both of these let you do something many times, known as a loop.

All of these statements work by executing code between two curly brackets {} if a specific statement is true.

If ... else

The if ... else statement is one of the most basic logical statements you can make in Javascript. It tests if something is true, and if it is, it does something. Otherwise, it will try the next part of the statement:


// Lets set x to 1.
let x = 1;

if(x === 1) {
    // Since x is 1, the code in this section will run
} else if(x === 2) {
    // This will not run, since x is 1.
} else {
    // This will not run, since x is 1.
}

If we then change the value of our x variable, we can change which code runs.

Switch

A switch statement is another way to do conditional statements. It let's you check if something is set to a particular value, and then runs the code appropriately.


let aVariable = 'my text';

switch(aVariable) {
    case 'my text': 
    // This runs! Run some code here, since our variable is set to 'my text'
    break;
    case 'other text': 
    // This code won't run, since our variable is set to 'my text'
    break;
    case 'another example of text': 
    // This code won't run, since our variable is set to 'my text'
    break;
    default:
    // This runs if none of the other cases are true.
}

Let's decompose this. We are switching our variable, so we start with switch(aVariable). Then we have a set of cases. If our variable is set to the text after the keyword case, then the code on the following lines is run.

We finish the case with break;. This is optional. We can leave break out, but if we don't, the code will check all other cases, which may slow down the execution time of your code.

Loops and Iterations

A loop is a simple way to do something many times in Javascript. There are two big ways to run loops in Javascript, those being for and while. Let's start with while.

While

While checks whether a statement is true or not. While it is true, it will run over and over again. Here is an example:


let i = 0;

while(i < 10) {
    // Run some code here
    // Add 1 to i every time we run this loop.
    ++i;
}

Above, we have a variable i which is set to 0. While i is less than 10, the code within will run over and over again. The code will therefore run 10 times. If i never goes above 10 then the while loop will never end! This can break your code.

To overcome this, we add the line ++i to add 1 to i every time the loop runs. After running 10 times, the while loop will stop running.

For

For is another way to run a loop. It combines the variable, check, and ++i into one single line:


for(let i = 0; i < 10; ++i) {
    // Run some code here
}

While and for are two ways to write the same code, so which you choose to use is up to you.

do ... while

The final loop we will look at is do ... while. The difference between this and other loops is it will always run at least once, even if the logical statement is false. On the other loops, if the logical statement is false, the loop will not run at all. A do ... while loop looks like this:


let i = 0;
do {
    // do some code here
} while (i > 0);

The logical statement here, i > 0 is actually false. The code between the curly brackets will still run once, even though this logical statement is false.

Last Updated 1623702508245