Conditional Statements

In programming, we might want to make decisions or do something based on certain conditions. For example, we might want to add two numbers if they are both positive numbers. In this scenario, the action we want to take (adding the two numbers) is dependent on whether they are both positive or not. Hence during the execution, our program will have to take a decision. To be able to implement such logic we use conditional statements.

What are Conditional statements?

Conditional statements are statements used to make decisions based on the value of a condition. The most common conditional statements in JavaScript are if, else, else if, and switch.

The if statement.

The if statement is the most fundamental conditional statement in JavaScript. The if statements execute a block of code if a specified condition evaluates to true or has a truthy value. The syntax for an if statement is as follows:

if (condition) {
  // code to execute if condition is true
}

The if statement executes code if and only if the condition evaluates to true or has a truth value. If the condition is false the code is skipped.

Example: The code below will print out “The number is greater than 10” because the condition number > 10 évaluâtes to true.

let number = 15;
if (number > 10) {
  console.log("The number is greater than 10");
}

The code below will print out “The number is greater than 10” because the condition number > 10 évaluâtes to true.

The else statement: The else statement is used to specify what the code should do if the condition/expression is not true or has a falsy value. The else statement is used together with the if statement and does not stand alone. When used together it’s called an if else statement. The following is the syntax of an if else statement:

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

For example, the code below will print the message "The number is less than 30" if the variable number is less than 30 and print the message "The number is greater than 30" if the variable number is greater than 30.

let number = 10;
if (number < 30) {
  console.log("The number is less than 30");
} else {
  console.log("The number is greater than 30");
}

NB: The else statement is optional when using an if statement.

The else if statement

When we have to test more than one condition and perform an action according to the condition met then we’ll have to chain those conditions using else if statement. The else if statement allows you to test multiple conditions in a row. The following is the syntax of an else if statement:

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

For example, the code below will print the message "Buy the car" if the variable amount is greater than the variable carPrice. The could will print "Think the purchase through" if the variable amount is equal to carPrice, and "Don’t buy the car" if the variable amount is less than carPrice:

let amount = 100;
let carPrice = 80;
if (amount > carPrice) {
  console.log("Buy the car");
} else if (amount === carPrice) {
  console.log("Think the purchase through");
} else {
  console.log("Don’t buy the car");
}

The switch statement

The switch statement is an advanced and simple way of chaining multiple else if statements. When we have many conditions we want to test for, chaining multiple else if statements can make our code hard to read. This is when the switch statement pops up. The switch statement takes a single condition evaluates it and attempts to match it to one of several specified cases. If the evaluation matches any of the specified cases, the code below the case is executed. The following is the syntax of switch statement:

switch (expression) {
  case value1:
    // code to run if expression === value1
    break;
  case value2:
    // code to run if expression === value2
    break;
  default:
    // code to run if none of the cases match
    break;
}

The expression is a value that you want to test. The case statements are used to specify the different values that you want to test for. The break statement is used to end the current case. For example, the following code will display a message depending on the value of the role variable:

const role = "admin";
switch (role) {
  case "admin":
    console.log("logged in as an administrator!");
    break;
  case "Johnny":
    console.log("logged in as Johnny!");
    break;
  case "Tasha":
    console.log("logged in as Tasha!")
    break;
  default:
    console.log("not logged in.");
    break;
}

The conditional operator

The conditional operator also called the ternary operator is a shorthand for the if else statement. The ternary operator evaluates a condition and returns one of two values, based on whether the condition is true or false. The following is the syntax of the ternary operator:

condition ? value_returned_if_true : value_returned_if_false

For example, the following code is equivalent to the if statement we saw earlier:

var number = 15;
var message = number > 10 ? "greater than 10" : "less than 10";
console.log(message);
//-> "greater than 10"

Ternary operators can be chained. To learn more about the ternary operator and how to effectively use it check out the following resources: The Ternary Operator by Usman Sabuwala or Ternary Operators in JavaScript, Should I? by Osumbga Chiamaka. Don't forget to check out my other posts as well.

Conclusion

Conditional statements are a powerful tool that can be used to make decisions in your JavaScript code. By understanding the different types of conditional statements, you can write more efficient and effective

That’s a wrap! Thank you for reading this post, I hope it was useful. Click the following button for more helpful tips on using JavaScript and other web development technologies.

Contact me

• Twitter

• LinkedIn