let color = "blue"
let fruit = "berry"
color + fruit       // "blueberry"
fruit.toUpperCase() // "BERRY"

Let there be confusion

Don't let me down

Unfortunately, in JavaScript you can only use let once per variable name (in a given scope), otherwise you will get an error:

Identifier 'x' has already been declared

That means that when you're in the JavaScript console, if you see this error then try again without the let

> let x = 1
> let x = x + 2
SyntaxError: Identifier 'x' has already been declared
> x = x + 2

The Warehouse Metaphor

Think of memory as a giant warehouse.

Warehouse from Raiders of the Lost Ark

Like this warehouse from the movie Raiders of the Lost Ark, computer memory is vast and filled with boxes of various sizes.

The Warehouse Metaphor Explained

If memory is a giant warehouse...

...and memory locations are boxes in that warehouse

...then a value is the contents of a box

...and a variable is a label you stick on the outside of the box

Variables are documentation

Which is clearer, this:

60 * 60 * 24

or this:

let secondsPerMinute = 60
let minutesPerHour = 60
let hoursPerDay = 24
let secondsPerDay = secondsPerMinute * minutesPerHour * hoursPerDay


Lab: Play In Console

Let's spend a few minutes just playing around with variables in the JavaScript console.

Some things to try:

The Pointer Metaphor

let snack = "Apple"


Think of a variable as an arrow pointing to a value.

Changing Variables

You can assign and reassign variables at will.

color = "blue"     // assign 'blue' to color
fruit = "berry"    // assign 'berry' to fruit
color + fruit      // 'blueberry'

color = "black"    // 'black'
color + fruit      // 'blackberry'

Reaassignment only changes the name of an object. It does not change the data inside the object.

This is analogous to removing a label from one box and placing it on a different box.

Tip: Did you get an Identifier 'color' has already been declared error? Try again without the let, or restart your JavaScript console (in a Browser, Reload the page; in a Terminal, quit and relaunch node).

Many pointers can point to the same thing

let fruit = "Apple"
let snack = fruit


After this both snack and fruit are pointing to the same value

This is analogous to placing two labels on the same box.

Return values are new

Most messages return new values:

let fruit = "banana"
let snack = fruit.toUpperCase()


"banana" and "BANANA" are two different values in memory. The original value is still sitting around and still pointed to by fruit.

Changing Values

Most messages do not change the data inside the object.

let color = "blue"
color.toUpperCase()     // "BLUE"
color                   // "blue"

This is true for all strings, since strings in JavaScript are immutable. Any message that transforms a string will return you an entirely new string.

But some messages do change the contents!

Changing Values Example

Let's say we have a friend named Joe and his birthday is Independence Day, 1990.

We will use the built-in JavaScript Date type to represent a year+month+day.

let independenceDay1990 = new Date(1990, 6, 4)
independenceDay1990.toDateString()    // 'Wed Jul 04 1990'
let joesBirthday = independenceDay1990

Then we learn that Joe's birthday is actually Bastille Day. No problem, we'll just tweak the variable.

joesBirthday.toDateString()           // 'Sat Jul 14 1990'

But what happened to the original date?

independenceDay1990.toDateString()    // 'Sat Jul 14 1990'

Oops! Our program now thinks Independence Day 1990 was on July 14. This is a problem. What's the solution?

Constants: Variables that Aren't Variable

const pi = 3.14159;
pi = 7;
TypeError: Assignment to constant variable.

WARNING: const prevents reassignment but does not prevent changing the insides of objects (like the dates in the previous slide).

Summary: Variables

 Previous Lesson Next Lesson