Understanding Conditionals in JavaScript - Making decisions in your code

Photo by Burst on Unsplash

Understanding Conditionals in JavaScript - Making decisions in your code

what are Conditionals (decisions)

We all make decisions that affect our lives at all times. examples, in A real-life situation, (if I'm tired, then rest). in a game, ("if a player's number of lives is 0, then it's game over"), ("should I sleep or stay awake"), etc

Conditional statements allow us to represent such decisions in javaScript from the choice that we make (for example, if I'm tired), resulting in the outcome "Sleep".

In programming languages, Conditions determine whether or not a piece of code can run.

In JavaScript, we have the following conditional statements:

  • The if statement which is used to execute a block of code, if a specified condition is true.

    code block: is code enclosed in {} braces. if the condition is true, the code inside the {} is executed.

    Syntax of if statement

    As seen below, the if statement syntax is straightforward. it consists of the if keyword, followed by a parenthesis () containing a condition. if the conditional evaluates to "true" then the code in the curly {} will be executed.

      if (condition) {
          /*code to run if condition is true*/
      }
    
      example,
      let hour = 10 // assigning the value of 10 to hour
    
      if (hour < 12) {
          greeting = "Good Morning";
      }
      //Good Morning ---
    
  • The else statement is used to specify a block of code to be executed if the same condition is false

    Syntax of the else statement

    the else statement syntax consists of an else keyword, followed by a curly {} braces. if the conditional evaluates to "false" then the code in the curly {} braces will be executed.

      if (condition) {
          //code to run if condition is true
      } else {
          //run some other code instead.
      }
    
      example;
      let hour = 13
    
      if (hour < 12) {
          greeting = "Good Morning";
      } else {
          greeting = "Good Afternoon";
      }
    
      //Good Afternoon --
    
  • The else if statement specifies a new condition to test and run if the first condition is false

    Syntax of the else if statement

    if else statements are used to provide alternative action (condition2) when the if (condition1) is false. the else block also contains executable code to be executed when both if and else if are false.

      if (condition1) {
          //code to run if condition is true
      } else if (condition2) {
          //run this code when condition1 is false and condition2 is true.
      } else {
          //run this instead when both conditons are false.
      }
    
      example;
      let hour = 15
    
      if (hour < 12) {
          greeting = "Good Morning";
      } else if (hour < 20) {
          greeting = "Good Afternoon";
      } else {
          greeting = "Good Evening";
      }
    
      //Good Afternoon --
    

The switch statements are used to check multiple possible conditions against a single value

Syntax

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

example;

let color = "green";

switch(color) {
  case "red":
    console.log("Stop!");
    break;
  case "yellow":
    console.log("Get Reading...");
    break;
  case "green":
    console.log("Go...");
    break;
  default:
    console.log("Traffic light signs");
}

The switch examples check and show the value of the weekday and execute the corresponding task deliverables.

Conclusion

understanding and mastering conditionals are essential for both JavaScript developers and other Programming stacks. These conditions provide the logic that enables your programs to make decision and responds dynamically to a different situation. e.g. validating user input, controlling the flow of your application, or handling different cases, conditional statements are a fundamental tool in your programming arsenal.

Thanks for reading.

For More insights, Visit:

MDN Documentation

w3Schools Documentation