Image Description: 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.");
}
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.");
}
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!");
}
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!");
}
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)