JavaScript has several control structures that allow you to specify the flow of execution in your program. In this article, we will see the following control structures
We will go through each one of these in detail with examples.
Conditional statements allow you to execute a block of code only if a certain condition is met. Here we will explore the if..else statement with several options.
The if statement allows you to execute a block of code if a certain condition is true. The syntax of If condition is shown below
if (condition) {
// code to be executed if the condition is true
}
The following example shows the usage of the if statement.
let x = 10;
if (x > 5) {
console.log("x is greater than 5");
}
The if...else statement allows you to execute a block of code if a condition is true, and another block of code if the condition is false. The syntax of if..else statement is given below.
if (condition) {
// code to be executed if the condition is true
} else {
// code to be executed if the condition is false
}
An example usage of the if else statement is illustrated below.
let x = 10;
if (x > 5) {
console.log("x is greater than 5");
} else {
console.log("x is not greater than 5");
}
This is the third variant of the if statement. The if...else if...else statement allows you to specify multiple conditions and execute different blocks of code depending on which condition is met. The syntax is shown below.
if (condition1) {
// code to be executed if condition1 is true
} else if (condition2) {
// code to be executed if condition1 is false and condition2 is true
} else {
// code to be executed if condition1 and condition2 are false
}
The below code shows the usage of this if variant.
let x = 10;
if (x > 15) {
console.log("x is greater than 15");
} else if (x > 5) {
console.log("x is greater than 5 but not greater than 15");
} else {
console.log("x is not greater than 5");
}
Loops in JavaScript allow you to execute a block of code multiple times. There are different types of loops in JS that are:
The for loop allows you to specify a loop that will execute a specified number of times. The syntax of for loop is shown below.
for (initialization; condition; increment) {
// code to be executed
}
The below for loop code illustrates the usage.
for (let i = 0; i < 5; i++) {
console.log(i);
}
The while loop allows you to specify a loop that will execute as long as a certain condition is true. The syntax of the while loop is
while (condition) {
// code to be executed
}
The code below shows the usage of a while loop.
let x = 0;
while (x < 5) {
console.log(x);
x++;
}
The do...while loop is similar to the while loop, except that the code block is guaranteed to execute at least once, because the condition is checked at the end of the loop rather than at the beginning. The syntax of the Do..While loop is
do {
// code to be executed
} while (condition)
The following code below shows the usage of do..while loop.
let x = 0;
do {
console.log(x);
x++;
} while (x < 5)
In this article, we have seen the various control structures and their usage in JavaScript. These conditional statements and loop statements are widely used in almost all web projects. So, learn these control statements thoroughly.