Variables and Assignment

Imagine you are keeping score in a game. You need somewhere to remember the score, and you need to be able to change it whenever someone scores a point. In programming, that somewhere is called a variable. The best way to picture a variable is as a labelled box: the label is its name, and inside the box sits a value — a number, a word, anything you want the computer to hold on to.

A variable does two jobs at once. It stores a value so the computer can use it again later, and it gives that value a clear name so you can talk about it. Instead of "that number 0 over there", you say score — and everyone (including the computer) knows exactly what you mean.

Putting a value in the box: assignment

To put a value into a variable you use assignment, and the tool for the job is the single equals sign, =. In TypeScript you make a brand-new box with the word let, then use = to drop a value inside:

\underbrace{\texttt{score}}_{\text{the box's name}} \;\;\texttt{=}\;\; \underbrace{0}_{\text{the value going in}}

Read the = out loud as "gets" or "becomes", never as "equals". let score = 0 means "the box called score gets the value 0". Here is a complete program. Press Run and watch what console.log prints — that's the computer showing you what is inside the box.

let score: number = 0; // make a box named "score", put 0 in it let playerName: string = "Ada"; // a box can hold words too console.log(playerName + " starts with a score of " + score);

score holds a number and playerName holds some text, but the idea is the same for both: a named box with a value inside. The label : number and : string just tell the computer what kind of thing each box is allowed to hold.

A picture of the box

Whenever you feel lost, come back to the picture: a variable is a labelled box, and assignment is the act of dropping a new value into it. The label stays put; only the contents change.

Changing what's in the box: reassignment

The whole point of a variable is that you can change it. Assigning a new value to a box that already exists is called reassignment, and you do it with the very same = — but this time you don't write let again, because the box is already made. When you assign a new value, the old one is thrown away: the box only ever holds the latest value you put in it.

let score: number = 0; console.log("Start: " + score); // 0 score = 10; // reassign: the 0 is gone, 10 is in the box now console.log("After a goal: " + score); // 10 score = 25; // reassign again — 10 is thrown away console.log("After another: " + score); // 25

Notice there is only ever one box called score the whole way through. Each line with = replaces what's inside. If you asked the computer for score at the very end, it would say 25 — the most recent value — because it has completely forgotten the 0 and the 10.

The trick that looks impossible: score = score + 1

Very often you want to nudge a variable up by one — score another point, take another life. You will see this written all the time:

\texttt{score = score + 1}

In a maths lesson that line would be nonsense — no number equals itself plus one! But = is not the maths "equals". The computer follows two clear steps:

  1. First, work out the right-hand side using the value currently in the box. If score holds 24, then score + 1 works out to 25.
  2. Then, put that answer back into the box on the left. Now score holds 25.

Run it and watch the score climb, one point at a time:

let score: number = 0; score = score + 1; // right side first: 0 + 1 = 1, then store 1 console.log(score); // 1 score = score + 1; // 1 + 1 = 2, then store 2 console.log(score); // 2 score = score + 10; // 2 + 10 = 12, then store 12 console.log(score); // 12

The number-one beginner trap is reading = as the maths "equals". It doesn't mean "these two things are equal" — it means "work out the right-hand side, then put that value into the box on the left". The two sides play completely different roles: the left is always a box to store into, and the right is a value to work out first.

That's why score = score + 1 makes perfect sense to a computer. It works out score + 1 using the current contents, then overwrites the box. Reading it as "gets" makes it obvious: "score gets the old score plus one." And because the sides are different jobs, score = 10 is fine but 10 = score is an error — you can't store something into the number 10.

Choosing good names

The computer doesn't care what you call your boxes — x, q7 and thing all work. But you care, and so does anyone who reads your code later (which is usually future-you!). A good variable name says exactly what's inside the box, so the program almost reads like English.

// Hard to follow: what do these boxes even hold? let x: number = 3; let y: number = 25; console.log(x * y); // Same maths, but now it explains itself: let numberOfLives: number = 3; let pointsPerLife: number = 25; console.log(numberOfLives * pointsPerLife);

A few habits worth picking up: start the name with a lower-case letter, use whole words like highScore or playerName (join words by capitalising each new one — this style is called camelCase), and avoid spaces. A name like timeLeft tells the story; t makes you guess.

If you were allowed to write high score with a space, the computer couldn't tell whether you meant one box called "high score" or two separate boxes, high and score, sitting next to each other. To keep things unambiguous, names must be a single unbroken word. Programmers get round it by squashing the words together and capitalising the joins — highScore — or sometimes with underscores, high_score.

Swapping the contents of two boxes

Here's a puzzle that really tests whether you've understood boxes. Suppose a holds 5 and b holds 8, and you want to swap them. If you just write a = b then b = a, it goes wrong — the moment you do a = b, the old value of a is thrown away, so the second line copies b back into itself. The fix is a third box to hold the value safely for a moment:

let a: number = 5; let b: number = 8; let temp: number = a; // stash a's value (5) somewhere safe a = b; // a now holds 8 b = temp; // b now holds the stashed 5 console.log("a = " + a + ", b = " + b); // a = 8, b = 5

This little dance only makes sense once you truly see assignment as "throw away the old contents, store the new" — exactly the mental model this page is about.