Control Flow in JavaScript 

Control Flow is the technical term for specifying the sequence in which a code executes. In this article, we will deeply discuss the three structures that influence the control flow.

What is Control Flow? 

Have you ever wondered what goes on behind the scenes while a program is running? Of course, most of us know that you will have to write lines of code to achieve the desired output. However, not everyone knows the answer to ‘How?’.

Originally, code executes in a top-down manner, unless the code control changes its course when it meets with other structures such as: 

1. Loops
2. Conditionals
3. Functions

Below, we will discuss what each of these control flow structures is. 

Loops 

In computer programming, loops are a conditional statement that repeats the given task until the given condition is met. Loop statements are also known as iteration statements.

There are three types of loops

• For 
• While
• Do while

• For Loop

The for loop is one of the most commonly used loop structures in most programming languages, not just JavaScript. It is also simple to use.

Until the provided condition is met, the for loop executes blocks of code. So let’s have a look at the syntax in more detail:

Syntax of For loop:

for (initialExpression; condition; updateExpression) {
    // for loop body
}

Here,  

• For refers to the for conditional loop statement
• The initial variable from which the execution process begins is referred to as initialExpression.
• Condition is where the conditions are written.
• The initial variable is either increased or decreased in the updateExpression.

While executing, the control moves to the updateExpression and gets updated and then moves to the condition. If the updated variable is true, the process continues till it reaches false.

• While Loop

In terms of execution, there is not much of a difference between a while loop and for loop. While loop is similar to for loop, in the fashion that it repeats the process until the conditions are met.

Syntax of while loop:

while (condition) {
    // body of loop
}

Here,

• The while refers to the while conditional statement.
• Condition refers to the condition which is meant to be met.

The initial variable is given before the while statement. The execution ends when the conditions are met.

• Do-while Loop

Like how the name is similar, the concept of do-while loop is similar to while loop. Except, like the traditional way of looping, the do-while loop executes the statement first then checks the condition.

Syntax of Do-while loop:

do
{
// body of loop
} while (condition)

Here,

• The do represents that the loop structure is of do while.
• The condition is where the control checks if the variable fulfils it.

Conditionals

Conditional statements are decision making statements. In programming, developers will have to deal with multiple hypothetical scenarios. However, if you are going to write codes that execute the correct output, you will end up with the programmer writing tons of codes or, worse, none at all.

To avoid such scenarios, we use conditional statements. In a conditional statement, the programmer writes several codes which will be executed if the condition is met. If the condition is not met, then another statement is executed. 

Sounds a lot better than writing a thousand lines of code?

The most common conditional statements used in JavaScript are:

• If 
• Else if
• if…else
• Switch

• If Statement

The if statement is the fundamental conditional statement. It comes with one condition and a block of statements within it. 

Syntax of if statement:

if (expression) {
   Statement(s) // if the expression is true
}

If the condition is true, the code is executed. If not, then the control moves on to the following code.

• If…else Statement

The if…else statement also is similar to if, with a twist. Instead of the control moving on to another line after the condition is proved, the given else statement is executed.

Syntax of if…else statement:

if (expression) {
   Statement(s) // if the expression is true
} else {
   Statement(s) // if expression is false
}

The first statement is released when the condition is proved; if not, the else statement is executed. Then the control moves on to the following code.

• Else if Statement

The else if statement is very similar to if..else, but more practical. The mechanism of else it is given through the syntax below:

Syntax of else if Statement:

if (expression 1) {
   Statement(s) // if expression 1 is true
} else if (expression 2) {
   Statement(s) // if expression 2 is true
} else if (expression 3) {
   Statement(s) // if expression 3 is true
} else {
   Statement(s) // if no expression is true
}

In contrast to if-else, we can include a variety of conditions in else if. The control checks the expression from top to bottom, goes to the next if one is false, and eventually finishes with the else statement, which acts as a default statement when none of the conditions are met.

• Switch Statement 

The switch statement looks a lot like an if statement; however, unlike if and else if, which check the condition on each line, the switch tests the condition once and then performs the relevant expression. A default statement is released if the condition isn’t met.

Syntax of switch statement:

switch (expression) {
   case condition 1: statement(s)
   break;
   case condition 2: statement(s)
   break;
   case condition n: statement(s)
   break;
   default: statement(s) // executed when none of the conditions are met
}

The break statement after every case statement is to let the control know the end of the statement. If the break is not added, the control will end up executing every statement. 

Functions

When you write a specific block of code for a certain purpose, that code will be needed in various places of the code, which is a typical programming issue. Therefore, writing the same code repeatedly is not a wise option, which is why functions exist.

Functions eliminate the need for repeating the same code. All you will need to do is write a function then use it whenever you want at any part of the program.

Syntax of Functions:

<script type = "text/JavaScript">
   <!--
      function functionname() {
         statements
      }
   //-->
</script>

To use or invoke the function block in a different part of the program, you can simply call the function.

Conclusion

In JavaScript, the control flow is fluid; the only times it is disrupted are when the statements mentioned above are used. 

Control statements are quite helpful, but programmers must use them carefully and in accordance with proper syntax to prevent complications. We believe you have a better understanding of what control statements are.

Learn some coding basics for free

If you want to learn some of the basics of software development for free, try this free 5 Day Coding Challenge. On it, you will learn the basics of HTML, CSS and JavaScript. It takes just one hour a day over five days. Register now through the form below. Alternatively, if you want to learn full stack software development, you can read more about our programme here.