Conditional Branching in JavaScript

This article explains conditional branching in JavaScript.

YouTube Video

The if statement in JavaScript

Basic Syntax

1if (condition) {
2    // Code that executes if the condition is true
3}

The if statement in JavaScript is a basic control structure used to control code execution based on whether a specific condition is true or false. If the condition is true, the code block is executed, and if it is false, it is skipped.

Example

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

In this example, since the value of x is greater than 5, x is greater than 5 is displayed in the console.

else Statement

Basic Syntax

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

By using an else statement following an if statement, you can specify code to be executed when the condition is false.

Example

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

In this case, since x is less than 5, "x is 5 or less" is displayed.

else if Statement

Basic Syntax

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

If you want to check multiple conditions, use else if. The next condition is checked if the initial if is false.

Example

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

In this case, since x is 5, "x is 5" is displayed.

Ternary Operator (Conditional Operator)

Syntax

1condition ? valueIfTrue : valueIfFalse

If you want to write an if statement more concisely, you can use the ternary operator.

Example

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

In this case, since number is 7, Odd is displayed.

Summary

• if statements control which code is executed based on whether the condition is true or false.
• You can specify behavior for when the condition is false by using else.
• You can check multiple conditions using else if.
• You can also use a ternary operator to write conditional branches concisely.

The switch statement in JavaScript

Basic Syntax

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

The switch statement in JavaScript is used to compare one expression (usually a variable) to multiple values (cases) and execute the corresponding code. Like the if statement, it performs conditional branching, but it is often more readable when there are multiple conditions.

Example

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

In this example, since fruit is "apple", "This is an apple" is displayed in the console.

break の役割

By inserting break at the end of each case, you exit the switch statement after completing that case. If you do not write break, the next case will also be executed (this is called fall-through).

Example of Fall-Through

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

In this case, since color is "red", and there is no break after "This is red", both "This is blue" and "Unknown color" will also be displayed.

Using default

default is the part that is executed when there is no match with any case. This corresponds to else in an if statement.

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

In this case, since animal is "dog", it falls under default, and "Unknown animal" is displayed.

Handling Multiple Values with the Same Case

If you want to perform the same operation for multiple cases, you can write them consecutively.

Example

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

In this example, if day is 1, "Weekday" is displayed.

switch vs. if

• An if statement is suitable for checking complex conditions or ranges. For example, complex conditions such as a variable x being greater than or equal to 10 and less than or equal to 20 cannot be written in a switch.
• A switch statement can sometimes make code more readable when checking if a value matches a specific one.

Summary

• The switch statement is used to write conditional branches for multiple values concisely.
• If you do not use break at the end of each case, the next case may also be executed (fall-through).
• default is executed when none of the cases match.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video