Making Things Happen with Operators | HAP's Learning Lab: JavaScript Foundations

What You'll Learn at This Station

HAP's Discovery: Operators are how I make things happen in my code. Arithmetic operators do math. Comparison operators ask yes/no questions about my data. And the difference between = and === is crucial! Here are the three key insights:

🔢 Arithmetic

+ - * / %

Math operators for calculations. Addition, subtraction, multiplication, division, and remainder (modulo).

❓ Comparison

=== !== > <

Ask questions about your data. Is this bigger? Are these equal? Results are always true or false.

⚠️ = vs ===

Critical!

= assigns a value. === compares values. Mix them up and your code breaks in confusing ways.

HAP surrounded by tangled code with an 'oops' expression

HAP's Confession:

I used = when I meant ===. One assigns, the other compares. That single character difference broke my entire program!
I forgot that comparison operators return booleans. 5 > 3 doesn't give you a number—it gives you true!
I tried to use == (double equals) and got weird results. Prof. Teeters said "Always use triple equals. Trust me on this one."

Arithmetic Operators — Doing Math

These operators work just like math class, with one addition: the % operator gives you the remainder after division.

Math with my Robot ID Card:

// Arithmetic operators - doing math
let energyLevel = 100;
const energyCost = 15;

energyLevel = energyLevel - energyCost;  // Subtraction: 100 - 15 = 85
console.log(energyLevel);  // 85

let tasksDone = 0;
tasksDone = tasksDone + 1;  // Addition: 0 + 1 = 1
console.log(tasksDone);     // 1

// Other arithmetic operators
console.log(10 * 3);   // Multiplication: 30
console.log(20 / 4);   // Division: 5
console.log(17 % 5);   // Remainder (modulo): 2 (17 ÷ 5 = 3 remainder 2)

Notice how I update energyLevel by using its current value in the calculation. The right side is computed first, then assigned to the left side.

+ Addition

5 + 3 = 8. Also concatenates strings (which can cause surprises with mixed types!).

- Subtraction

10 - 4 = 6. Only works with numbers. Great for decreasing values like energy.

* Multiplication

6 * 7 = 42. Use the asterisk, not x like in math class.

% Remainder

17 % 5 = 2. What's left over after division. Useful for checking odd/even or wrapping values.

Comparison Operators — Asking Questions

Comparison operators ask yes/no questions about your data. The answer is always a boolean: true or false.

Asking questions about energy:

// Comparison operators - asking questions
const energyLevel = 85;

console.log(energyLevel > 50);   // Is 85 greater than 50? true
console.log(energyLevel < 50);   // Is 85 less than 50? false
console.log(energyLevel >= 85);  // Is 85 greater than or equal to 85? true
console.log(energyLevel <= 100); // Is 85 less than or equal to 100? true
console.log(energyLevel === 85); // Is 85 strictly equal to 85? true
console.log(energyLevel !== 100); // Is 85 not equal to 100? true

Each comparison returns true or false. These are perfect for making decisions in your code!

🟠 HAP's Tip:

Read comparisons out loud! energyLevel > 50 becomes "Is energyLevel greater than 50?" If you can ask it as a yes/no question, it's a comparison.

The Critical Difference: = vs ===

This is the mistake that cost me hours of debugging. These two operators look similar but do completely different things:

Assignment vs comparison:

// THE BIG MISTAKE: = vs ===

// = assigns a value (puts something in the box)
let score = 100;  // score GETS 100

// === compares values (asks a question)
console.log(score === 100);  // Is score equal to 100? true

// The bug I made:
// if (score = 100)  // ❌ This ASSIGNS 100 to score!
// if (score === 100)  // ✅ This COMPARES score to 100

// Prof. Teeters' rule: "Always use triple equals for comparison.
// Double equals does type coercion, and that's a conversation for another day."

Prof. Teeters' advice: "Always use triple equals for comparison. Double equals does type coercion, and that's a conversation for another day."

= (Single)

Assigns a value. "x gets 5." Puts something in the box.

=== (Triple)

Compares values strictly. "Is x equal to 5?" Returns true or false.

== (Double)

Compares with type coercion. Can cause surprises. Avoid for now.

!== (Not equal)

"Is x NOT equal to 5?" The opposite of ===. Also uses strict comparison.

Grace's Helper Functions

One day, a new file appeared in my project: helpers.js. Grace had provided tools to help me build my Robot ID Card.

Grace Hopper Explains:

"I have provided tools. Use randomBetween(1, 10) for your daily challenge. Use choose(condition, ifTrue, ifFalse) for your mood. You need not understand the implementation. That lesson comes later."

Using the helper functions:

// Grace provided these helper functions
// "You need not understand the implementation. That lesson comes later."

// Random number between min and max (inclusive)
const todaysChallenge = randomBetween(1, 10);
console.log(todaysChallenge);  // Could be 1, 2, 3... up to 10

// Random true or false (like flipping a coin)
const isLucky = coinFlip();
console.log(isLucky);  // true or false

// Choose between two values based on a condition
const currentMood = choose(
    energyLevel > 50,      // condition to check
    "Energized!",          // value if true
    "Need rest..."         // value if false
);
console.log(currentMood);  // Depends on energyLevel!

These functions handle complexity we haven't learned yet. Focus on using them—understanding how they work comes later!

randomBetween(min, max)

Returns a random whole number between min and max, inclusive. Great for unpredictable values!

coinFlip()

Returns true or false randomly. Like flipping a coin—50/50 chance.

choose(condition, a, b)

If condition is true, returns a. Otherwise returns b. Simple decision-making without if/else!

updateDisplay()

Updates the Robot ID Card to show current values. Call this after changing variables!

🛠️ Try the Helpers

Want to play with these functions without writing code? Open the Operator Playground and scroll to the Helper Functions section. Roll random numbers, flip coins, and toggle the choose() condition to see how each one works!

Putting It All Together

Here's how all these operators work together in my Robot ID Card:

The complete Robot ID Card logic:

// Putting it all together for my Robot ID Card
let energyLevel = 100;
let tasksDone = 0;

// Complete a task
const energyCost = 15;
energyLevel = energyLevel - energyCost;  // Now 85
tasksDone = tasksDone + 1;               // Now 1

// Today's random challenge
const todaysChallenge = randomBetween(1, 10);

// Mood based on energy
const currentMood = choose(
    energyLevel > 50,
    "Energized!",
    "Need rest..."
);

// Display values
console.log("Energy:", energyLevel);        // 85
console.log("Tasks:", tasksDone);           // 1
console.log("Challenge:", todaysChallenge); // Random 1-10
console.log("Mood:", currentMood);          // "Energized!"

Arithmetic changes values. Comparison determines mood. Helper functions add randomness. It all works together!

Breakthrough Moment!

Operators aren't just math. They're how I ask questions about my data. Is this bigger? Are these the same? That's when JavaScript started feeling like a conversation with my program!

🧮 See It All Working

The Operator Playground combines everything from this station: arithmetic calculations, comparison operators, the = vs === trap demonstration, and all the helper functions. Try running your energy down in the Robot ID Card Demo to watch operators in action!

The Joy of Experimentation

I changed energyLevel from 100 to 50 and called updateDisplay(). The card updated! I changed it to 9000 just to see what would happen. The card showed 9000%. Way too much energy for any robot, but it worked.

Prof. Teeters walked by. "Having fun?"

"I made myself have 9000% energy."

"Good. Now make yourself have negative energy and see what happens." 🟠

🟠 Try It Yourself:

Change values and see what happens! What if energy is 0? What if it's -50? What if you complete 1000 tasks? Experimentation is how you really learn what code does. Break things, then figure out why!

Type Conversion for Display

Sometimes you need to convert between types. We saw Number() in Station 4—here's its partner, String():

Converting for display:

// Type conversion for display
const energyLevel = 85;

// String() converts a number to text
const energyDisplay = String(energyLevel) + "%";
console.log(energyDisplay);  // "85%"

// Number() converts text to a number (we saw this in Station 4)
const userInput = "42";
const actualNumber = Number(userInput);
console.log(actualNumber + 8);  // 50 (math works!)

String() converts numbers to text. Number() converts text to numbers. Use the right one for the job!

🎓 Operators Quick Reference

Arithmetic: + - * / %

Math operations. Remember % gives the remainder, not percentage!

Comparison: === !== > < >= <=

Ask questions, get booleans. Always use === for equality, not ==.

= assigns, === compares

x = 5 puts 5 in x. x === 5 asks "is x equal to 5?"

Helper functions

randomBetween(min, max), coinFlip(), choose(condition, a, b)

Read comparisons out loud

"Is energyLevel greater than 50?" If it's a yes/no question, it's a comparison.