Introduction to JavaScript – Control Flow

Introduction to JavaScript – Control Flow

In this lesson, we’ll explore how we can use the building blocks of JavaScript to write programs that make decisions. Control flow statements enable JavaScript programs to make decisions by executing code based on a condition. If a given condition is true, we execute one block of code. If the statement is false, we execute another block of code.

For instance, if we were making a game in which the user had to choose which door to enter, we’d need a way for the program to know what to do once the user was in the next room.

1. Understanding Control Flow Statements

Control flow statements are used to control the order in which your code executes. The primary control flow statements in JavaScript are:

• if statements
• else statements
• else if statements
• switch statements

Example 1: Basic if Statement

let isSunny = true;

if (isSunny) {
  console.log('Wear sunglasses!');
}
    

In this example, if the isSunny variable is true, the message “Wear sunglasses!” will be printed to the console.

Example 2: if...else Statement

let isRaining = true;

if (isRaining) {
  console.log('Take an umbrella!');
} else {
  console.log('Enjoy the sunshine!');
}
    

In this example, if isRaining is true, the message “Take an umbrella!” will be printed. If isRaining is false, the message “Enjoy the sunshine!” will be printed.

Example 3: if...else if...else Statement

let temperature = 30;

if (temperature > 30) {
  console.log('It\'s a hot day!');
} else if (temperature > 20) {
  console.log('It\'s a warm day!');
} else {
  console.log('It\'s a cool day!');
}
    

In this example, if the temperature is greater than 30, it will print “It’s a hot day!”. If the temperature is between 21 and 30, it will print “It’s a warm day!”. Otherwise, it will print “It’s a cool day!”.

2. Practical Examples

Let’s apply control flow statements in practical scenarios.

Example 4: User Greeting

In this example, we will use control flow statements to display different messages based on the user’s name and their knowledge of JavaScript.

let userName = 'Bernie'; // Set your name in this variable
let knowsJavaScript = false; // Set this boolean to true or false and see results

if (knowsJavaScript && userName) {
  console.log('Great, ' + userName + '! Get ready to practice your JavaScript!');
} else if (knowsJavaScript) {
  console.log('Great! Get ready to practice your JavaScript!');
} else if (userName) {
  console.log('Great, ' + userName + '! Get ready to learn something new!');
} else {
  console.log('Great! Get ready to learn something new!');
}
    

Output:
Great, Bernie! Get ready to learn something new!

Now, change knowsJavaScript to true and see how the output changes.

let userName = 'Bernie'; // Set your name in this variable
let knowsJavaScript = true; // Set this boolean to true or false and see results

if (knowsJavaScript && userName) {
  console.log('Great, ' + userName + '! Get ready to practice your JavaScript!');
} else if (knowsJavaScript) {
  console.log('Great! Get ready to practice your JavaScript!');
} else if (userName) {
  console.log('Great, ' + userName + '! Get ready to learn something new!');
} else {
  console.log('Great! Get ready to learn something new!');
}
    

Output:
Great, Bernie! Get ready to practice your JavaScript!

3. Advanced Control Flow

As we advance, we can explore more complex control flow structures, such as nested control statements and switch statements.

Example 5: Nested if Statements

let age = 25;
let hasDriverLicense = true;

if (age >= 18) {
  if (hasDriverLicense) {
    console.log('You can drive!');
  } else {
    console.log('You need a driver\'s license to drive.');
  }
} else {
  console.log('You are too young to drive.');
}
    

Output:
You can drive!

Example 6: switch Statement

let day = 'Monday';

switch (day) {
  case 'Monday':
    console.log('Start of the work week!');
    break;
  case 'Wednesday':
    console.log('Midweek blues!');
    break;
  case 'Friday':
    console.log('Weekend is here!');
    break;
  default:
    console.log('It\'s just another day!');
}
    

Output:
Start of the work week!

Conclusion

Control flow statements are crucial for making decisions in your JavaScript programs. By mastering if, else, else if, nested statements, and switch statements, you can create more dynamic and interactive applications.

Practice Exercise

Try creating a simple program that uses control flow statements to check if a user-provided number is positive, negative, or zero.

let number = prompt('Enter a number:');

if (number > 0) {
  console.log('The number is positive.');
} else if (number < 0) {
  console.log('The number is negative.');
} else {
  console.log('The number is zero.');
}
    

Experiment with different inputs to see how the program responds. Happy coding!