JavaScript conditionals: the if and switch statements

Conditionals in JavaScript run code depending on specific conditions. They let you build more complex programs and take decisions based on the data you receive. This chapter covers the if and switch statements, the two control flow statements you will reach for most often in JavaScript.

The if statement

The if statement in JavaScript runs a piece of code only when a given condition is met. Here is the if statement in use:

let a = 5;

if (a > 10) {
  console.log('a est supérieur à 10');
}

In this example, the code inside the braces only runs if the condition “a > 10” is true. If the condition is false, the code is skipped and the program carries on with the next statement.

You can also use the else statement to run code when the condition is not met:

let a = 5;

if (a > 10) {
  console.log('a est supérieur à 10');
} else {
  console.log('a est inférieur ou égal à 10');
}

If the condition “a > 10” is true, the message “a est supérieur à 10” is printed. If the condition is false, the message “a est inférieur ou égal à 10” is printed instead.

You can also use the else if statement to test several conditions one after the other:

let a = 5;

if (a > 10) {
  console.log('a est supérieur à 10');
} else if (a == 10) {
  console.log('a est égal à 10');
} else {
  console.log('a est inférieur à 10');
}

If the first condition “a > 10” is true, the message “a est supérieur à 10” is printed. If the first condition is false and the second one “a == 10” is true, the message “a est égal à 10” is printed. If none of the conditions is met, the message “a est inférieur à 10” is printed.

The switch statement

The switch statement in JavaScript runs code depending on the value of a given variable. Use it when you need to check several possible values for one variable. Here is the switch statement in use:

let a = 'rouge';

switch (a) {
  case 'bleu':
    console.log('a est bleu');
    break;
  case 'vert':
    console.log('a est vert');
    break;
  case 'rouge':
    console.log('a est rouge');
    break;
  default:
    console.log("a n'est ni bleu, ni vert, ni rouge");
}

The value of the variable “a” is compared with each “case” in the switch statement. If the value of “a” matches one of the “case” branches, the code attached to it runs. If no “case” matches the value of “a”, the code attached to “default” runs.

let a = 'jaune';

switch (a) {
  case 'bleu':
  case 'vert':
  case 'rouge':
    console.log('a est une couleur primaire');
    break;
  case 'jaune':
  case 'orange':
  case 'violet':
    console.log('a est une couleur secondaire');
    break;
  default:
    console.log("a n'est ni une couleur primaire, ni une couleur secondaire");
}

If the value of “a” is “bleu”, “vert” or “rouge”, the message “a est une couleur primaire” is printed. If the value of “a” is “jaune”, “orange” or “violet”, the message “a est une couleur secondaire” is printed. If no “case” matches the value of “a”, the message “a n’est ni une couleur primaire, ni une couleur secondaire” is printed:

Conclusion

This chapter covered how to use the if and switch statements to run code depending on a condition or on a specific value. They are the building blocks of any more complex JavaScript program. Practise with both to sharpen your JavaScript skills.