The Mental Model of Variables

The Essentials

1. Not a Box: Variables are not containers or boxes that hold values.
2. Pointers to Values: Think of variables as contacts in an address book that point to a specific value in memory.
3. Evaluating Expressions First: When you assign a variable using an expression, JavaScript evaluates the entire expression first to get a single value, and then points the variable to that value.

---

If you have learned other programming languages or read older programming books, you might have heard variables described as "boxes" or "containers" that hold values.

While that is a helpful beginner metaphor, it is misleading in JavaScript. If you think of variables as boxes, you will eventually encounter a bug that makes absolutely no sense to you.

Instead, I find it much more accurate to think of variables as pointers or contacts in an address book.

The Address Book Metaphor

Imagine your smartphone's contact list. You have a contact named "Stephen" associated with the phone number 555-5555.

The name "Stephen" is the variable. The phone number 555-5555 is the value.

The name "Stephen" does not contain the phone number; it just points to it. When you tell your phone to "Call Stephen," it looks up the name, finds the number it points to, and dials the number.

Expressions and Variables

Take a look at how this pointer model works when you declare and assign a variable using an expression:

When JavaScript runs this line, it does not stuff the entire math equation into a box. Instead, it follows a strict sequence:

1. It creates the variable name answerToLife in its internal address book.
2. It completely evaluates the expression on the right side of the = sign. It does the math and resolves the expression down to the single value 42.
3. It draws an arrow (a pointer) from the name answerToLife to the value 42.

The "Scrub" and "Busta" Problem

To prove why the "box" metaphor fails and the "address book" metaphor succeeds, take a look at a classic JavaScript assignment problem using a pop music reference.

What happens to the value of busta at the end of this code?

If you think of variables as boxes, you might think:

• I put "fly" in the scrub box.
• I put the scrub box inside the busta box.
• I changed the scrub box to hold "no love".
• Therefore, busta must now be "no love".

But if you run this in your console, you will find that busta is still "guy that thinks he's fly".

I can walk through it with the address book model:

1. let scrub = "guy that thinks he's fly";: JavaScript adds scrub to the address book and points it to the string value "guy that thinks he's fly".
2. let busta = scrub;: JavaScript evaluates the right side of the equals sign. It looks up scrub and sees it evaluates to "guy that thinks he's fly". So, it adds busta to the address book and points it to that same string value. busta does not point to scrub; it points to the value that scrub evaluated to at that exact moment.
3. scrub = "guy that can't get no love";: JavaScript updates the scrub pointer in the address book to point to a brand new string value.

Because busta was pointing directly to the original string value, it does not care that scrub changed its number. busta is completely unaffected.

In JavaScript, when dealing with primitive values (like strings, numbers, and booleans), variables point to the evaluated value at the time of assignment. They do not point to other variables.

Further Reading and Watching

• FrontendMasters: JavaScript First Steps - The source course for this foundational concept.