⚡ Lesson 4: Operators & Expressions

Introduction

Variables let you store data. Operators let you actually do something with it: add up a shopping cart, check whether a password is long enough, or decide if a visitor gets a discount. Put values and operators together and you get an expression — any piece of code that works out to a value. 2 + 3 is an expression that produces 5.

By the end of this lesson you'll use these building blocks to make a working tip calculator — and you'll be ready to teach your code to make decisions in Module 2.

Arithmetic Operators

These perform math on numbers, just like a calculator.

let price = 29.99;
let quantity = 3;
let subtotal = price * quantity;
console.log(`Subtotal: $${subtotal}`);  // "Subtotal: $89.97"

// Modulo is great for checking even/odd
let number = 7;
console.log(number % 2);  // 1 (odd — remainder when dividing by 2)
console.log(8 % 2);       // 0 (even)

// Increment and Decrement
let count = 5;
count++;  // count is now 6 (same as count = count + 1)
count--;  // count is now 5 again
                

Assignment Operators

You already know = assigns a value. Shorthand operators combine assignment with an operation.

let score = 100;
score += 25;   // score is now 125
score -= 10;   // score is now 115
score *= 2;    // score is now 230

console.log(score);  // 230
                

Comparison Operators

Comparison operators compare two values and return a boolean (true or false). They're the foundation of decision-making in code.

The Critical Difference: === vs. ==

This is one of the most important things to understand in JavaScript.

// === (strict equality) — checks value AND type
console.log(5 === 5);      // true  (same value, same type)
console.log(5 === "5");    // false (same value, different type!)
console.log(true === 1);   // false (different types)

// == (loose equality) — converts types before comparing
console.log(5 == "5");     // true  (JS converts "5" to 5, then compares)
console.log(true == 1);    // true  (JS converts true to 1)
console.log(null == undefined);  // true (special case)
console.log("" == 0);      // true  (JS converts "" to the number 0)
                

// Why == is dangerous — most of these are surprising!
console.log("" == 0);           // true
console.log("0" == 0);          // true
console.log("" == "0");         // false (both strings, no coercion)
console.log(false == "0");      // true
console.log(false == "");       // true
console.log(null == undefined); // true

// With ===, the results make sense
console.log("" === 0);          // false
console.log("0" === 0);         // false
console.log(false === "0");     // false
                

Logical Operators

Logical operators combine boolean values or expressions. They're how you build complex conditions.

let age = 25;
let hasID = true;

// AND — both conditions must be true
let canEnter = age >= 21 && hasID;
console.log(canEnter);  // true

// OR — at least one condition must be true
let isWeekend = false;
let isHoliday = true;
let dayOff = isWeekend || isHoliday;
console.log(dayOff);  // true

// NOT — flips the boolean
let isLoggedIn = false;
console.log(!isLoggedIn);  // true (NOT false = true)

// Combining them
let isMember = true;
let hasCoupon = false;
let getsDiscount = isMember || hasCoupon;
let canCheckout = getsDiscount && age >= 18;
console.log(`Gets discount: ${getsDiscount}`);   // true
console.log(`Can checkout: ${canCheckout}`);       // true
                

Truthy and Falsy Values

JavaScript can treat non-boolean values as true or false in logical contexts. These are called truthy and falsy values.

// Falsy values (these all evaluate to false):
// false, 0, -0, 0n (BigInt zero), "", null, undefined, NaN

// Everything else is truthy:
// true, any number (except 0 and NaN), any non-empty string, objects, arrays
// (even empty ones: [] and {} are truthy!)

console.log(Boolean(0));          // false
console.log(Boolean(""));         // false
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false

console.log(Boolean(1));          // true
console.log(Boolean("hello"));    // true
console.log(Boolean(42));         // true
console.log(Boolean("0"));        // true (non-empty string!)
                

String Operators

The + operator does double duty — it adds numbers and concatenates (joins) strings.

// Concatenation
let first = "Java";
let second = "Script";
let combined = first + second;
console.log(combined);  // "JavaScript"

// Concatenation with variables
let greeting = "Hello, " + "World!";
console.log(greeting);  // "Hello, World!"

// += works with strings too
let message = "Good";
message += " morning!";
console.log(message);  // "Good morning!"
                

Operator Precedence

When an expression has multiple operators, JavaScript follows a specific order — just like math class (PEMDAS/BODMAS). Key points:

1. Parentheses () — evaluated first (always use these to be explicit!)
2. Exponentiation **
3. Multiplication / Division / Modulo * / %
4. Addition / Subtraction + -
5. Comparisons < > <= >=
6. Equality === !== == !=
7. Logical AND &&
8. Logical OR ||
9. Assignment = += -= etc.

// Without parentheses — follows precedence rules
let result = 2 + 3 * 4;
console.log(result);  // 14 (not 20! multiplication first)

// With parentheses — explicit and clear
let result2 = (2 + 3) * 4;
console.log(result2);  // 20

// Complex expression
let total = 100 - 20 * 0.1 + 5;
console.log(total);  // 103 (20 * 0.1 = 2, then 100 - 2 + 5)

// Clear version with parentheses
let total2 = (100 - (20 * 0.1)) + 5;
console.log(total2);  // 103 (same result, but intention is clear)
                

Hands-on Exercise

// Tip Calculator

// TODO: Set up these variables
// const billAmount = 85.50;
// const tipPercentage = 20;  // 20%
// const numberOfPeople = 3;

// TODO: Calculate:
// 1. tipAmount (billAmount * tipPercentage / 100)
// 2. totalWithTip (billAmount + tipAmount)
// 3. perPerson (totalWithTip / numberOfPeople)

// TODO: Log the results using template literals
// "Bill: $85.50"
// "Tip (20%): $17.10"
// "Total: $102.60"
// "Per person: $34.20"

// BONUS: Check if the bill is "expensive" (over $100 after tip)
// Log whether it is using a comparison
                    

const billAmount = 85.50;
const tipPercentage = 20;
const numberOfPeople = 3;

const tipAmount = billAmount * tipPercentage / 100;
const totalWithTip = billAmount + tipAmount;
const perPerson = totalWithTip / numberOfPeople;

console.log(`Bill: $${billAmount.toFixed(2)}`);
console.log(`Tip (${tipPercentage}%): $${tipAmount.toFixed(2)}`);
console.log(`Total: $${totalWithTip.toFixed(2)}`);
console.log(`Per person: $${perPerson.toFixed(2)}`);

// Bonus: Check if expensive
const isExpensive = totalWithTip > 100;
console.log(`Expensive? ${isExpensive}`);  // true
                        

let points = 10;
points += 5;
points *= 2;

📓 Learning Journal

Summary

📚 Additional Resources

• MDN — Expressions and Operators
• javascript.info — Basic Operators
• javascript.info — Comparisons

🚀 What's Next?

You've completed Module 1! You now have the fundamentals: variables, data types, and operators. In Module 2, you'll learn to control the flow of your programs with conditionals — making your code make decisions with if, else, and switch.