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:

1. If Statement

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

let score = 85;

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

Popcorn Hack #1

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

2. If ... Else Statement

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!");
}

Popcorn Hack #2

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

3. If...Else If...Else Statement

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");
}

Popcorn Hack #3

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

4. Switch Statement

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

5. Ternary Operator

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.

Key Points to Remember

  • 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!

%%javascript
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>