12.2 If Statements and If-Else

If Statements and If-Else (20 mins)

  1. Introduction to If Statements:

    • The if statement allows you to run a block of code only if a specific condition is true.

    • Syntax:

      if (condition) {
  // code to run if the condition is true
}

    Example:

    let age = 18;
if (age >= 18) {
  console.log("You are eligible to vote.");
}

  2. If-Else Statements:

    • The if-else structure is used when you want to run one block of code if a condition is true and another block if it’s false.

    • Syntax:

      if (condition) {
  // code to run if condition is true
} else {
  // code to run if condition is false
}

    Example:

    let age = 16;
if (age >= 18) {
  console.log("You are eligible to vote.");
} else {
  console.log("You are not eligible to vote.");
}

  3. If-Else-If Statements:

    • The if-else-if structure allows you to test multiple conditions and run different code based on which condition is true.

    • Syntax:

      if (condition1) {
  // code to run if condition1 is true
} else if (condition2) {
  // code to run if condition2 is true
} else {
  // code to run if neither condition1 nor condition2 is true
}

    Example:

    let age = 17;
if (age < 13) {
  console.log("You are a child.");
} else if (age >= 13 && age <= 19) {
  console.log("You are a teenager.");
} else {
  console.log("You are an adult.");
}

  4. Truthy and Falsy Values in JavaScript:

    • In JavaScript, some values are considered truthy and some are considered falsy.

    • Truthy values: These are values that are considered true when evaluated in a Boolean context (like conditions in if statements). Examples include non-zero numbers, non-empty strings, and objects.

    • Falsy values: These are values considered false in a Boolean context. Common falsy values include:

      • false

      • 0

      • "" (empty string)

      • null

      • undefined

      • NaN (Not a Number)

    Example:

    if (0) {
  console.log("This won't run because 0 is falsy.");
}

if ("Hello") {
  console.log("This will run because non-empty strings are truthy.");
}

Student Activity (20 mins):

Objective: Students will practice writing if, if-else, and if-else-if structures and understand how truthy and falsy values affect conditional logic.

Instructions:

  1. Create an HTML file (e.g., if_statements.html) and include a script that demonstrates if, if-else, and if-else-if statements, along with examples of truthy and falsy values.

    Example Code:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>If Statements and Truthy/Falsy</title>
</head>
<body>
  <h1>Check the Console for Output</h1>
  
  <script>
    // If statement example
    let age = 18;
    if (age >= 18) {
      console.log("You are eligible to vote.");
    }

    // If-else example
    let hasLicense = false;
    if (hasLicense) {
      console.log("You can drive.");
    } else {
      console.log("You cannot drive.");
    }

    // If-else-if example
    let score = 85;
    if (score >= 90) {
      console.log("Grade: A");
    } else if (score >= 80) {
      console.log("Grade: B");
    } else {
      console.log("Grade: C");
    }

    // Truthy and Falsy example
    let name = "";  // Empty string is falsy
    if (name) {
      console.log("Name is truthy.");
    } else {
      console.log("Name is falsy.");
    }

    let number = 0;  // 0 is falsy
    if (number) {
      console.log("Number is truthy.");
    } else {
      console.log("Number is falsy.");
    }

    let value = "Hello";  // Non-empty string is truthy
    if (value) {
      console.log("Value is truthy.");
    }
  </script>
</body>
</html>

  2. Run the file in a browser:

    • Open the HTML file in a browser and use Developer Tools (F12 or right-click and select Inspect > Console) to view the output of the script.

    • Observe the results of the if, if-else, and if-else-if conditions.

  3. Activity:

    • Step 1: Change the values of the age, hasLicense, and score variables to see how the outputs change based on the conditions.

    • Step 2: Experiment with different truthy and falsy values by assigning different values to the name, number, and value variables (e.g., test null, undefined, NaN, non-zero numbers, and non-empty strings).

    Challenge:

    • Extend the code by adding more complex conditions, such as combining multiple conditions with logical operators (&& and ||).

    Example:

    let hasJob = true;
let savings = 1000;

if (hasJob && savings > 500) {
  console.log("You can buy a car.");
} else {
  console.log("You cannot buy a car.");
}

Follow-up Questions:

  1. What happens when you use a truthy value in an if condition? What about a falsy value?

  2. Why is understanding truthy and falsy values important when writing conditional statements?

  3. How does the if-else-if structure allow for more flexible decision-making in your program?

Expected Outcome:

Students will gain hands-on experience with if, if-else, and if-else-if statements, as well as develop an understanding of truthy and falsy values in JavaScript. They will be able to implement conditional logic that can handle multiple conditions and experiment with how different values affect the program flow.

Previous12.1 Introduction to Control StatementsNext12.3 Ternary Operator and Switch Statements

Last updated