Variables Working Together

Variables become really useful when you start combining them.

Doing math with variables

const priceOfJollof = 45;
const numberOfPlates = 3;
const total = priceOfJollof * numberOfPlates;

console.log(total);

135

JavaScript looks inside the boxes, finds 45 and 3, multiplies them, and puts the result 135 into a new box called total. Variables can be used anywhere you'd use the value itself.

Gluing text with variables

Remember how + glues text together? It works with variables too:

const firstName = "Lucas";
const greeting = "Hello, " + firstName + "! Welcome back.";
console.log(greeting);

Hello, Lucas! Welcome back.

Notice the space after the comma in "Hello, ". JavaScript doesn't add spaces for you when gluing text, so you have to include them yourself. Leave it out and you'd get Hello,Lucas!. (In Grade 2, you'll learn a much nicer way to do this, called template literals.)

Updating a variable using its old value

Here's a line of code that confuses almost every beginner the first time they see it:

score = score + 10;

In math class, this would be nonsense. How can a number equal itself plus ten?! But remember: = doesn't mean "equals." It means "put into." And JavaScript always works out the right side first:

1. Look in the score box. Say it contains 50.
2. Work out 50 + 10, which is 60.
3. Put 60 into the score box, replacing the 50.

let score = 50;
console.log(score);

score = score + 10;
console.log(score);

score = score + 10;
console.log(score);

50
60
70

This "update using the old value" pattern is everywhere: adding points in a game, counting how many times a button was clicked, adding items to a total. You'll use it constantly.

The swap puzzle

Here's a classic programming puzzle. You have two cups: one full of juice and one full of milk. How do you swap them, so the juice ends up in the milk cup and the milk ends up in the juice cup?

You can't just pour one into the other. You need a third, empty cup:

1. Pour the juice into the empty cup.
2. Pour the milk into the (now empty) juice cup.
3. Pour the juice from the third cup into the (now empty) milk cup.

Variables work the same way:

let cupA = "juice";
let cupB = "milk";

let temp = cupA;   // 1. pour cupA into the spare cup
cupA = cupB;       // 2. pour cupB into cupA
cupB = temp;       // 3. pour the spare cup into cupB

console.log(cupA, cupB);

milk juice