Remembering Things with Variables | HAP's Learning Lab: JavaScript Foundations

What You'll Learn at This Station

HAP's Discovery: Variables let me store information once and use it anywhere in my program. No more copying and pasting! I learned there are two kinds: const for things that never change, and let for things that do. Here are the three key insights that helped me understand variables:

📦 const = Facts

Never changes

Use const for values that stay the same forever, like my name or model number. Once set, you can't reassign it.

🔄 let = State

Can change

Use let for values that update over time, like my energy level or how many tasks I've completed.

🏷️ Names Matter

Be descriptive

Good variable names tell you what's inside without having to look. energyLevel beats x every time.

HAP surrounded by tangled code with an 'oops' expression

HAP's Confession:

I named my first variables x, y, and z. A week later, I had no idea what any of them held. Now I use names like robotName and energyLevel.
I tried to change a const and got an error. That's actually a good thing—JavaScript was protecting me from accidentally changing something that shouldn't change!
I forgot you can't start a variable name with a number. 7thTask doesn't work, but task7 does.

The Two Kinds of Variables

Prof. Teeters explained that JavaScript has two main ways to create variables, and choosing the right one helps communicate your intentions to both the computer and other programmers.

const — For Facts

Facts don't change. My name will always be "HyBit A. ProtoBot." My model number will always be "HAP-7000." These are const values.

let — For State

State changes over time. My energy level goes up and down. My task count increases as I work. These are let values.

Why It Matters

Using const tells everyone "this won't change." If you accidentally try to change it, JavaScript will stop you with an error.

When in Doubt

Start with const. If you later need to change the value, switch to let. This is safer than the other way around.

🟠 HAP's Tip:

I think of const as "constant" and let as "let me change this later." The names actually tell you what they do!

Facts About HAP (const)

Here's how I declared the unchanging facts for my Robot ID Card. These values are set once and never modified:

My Robot ID Card facts:

// Facts about HAP (const — these don't change)
const robotName = "HyBit A. ProtoBot";
const modelNumber = "HAP-7000";
const creationYear = 2024;

console.log(robotName);    // "HyBit A. ProtoBot"
console.log(modelNumber);  // "HAP-7000"
console.log(creationYear); // 2024

These three lines create labeled boxes for my permanent information. The const keyword promises these values won't change.

HAP's Current State (let)

Now here's the exciting part—values that actually change! Watch how my energy level and task count update as I work:

Tracking changing values:

// HAP's current state (let — these change!)
let energyLevel = 100;
let tasksDone = 0;
let statusMessage = "Ready to learn!";

// After completing a task...
energyLevel = energyLevel - 15;  // Now 85
tasksDone = tasksDone + 1;       // Now 1
statusMessage = "One task done!";

console.log(energyLevel);    // 85
console.log(tasksDone);      // 1
console.log(statusMessage);  // "One task done!"

The let keyword allows me to update these values. Notice how I can use the current value to calculate a new one!

Breakthrough Moment!

I finally understood why both const and let exist. My robotName is a fact—it never changes. My energyLevel is a situation—it goes up and down as I work. The distinction is about intent, not just capability!

🔬 See It in Action

Want to really feel the difference between const and let? Try the Variable Lab Demo! Click the buttons on let variables and watch them change. Then try clicking "Try to Change" on a const—you'll see exactly why constants are "locked."

Naming Your Variables

Prof. Teeters says "Naming things well isn't extra work—it's a gift to future-you." Here's why that matters:

Bad vs. Good names:

// ❌ Bad names - What do these even mean?
let x = 100;
let y = "HAP-7000";
let z = true;

// ✅ Good names - Clear and descriptive
let energyLevel = 100;
let modelNumber = "HAP-7000";
let isLearning = true;

Future-you will thank present-you for using clear, descriptive names!

camelCase Convention

JavaScript uses camelCase: first word lowercase, then capitalize each new word. energyLevel, tasksDone, robotName.

Valid Characters

Use letters, digits, $, and _. Never start with a digit. task7 works, 7task doesn't.

Be Specific

userAge is better than age. totalPrice is better than price. Context helps!

Avoid Abbreviations

backgroundColor beats bgClr. You'll read code far more often than you write it.

The Assignment Operator (=)

Here's something that confused me at first: in JavaScript, = doesn't mean "equals" like in math. It means "gets the value of."

How assignment works:

// The assignment operator (=) means "gets the value of"
// Read it left to right: "energyLevel GETS 100"

let energyLevel = 100;      // Create box, put 100 inside
energyLevel = 85;           // Replace contents with 85
energyLevel = energyLevel - 10;  // Replace with current value minus 10

// This does NOT work:
// 100 = energyLevel;  // ❌ Error! Left side must be a variable

Read assignments left to right: the variable on the left GETS the value on the right. The left side must always be a variable (the box to put things in).

🟠 The Labeled Box Mental Model:

Variables are labeled boxes. The name is the label on the outside. The value is what's inside. When you assign a new value, you're swapping what's in the box—the label stays the same!

🎓 Variables Quick Reference

Use const for facts

const robotName = "HAP"; — Values that never change. JavaScript will error if you try to reassign.

Use let for state

let energyLevel = 100; — Values that change over time. Update with energyLevel = 85;

Use descriptive names

Use camelCase: tasksDone, statusMessage, creationYear. Future-you will thank you.

= means "gets"

Read x = 5 as "x gets 5." The variable on the left receives the value on the right.

When in doubt, const

Start with const. If you need to change it later, switch to let. This catches accidental changes.