what i learned last week: javascript conditionals

Right out of the gate, what actions do you take when you're thirsty? hungry? sleepy? Maybe you drink a Gatorade, eat a burger or go to sleep. Keep the below pseudocode in the back of your mind because we are going to build on it.

if thirsty => drink water.
else => don't drink water.

if hungry => eat tamal.
else => don't eat tamal.

if sleepy => sleep
else => write code.

Conditional statements are used to perform different actions based on different conditions. We can also refer to this as the control flow which is the order in which the computer executes statements in a script. In JavaScript there are a couple of ways to implement a conditional based control flow structure.

if...else statement,
switch statement,

First, if...else executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed. We can make this happen with the Strict equality (===) operator which checks whether its two operands are equal, returning a Boolean result.

let thirsty = true; // The let statement declares a block-scoped local variable, optionally initializing it to a value.
if (thirsty === true) { // You should prefer Strict Equality Operator for comparisons.
console.log('I need H20'); // displays message on console.
} 

Since the above condition returns a truthy value the code runs. Neat, right!

Note: In JavaScript a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN). A falsy (sometimes written falsey) value is a value that is considered false when encountered in a Boolean context.

Next, I've added else to our statement.

let thirsty = false;

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log('I/'m not thirsty');
}

// What do you think is going to be displayed in the console? Copy and paste the above code into your browsers console to see the answer.

Above I've created the thirsty variable and inside of it have stored false. Remember, false is a boolean and it's value is falsy. Next, we want to create some sort of logic that logs 'I need H20' or I'm not thirsty' to our console. In this example we want to display a statement on our console depending on the value of a condition. Were you able to figure out what will be displayed in the console?

// => I'm not thirsty

^^SOLUTION^^

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log("I'm not thirsty");
}

Again, The if...else statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed. The reason why the console displays I'm not thirsty is because the two operands in the condition are NOT equal.

let thirsty = false;

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log("I'm not thirsty");
}

// => I'm not thirsty

Now that we've briefly gone over a basic if...else statement let's move on.

Next, the switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.

switch (expression) {
    case value1:
        // Statements
        break;
    case value2:
        // Statements
        break;
    default:
        // Statements
        break;
} 

Ok, but what does that mean? Lets break it down.

1. The value of expression is checked for a strict equality to the value from the first case (that is, value1) then to the second (value2) and so on.
2. If the equality is found, switch starts to execute the code starting from the corresponding case, until the nearest break (or until the end of switch).
3. If no case is matched then the default code is executed (if it exists).

switch (expression) {
    case value1:
        // Statements
        break;
    case value2:
        // Statements
        break;
    default:
        // Statements
        break;
} 

Switch Statement Example:

const mood = 'thirsty';

switch (mood) {
    case 'thirsty':
        drink = 'water';
        console.log(`I'm thirsty so I'm going to drink ${drink}.`);
        break;
    case 'hungry':
        food = 'burger';
        console.log(`I'm hungry so I'm going to eat a ${food}.`);
        break;
    case 'sleepy':
        action = 'sleep';
        console.log(`I'm sleepy so I'm going to ${action}.`);
        break;
}

// => I'm thirsty so I'm going to drink water.