How I Learn JavaScript: Control Flow

How I Learn JavaScript: Control Flow

Definition of Control Flow

Control flow refers to the order in which statements are executed in a program. JavaScript provides several control structures that allow you to control the flow of your code and perform different actions based on certain conditions.

Here are the commonly used control structures:

1. If/else statement

The most basic control structure is the if/else statement. This statement allows you to execute different blocks of code depending on whether a condition is true or false. Here's an example:

In this example, the if statement checks if the value of x is greater than 10. Since this is not true (x is equal to 5), the else block is executed, and the console will log "x is less than or equal to 10".

2. For loop

Another common control structure is the for loop, which allows you to repeat a block of code a certain number of times. Here's an example of a for loop that iterates over an array of numbers and calculates the sum of all even numbers:

In this example, we declare an array called numbers that contains ten integers from 1 to 10, and a variable called sum that we will use to store the sum of all even numbers.

The for loop iterates over the numbers array using a loop counter i that starts at 0 and increments by 1 with each iteration until i is equal to numbers.length (the length of the numbers array).

Inside the for loop, we use an if statement to check if the current element in the numbers array is even (i.e. divisible by 2 with a remainder of 0). If the condition is true, we add the current number to the sum variable.

After the for loop finishes, we log the final value of the sum to the console using a string template that includes the message "The sum of even numbers is 30"

3. While loop

JavaScript also provides a "while" loop, which allows you to repeat a block of code as long as a certain condition is true.

let i = 0;

while (i < 5) {

console.log(i);

i++;

}

In this instance, the while loop will execute the console.log() statement as long as the value of i is less than 5. Each time through the loop, the value of i is incremented by 1.

Here's another example of a while loop that generates random numbers until a certain condition is met:

In this example, we declare two variables: randomNumber, which we will use to store a random number generated by the Math.random() method, and counter, which we will use to keep track of the number of random numbers generated.

The while loop continues to generate random numbers and print them to the console until one of two conditions is met: either counter reaches 5, or randomNumber is less than 0.5. The first condition ensures that the loop doesn't run indefinitely, while the second condition provides an example of a more specific termination condition.

Inside the while loop, we first generate a new random number and store it in the randomNumber variable. We then log the current value of randomNumber to the console using console.log(), which prints it to the browser's console.

After logging the random number, we increment the value of counter by 1 to keep track of the number of random numbers generated.

Finally, after the while loop finishes, we log a message to the console that indicates how many random numbers were generated in total.

4. Switch statements

Switch statements are another control structure in JavaScript that allows you to execute different blocks of code depending on the value of a variable. Here's an example

In this example, the switch statement checks the value of the "day" variable and executes a different console.log() statement depending on the value. If the value is "Monday", the first block of code will be executed, and so on.

Today, I had the chance to explore Javascript control structures in more depth. If you have any questions about the concepts covered in this article, please don't hesitate to ask.