Tutorials – JavaScript

Chapter 4 – Introduction to JavaScript

 

Control structures in JavaScript are essential for creating dynamic and interactive programs. These structures enable you to make decisions, repeat actions, and execute code based on specific conditions. In Chapter 4 of our JavaScript guide, we’ll explore the world of control structures, including conditional statements, loops, and branching, to help you take your coding skills to the next level.

Introduction to Control Structures

Control structures, also known as control flow or program control, are constructs that allow you to define the order in which statements in your program are executed. They determine how your code responds to different conditions and how it repeats specific actions. Control structures are fundamental for building responsive and interactive applications.

There are three main categories of control structures in JavaScript:

• Sequential Control: Statements are executed in a top-down, sequential order, which is the default behavior in most programming languages. JavaScript follows this control flow by default.
• Selection (Conditional) Control: These structures enable you to make decisions based on conditions, allowing your code to choose between different paths. Common selection control structures include if, else if, and switch.
• Repetition (Loop) Control: Loop structures are used to repeat a block of code multiple times. JavaScript provides various types of loops, including for, while, and do…while.

In this chapter, we’ll dive deeper into each of these control structures and explore practical examples to illustrate their usage.

Selection (Conditional) Control

Selection control structures allow your code to make decisions based on specific conditions. They are essential for executing different blocks of code based on the evaluation of one or more expressions. In JavaScript, the primary selection control structures are the if statement, else if statement, and switch statement.

1. The if Statement

The if statement is one of the most basic selection control structures. It allows you to execute a block of code only if a specified condition is true. If the condition is false, the code block is skipped.

Syntax of the if Statement:

if (condition) {
  // Code to execute if the condition is true
}
Example:
let age = 18;
if (age >= 18) {
  console.log("You are an adult.");
}

 In this example, the code within the if block is executed because the condition age >= 18 is true.

2. The else Clause

The else clause can be combined with the if statement to specify a block of code that should be executed when the condition is false.

Syntax of the if…else Statement: 

if (condition) {
  // Code to execute if the condition is true
} else {
  // Code to execute if the condition is false
}

 Example: 

let age = 15;
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

In this example, since the condition age >= 18 is false, the code within the else block is executed, and “You are a minor.” is logged to the console.

3. The else if Statement

The else if statement allows you to specify multiple conditions and code blocks. It is used when you have more than two possible outcomes.

Syntax of the if…else if…else Statement: 

if (condition1) {
  // Code to execute if condition1 is true
} else if (condition2) {
  // Code to execute if condition2 is true
} else {
  // Code to execute if none of the conditions are true
}

 Example: 

let grade = 85;
if (grade >= 90) {
  console.log("A");
} else if (grade >= 80) {
  console.log("B");
} else if (grade >= 70) {
  console.log("C");
} else {
  console.log("D");
}

In this example, the code checks multiple conditions and logs the corresponding grade to the console based on the value of the grade variable.

4. The switch Statement

The switch statement is another way to handle multiple conditions in a more structured manner. It evaluates an expression and compares its value to case labels. If a match is found, the corresponding code block is executed. It is often used when you have a single expression to check against multiple possible values.

Syntax of the switch Statement: 

switch (expression) {
  case value1:
    // Code to execute when expression matches value1
    break;
  case value2:
    // Code to execute when expression matches value2
    break;
  // Additional cases
  default:
    // Code to execute if none of the cases match the expression
}

 Example:

let day = "Wednesday";
switch (day) {
  case "Monday":
    console.log("Start of the workweek");
    break;
  case "Wednesday":
    console.log("Midweek");
    break;
  case "Friday":
    console.log("End of the workweek");
    break;
  default:
    console.log("Weekend");
}

In this example, the switch statement checks the value of the day variable and logs a message based on the day of the week.

Repetition (Loop) Control

Repetition control structures are used to repeat a block of code multiple times, allowing you to automate repetitive tasks and process large datasets efficiently. JavaScript provides several types of loops, including for, while, and do…while.

1. The for Loop

The for loop is a versatile and widely used loop structure that allows you to iterate over a range of values, such as arrays or sequences. It consists of three parts: initialization, condition, and increment/decrement.

Syntax of the for Loop: 

for (initialization; condition; increment/decrement) {
  // Code to repeat while the condition is true
}
Example:
for (let i = 0; i < 5; i++) {
  console.log(i);
}

In this example, the for loop iterates from i = 0 to i = 4, logging the values of i in each iteration.

2. The while Loop

The while loop continues to execute a block of code as long as a specified condition remains true. It is suitable for situations where you don’t know in advance how many iterations are needed.

Syntax of the while Loop: 

while (condition) {
  // Code to repeat while the condition is true
}
Example:
let count = 0;
while (count < 3) {
  console.log(count);
  count++;
}

In this example, the while loop continues to execute as long as count is less than 3, logging the values of count in each iteration.

3. The do…while Loop

The `do…while loop is similar to thewhile` loop, but it always executes the code block at least once before checking the condition. It is suitable when you want to ensure that the code block runs at least once.

Syntax of the do…while Loop: 

do {
  // Code to execute at least once
} while (condition);
Example:
let x = 5;
do {
  console.log("x is " + x);
  x--;
} while (x > 0);

In this example, the code block is executed once, even though the condition is false initially. The loop continues to execute as long as x is greater than 0.

Loop Control Statements

JavaScript provides loop control statements that allow you to manipulate the flow of loops. These control statements include:

• break: Terminates the loop and continues with the next statement outside the loop.
• continue: Skips the current iteration and continues with the next iteration of the loop.
• label: Allows you to label a loop, and you can use the break and continue statements with the label to control nested loops.

Example with break: 

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // Terminate the loop when i is 3
  }
  console.log(i);
}

Example with continue:

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue; // Skip iteration when i is 3
  }
  console.log(i);
}

Example with Labels: 

outerLoop: for (let i = 0; i < 3; i++) {
  innerLoop: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // Break out of the outer loop when i is 1 and j is 1
    }
    console.log(i, j);
  }
}

 Branching Control

Branching control structures enable you to control the flow of your program by directing it to different sections or functions based on specific conditions. They are essential for building interactive applications and handling user input.

The return Statement

The return statement is used to end the execution of a function and specify a value to be returned to the calling code. It allows you to pass data back to the caller.

Syntax of the return Statement: 

function myFunction() {
  // Code
  return result; // Optional: Specify a value to return
}
Example:
function add(x, y) {
  return x + y;
}
let sum = add(3, 4); // Calls the add function and assigns the result to 'sum'

In this example, the add function returns the sum of x and y to the calling code.

The throw Statement

The throw statement is used to throw custom exceptions or errors when an unexpected condition is encountered. It can be caught and handled using a try…catch block.

Syntax of the throw Statement: 

throw expression; // Typically, 'expression' is an Error object or a custom message

Example: 

function divide(x, y) {
  if (y === 0) {
    throw new Error("Division by zero is not allowed.");
  }
  return x / y;
}
try {
  let result = divide(8, 0);
  console.log(result);
} catch (error) {
  console.error("An error occurred: " + error.message);
}

In this example, the divide function throws an error when attempting to divide by zero. The error is caught and handled by the try…catch block.

The try…catch Statement

The try…catch statement is used to handle exceptions and errors in a structured manner. It allows you to specify code that should be executed in case an error occurs.

Syntax of the try…catch Statement: 

try {
  // Code that may throw an exception
} catch (error) {
  // Code to handle the exception
}

Example: 

function divide(x, y) {
  if (y === 0) {
    throw new Error("Division by zero is not allowed.");
  }
  return x / y;
}
try {
  let result = divide(8, 0);
  console.log(result);
} catch (error) {
  console.error("An error occurred: " + error.message);
}

In this example, the try block attempts to call the divide function, which may throw an exception. If an exception is thrown, the code in the catch block is executed to handle the error.

Conclusion

Control structures in JavaScript are powerful tools for building dynamic and interactive applications. You’ve learned about selection (conditional) control structures, including the if, else if, and switch statements, which allow your code to make decisions based on specific conditions. Additionally, you’ve explored repetition (loop) control structures, such as the for, while, and do…while loops, which are used to automate repetitive tasks and process data efficiently.

Branching control structures, including the return, throw, and try…catch statements, are essential for directing the flow of your program, handling exceptions, and building robust applications.

In the next chapter, we’ll dive into functions in JavaScript. Functions are the building blocks of code reusability and organization, and they play a crucial role in structuring your applications. Get ready to learn how to define, call, and use functions effectively!