16 KiB

Raw Blame History Unescape Escape

JavaScript Basics: Making Decisions

Sketchnote by Tomomi Imura

Making decisions is at the heart of programming and mirrors how we think in everyday life. Just as you decide what to wear based on the weather or which route to take based on traffic, your JavaScript programs need to make choices based on different conditions. This fundamental concept transforms static code into dynamic, intelligent applications that can respond to user input and changing circumstances.

In this lesson, you'll discover how to use conditional statements, comparison operators, and logical expressions to control the flow of your programs. You'll learn about if statements, switch statements, and the powerful logical operators that help your code make smart decisions. These tools will enable you to create programs that can evaluate situations and respond appropriately.

By the end of this lesson, you'll be writing JavaScript that can analyze data, validate user input, and execute different code paths based on various conditions. Let's explore how to give your programs the power of decision-making!

Pre-Lecture Quiz

Pre-lecture quiz

Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types

🎥 Click the image above for a video about making decisions.

You can take this lesson on Microsoft Learn!

A Brief Recap on Booleans

Before we dive into decision-making, let's revisit Boolean values from our previous lessons. Booleans are the foundation of all conditional logic in programming – they represent the simple concept of "yes or no," "true or false," or "on or off."

Booleans can have only two values: true or false. Booleans help make decisions on which lines of code should run when certain conditions are met.

Set your boolean to be true or false like this:

let myTrueBool = true;
let myFalseBool = false;

Here's what this code does:

Creates a variable myTrueBool and assigns the value true
Creates a variable myFalseBool and assigns the value false
Uses the let keyword to declare variables that can be changed later

✅ Booleans are named after the English mathematician, philosopher and logician George Boole (1815–1864).

Comparison Operators and Booleans

Now that you understand Boolean values, let's explore how to create them using comparison operators. These operators are your tools for asking questions in code: "Is this number bigger than that one?" or "Are these two values the same?" Understanding these operators is crucial for writing effective conditional statements.

Operators are used to evaluate conditions by making comparisons that will create a Boolean value. The following is a list of operators that are frequently used.

Symbol	Description	Example
`<`	Less than: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right	`5 < 6 // true`
`<=`	Less than or equal to: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right	`5 <= 6 // true`
`>`	Greater than: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right	`5 > 6 // false`
`>=`	Greater than or equal to: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right	`5 >= 6 // false`
`===`	Strict equality: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type.	`5 === 6 // false`
`!==`	Inequality: Compares two values and returns the opposite Boolean value of what a strict equality operator would return	`5 !== 6 // true`

✅ Check your knowledge by writing some comparisons in your browser's console. Does any returned data surprise you?

If Statement

The if statement is your first tool for making decisions in JavaScript. Think of it as asking a question – if the answer is "yes" (true), then do something specific. This is the foundation of conditional logic and allows your programs to respond intelligently to different situations.

The if statement will run code in between its blocks if the condition is true.

if (condition) {
  // Condition is true. Code in this block will run.
}

Understanding this structure:

Evaluates the condition inside the parentheses ()
Executes the code inside the curly braces {} only if the condition is true
Skips the code block entirely if the condition is false

Logical operators are often used to form the condition.

let currentMoney = 1000;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

In the above, we've:

Declared variables for current money and laptop price with realistic values
Used the greater than or equal operator >= to compare values
Executed the console.log() statement because 1000 >= 800 evaluates to true

If..Else Statement

Sometimes you want your program to do one thing when a condition is true and something different when it's false. The else statement provides this "Plan B" – it ensures your program always has a response, regardless of whether the initial condition is met.

The else statement will run the code in between its blocks when the condition is false. It's optional with an if statement.

let currentMoney = 500;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  // Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

Breaking down what happens here:

Compares currentMoney (500) with laptopPrice (800)
Evaluates the condition 500 >= 800 as false
Skips the first code block because the condition failed
Executes the else block, displaying "Can't afford a new laptop, yet!"

✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the currentMoney and laptopPrice variables to change the returned console.log().

Switch Statement

When you need to compare a single value against multiple possible options, the switch statement provides a cleaner alternative to multiple if..else statements. Think of it like a restaurant menu where you pick one option from many choices – the switch statement makes this type of decision-making more readable and organized.

The switch statement is used to perform different actions based on different conditions. Use the switch statement to select one of many code blocks to be executed.

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Understanding the structure:

Evaluates the expression once at the beginning
Compares the result against each case value
Executes the matching case block and uses break to exit
Runs the default block if no cases match

// Program using switch statement for day of week
let dayNumber = 2;
let dayName;

switch (dayNumber) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  default:
    dayName = "Unknown day";
    break;
}
console.log(`Today is ${dayName}`);

Step by step, here's what's happening:

Declares a variable dayNumber with the value 2
Evaluates the switch expression and finds the matching case 2
Assigns "Tuesday" to the dayName variable
Exits the switch block using the break statement
Displays "Today is Tuesday" in the console

✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the variable a to change the returned console.log().

Logical Operators and Booleans

Real-world decisions often involve multiple conditions. For example, you might go to the beach if it's sunny AND warm, or you might stay home if it's raining OR snowing. Logical operators allow you to combine multiple conditions in your JavaScript programs, making your decision-making logic more sophisticated and realistic.

Decisions might require more than one comparison, and can be strung together with logical operators to produce a Boolean value.

Symbol	Description	Example
`&&`	Logical AND: Compares two Boolean expressions. Returns true only if both sides are true	`(5 > 3) && (5 < 10) // Both sides are true. Returns true`
`\|\|`	Logical OR: Compares two Boolean expressions. Returns true if at least one side is true	`(5 > 10) \|\| (5 < 10) // One side is false, other is true. Returns true`
`!`	Logical NOT: Returns the opposite value of a Boolean expression	`!(5 > 10) // 5 is not greater than 10, so "!" makes it true`

Understanding these operators:

Combines multiple conditions using AND (&&) when all must be true
Offers alternatives using OR (||) when at least one must be true
Reverses logic using NOT (!) to flip true/false values

Conditions and Decisions with Logical Operators

Now let's see how logical operators work in practice with if..else statements. By combining logical operators with conditional statements, you can create sophisticated decision-making logic that handles complex real-world scenarios.

Logical operators can be used to form conditions in if..else statements.

let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  // Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

Let's understand each part:

Calculates the discount price as 80% of original price (20% off)
Uses the OR operator (||) to check if either condition is true
Evaluates whether current money covers the full price OR the discount price
Executes "Getting a new laptop!" because 600 >= 640 (discount price) is true

Negation Operator

Sometimes it's easier to think about when something is NOT true rather than when it IS true. The negation operator (!) flips the logic, allowing you to write more intuitive conditions. For example, instead of checking "if user is not logged in," you can write "if not user is logged in."

You've seen so far how you can use an if...else statement to create conditional logic. Anything that goes into an if needs to evaluate to true/false. By using the ! operator you can negate the expression. It would look like so:

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

Key points to remember:

Flips the Boolean value: !true becomes false, !false becomes true
Reads naturally: "if not condition" makes logical sense
Simplifies logic when you want to check for the absence of something

Ternary Expressions

For simple if...else decisions, JavaScript offers a more concise syntax called the ternary operator. Think of it as a shorthand way to write conditional assignments – it's particularly useful when you need to assign one of two values to a variable based on a condition.

if...else isn't the only way to express decision logic. You can also use something called a ternary operator. The syntax for it looks like this:

let variable = condition ? returnThisIfTrue : returnThisIfFalse;

Understanding the structure:

Evaluates the condition before the question mark ?
Returns the first value (after ?) if condition is true
Returns the second value (after :) if condition is false

Below is a more tangible example:

let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;

✅ Take a minute to read this code a few times. Do you understand how these operators are working?

The above states that:

Checks if firstNumber is larger than secondNumber
Assigns firstNumber to biggestNumber if the condition is true
Assigns secondNumber to biggestNumber if the condition is false

The ternary expression is just a compact way of writing the code below:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

What you need to know:

Provides a concise alternative to simple if...else statements
Works best for straightforward conditional assignments
Improves code readability when used appropriately for simple conditions

🚀 Challenge

Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?

GitHub Copilot Agent Challenge 🚀

Use the Agent mode to complete the following challenge:

Description: Create a comprehensive grade calculator that demonstrates multiple decision-making concepts from this lesson, including if-else statements, switch statements, logical operators, and ternary expressions.

Prompt: Write a JavaScript program that takes a student's numerical score (0-100) and determines their letter grade using the following criteria:

A: 90-100
B: 80-89
C: 70-79
D: 60-69
F: Below 60

Requirements:

Use an if-else statement to determine the letter grade
Use logical operators to check if the student passes (grade >= 60) AND has honors (grade >= 90)
Use a switch statement to provide specific feedback for each letter grade
Use a ternary operator to determine if the student is eligible for the next course (grade >= 70)
Include input validation to ensure the score is between 0 and 100

Test your program with various scores including edge cases like 59, 60, 89, 90, and invalid inputs.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Read more about the many operators available to the user on MDN.

Go through Josh Comeau's wonderful operator lookup!

Assignment

Operators

16 KiB Raw Blame History Unescape Escape