Conditionals in JavaScript allow you to execute different code blocks based on certain conditions. They are essential for controlling the flow of your program. Here are the main types of conditional statements in JavaScript:

<font color=#94c4ff> 1. If Statement </font>

The if statement executes a block of code if the specified condition is true.

let score = 85;

if (score >= 60) {
    console.log("You passed!");
}

<font color=#94c4ff> Popcorn Hack #1 </font>

How would you change the code to show a message for scores below 60? What would you add?

<font color=#94c4ff> 2. If…Else Statement </font>

The if...else statement allows you to execute one block of code if the condition is true, and another block if it is false.

let score = 50;

if (score >= 60) {
    console.log("You passed!");
} else {
    console.log("You failed!");
}

<font color=#94c4ff> Popcorn Hack #2 </font>

What if you wanted to add a message for scores of exactly 50? How would you modify the code?

<font color=#94c4ff> 3. If…Else If…Else Statement </font>

The if...else if...else statement allows you to check multiple conditions.

let score = 75;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: F");
}

<font color=#94c4ff> Popcorn Hack #3 </font>

How would you modify the code to include a message for scores between 60 and 69? What would you add?”

<font color=#94c4ff> 4. Switch Statement </font>

The switch statement is a cleaner way to handle multiple conditions based on the same variable. It evaluates an expression and matches it against several cases.

let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "Monday";
        break;
    case 2:
        dayName = "Tuesday";
        break;
    case 3:
        dayName = "Wednesday";
        break;
    default:
        dayName = "Invalid day";
}

console.log(dayName); // Output: Wednesday

<font color=#94c4ff> 5. Ternary Operator </font>

The ternary operator is a shorthand for the if...else statement. It’s often used for simple conditions.

let age = 18;
let message = (age >= 18) ? "You can vote." : "You cannot vote.";
console.log(message); // Output: You can vote.

<font color=#94c4ff> Key Points to Remember </font>

  • Conditions are usually expressions that evaluate to true or false.
  • You can use comparison operators (like ==, ===, !=, !==, <, >, <=, >=) and logical operators (like &&, ||, !) to build complex conditions.
  • Always use === (strict equality) instead of == (loose equality) to avoid unexpected type coercion.
  • Conditionals are powerful tools that help you control how your code executes, enabling you to create dynamic and responsive applications.

Quiz Time!

%%js
function questionWithResponse(prompt) {
    return prompt(prompt);
}

const questions = 5;
let correct = 0;

const userName = questionWithResponse("Enter your name: ");
console.log('Hello, ' + userName + '!');

const ready = questionWithResponse("Are you ready to take a quiz on JavaScript conditionals? (yes/no): ");

if (ready.toLowerCase() !== 'yes') {
    console.log("Alright! Come back when you're ready.");
} else {
    // Question 1: Boolean Values
    const response1 = questionWithResponse("What are the two possible Boolean values in JavaScript? (separate with a comma): ");
    if (response1.toLowerCase() === 'true,false' || response1.toLowerCase() === 'false,true') {
        correct++;
        console.log("Correct!");
    } else {
        console.log("Incorrect. The correct answers are 'true' and 'false'.");
    }

    // Question 2: Conditional Statements
    const response2 = questionWithResponse("What keyword is used to create a conditional statement in JavaScript? ");
    if (response2.toLowerCase() === 'if') {
        correct++;
        console.log("Correct!");
    } else {
        console.log("Incorrect. The correct answer is 'if'.");
    }

    // Question 3: Ternary Operator
    const response3 = questionWithResponse("What is the ternary operator used for in JavaScript? ");
    if (response3.toLowerCase().includes('conditional') || response3.toLowerCase().includes('if')) {
        correct++;
        console.log("Correct!");
    } else {
        console.log("Incorrect. The ternary operator is used for conditional expressions.");
    }

    // Question 4: Switch Statement
    const response4 = questionWithResponse("What type of statement is used to select one of many blocks of code to be executed? ");
    if (response4.toLowerCase() === 'switch') {
        correct++;
        console.log("Correct!");
    } else {
        console.log("Incorrect. The correct answer is 'switch'.");
    }

    // Question 5: Logical Operators
    const response5 = questionWithResponse("Name one logical operator used in JavaScript. ");
    if (['and', 'or', 'not', '&&', '||', '!'].includes(response5.toLowerCase())) {
        correct++;
        console.log("Correct!");
    } else {
        console.log("Incorrect. Common logical operators include '&&', '||', and '!'.");
    }

    // Final score
    console.log(userName + ", you scored " + correct + "/" + questions);
}


<IPython.core.display.Javascript object>