⚡ Lesson 4: Operators & Expressions

Introduction

Variables store data, but operators enable you to transform and evaluate that data—performing arithmetic, comparing values, and combining logical conditions to build expressions. An expression is any code that evaluates to a value: 2 + 3 is an expression producing 5.

This lesson covers the operators foundational to your JavaScript development.

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  (both are "falsy")
                

// Why == is dangerous — these are all true!
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, "", null, undefined, NaN

// Everything else is truthy:
// true, any number (except 0), any non-empty string, objects, arrays

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
                        

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.