DEV Community

Cover image for Conditional Statements: A Quick Intro
Gabrielle J.
Gabrielle J.

Posted on

Conditional Statements: A Quick Intro

Image Description: A large wooden hand controls white strings tied to a small wooden mannequin's limbs Photo by Sivani Bandaru on Unsplash


Think back to all of the police procedural dramas you may have binged on...the one thing that always gets the criminal to confess is the detective's line of questioning. The questions flow in a logical, controlled manner, slowly narrowing what the criminal can truthfully speak to.

With conditional statements, you can mirror your favorite detective's method of manually controlling the flow of what JavaScript should evaluate next.

This post covers the most basic of conditionals -- if...else statements and switch statements.


If...else statements

There are three stages to if...else statements.

The first stage is an if-statement. It says if the code you write resolves to true, then execute the code block attached to the statement.

Here is an example of this process in action:

let x = "Sunday";

// if x equals either Monday or Tuesday,
if(x === "Monday" || x === "Tuesday"){

//execute this code
  console.log("It's the start of the week.");
}
Enter fullscreen mode Exit fullscreen mode

If the if-statement evaluates to false, a new condition and code block are outlined in the else-if statement.

Although there can only be one if-statement, you can write many else-if statements depending on your line of questioning.

The else-if statement follows the same logic as the if-statement.

//else if x equals Wednesday or Thursday,
else if(x === "Wednesday" || x === "Thursday"){

//execute this code
  console.log("It's the middle of the week.");
}
Enter fullscreen mode Exit fullscreen mode

The final statement, the else statement, provides a set of instructions to be executed in the event that all statements before it evaluate to false.

//if all else fails, execute this code
else{
  console.log("It's the weekend, I'm taking a break!");
}
Enter fullscreen mode Exit fullscreen mode

Switch Statements

Based on whether the conditions are true or false, a switch statement can present many different conditions and instructions to follow.

Read the code below to get a step-by-step example of a switch statement’s structure.

let y = "cerulean blue";

// the variable y is an expression that the statement will try to match with each case 
switch(y){

//if y matches this case,
  case "vermilion":

//execute this code
    console.log("These are half off!");

//break statements stop the evaluation, and point JavaScript towards the next case 
    break;

//you can group cases together if you want them to produce the same outcome
  case "black":
  case "forest green": 
    console.log(`Do you mean this one?`)
    break;
  case "cerulean blue":
    console.log("Is this it?");
    break;

//default statements serve the same purpose as the else statement - if all else fails,       
  default:
    //execute this code
    console.log("Sorry, we're out of stock in that color!");
}
Enter fullscreen mode Exit fullscreen mode

And that’s it!

Hopefully, this article has given you a quick and easy rundown of what conditional statements are – a line of controlled questioning developed by you, the developer, that allows JavaScript to take different actions based on its evaluation of the conditions you’ve given it.

I appreciate your time spent reading this, and if you have feedback, let me know!

Top comments (0)