Calculating with Arithmetic Operators

Welcome back to Storing and Calculating with JavaScript Values! In the previous lesson we taught a variable to change, and along the way we wrote our first tiny calculation: cupsSold + 2. That single + was doing something we have not looked at properly yet - it was asking JavaScript to work out a new number for us.

Calculating is one of the things computers do best, and in this lesson we give JavaScript the full set of tools for it. We will learn how to:

• Add, subtract, multiply, and divide with the four arithmetic operators.
• See how JavaScript works an expression out to a single value before printing or storing it.
• Predict which part of a longer calculation happens first.
• Use parentheses to take control of that order.

By the end, we will have a program that works out an order total, the change from a 20-dollar bill, and a fair share per person - without doing any of the arithmetic ourselves.

An operator is a symbol that tells JavaScript to do something with the values on either side of it. The four we need today are the ones we already know from school, with two small changes in how they are written:

• + adds, exactly as we would expect.
• - subtracts.
• * multiplies. There is no × key on a keyboard, so programming languages use the asterisk instead.
• / divides. Likewise, the forward slash stands in for ÷.

Each operator sits between two numbers, and the two numbers together with the operator - 12 + 8, say - are called an expression. An expression is anything that JavaScript can work out to a single value.

Let's give console.log an expression instead of a plain number and see what it prints:

console.log(12 + 8);
console.log(20 - 4.5);
console.log(7 / 2);

Before it prints anything, JavaScript works each expression out - 12 + 8 becomes 20, and so on - and what we see is the finished value, never the sum itself:

20
15.5
3.5

Two things are worth noticing. First, 12 + 8 is nowhere in the output; the expression is replaced by its result. Second, division happily produces a number with a decimal point when the numbers do not divide evenly: 7 / 2 is 3.5, not 3 with something left over. JavaScript treats 3.5 and 20 as the same kind of value - a number - so we can mix them freely.

Operators do not care whether the numbers are typed in directly or stored in variables. This is where calculations start to feel useful:

const pricePerCup = 4.5;
const cupsOrdered = 3;

console.log("Order total:", pricePerCup * cupsOrdered);

JavaScript looks up the two values, multiplies them, and hands the result to console.log alongside the label:

Order total: 13.5

If the price changes next week, we edit one line - the const - and the total comes out right without touching the calculation. That is the payoff of storing values under names.

When an expression has more than one operator, JavaScript has to decide which to do first, and the order it picks matters:

console.log(2 + 3 * 4);

If we worked left to right, we would add first - 2 + 3 is 5 - and then multiply to get 20. But JavaScript does not work left to right here:

14

The rule is the one we learned in school: multiplication and division happen before addition and subtraction. So JavaScript works out 3 * 4 first, getting 12, and only then adds the 2. Written out step by step: 2 + 3 * 4 becomes 2 + 12, which becomes 14. When two operators are at the same level - two additions, or a multiplication and a division - it works from left to right.

The same rule is quietly at work in this line, which multiplies before it subtracts:

console.log("Change from 20:", 20 - pricePerCup * cupsOrdered);

The total 13.5 is worked out first, then taken away from 20:

Change from 20: 6.5

Sometimes we want the addition to happen first. Parentheses tell JavaScript exactly that: whatever is inside them is worked out before anything outside them, just as in maths class.

console.log((2 + 3) * 4);

Now 2 + 3 is worked out first, and its result is what gets multiplied - (2 + 3) * 4 becomes 5 * 4, which becomes 20:

20

We have seen parentheses since our very first console.log, holding the thing to print. Inside an expression they do a different job: they group. Parentheses are also welcome when they are not strictly needed. Writing 20 - (pricePerCup * cupsOrdered) gives the same answer as leaving them out, but it lets a reader see the intended order at a glance - and it saves us from having to remember the rule under pressure.

A calculation does not have to be printed straight away. We can store its result under a name and use it later, exactly as we stored a typed-in value:

const costPerPerson = pricePerCup * cupsOrdered / 3;
console.log("Each person pays:", costPerPerson);

This follows the rule we learned last lesson: the right side of = is worked out first, then the result is stored under the name on the left. Here that means 4.5 * 3 is 13.5, 13.5 / 3 is 4.5, and costPerPerson holds 4.5:

Each person pays: 4.5

Storing a result is a good habit whenever we need the same number twice, or whenever a name like costPerPerson would make the program easier to read than the calculation itself.

Here is everything from this lesson in one file:

const pricePerCup = 4.5;
const cupsOrdered = 3;

// JavaScript works out the expression to a single value before printing it
console.log("Order total:", pricePerCup * cupsOrdered);
console.log("Change from 20:", 20 - pricePerCup * cupsOrdered);

// Multiplication happens before addition
console.log(2 + 3 * 4);

// Parentheses decide what is calculated first
console.log((2 + 3) * 4);

// A result can be stored and reused
const costPerPerson = pricePerCup * cupsOrdered / 3;
console.log("Each person pays:", costPerPerson);

When we click Run, five lines appear, and every result in them was worked out by JavaScript from the values in the code - we did not do a single sum ourselves:

Order total: 13.5
Change from 20: 6.5
14
20
Each person pays: 4.5

Read the two middle lines together: the same three numbers and the same two operators, and the only difference is the parentheses. That is the whole point of them.

Well done! In this lesson, we met the four arithmetic operators +, -, *, and /, and we learned that JavaScript works an expression out to a single value before it prints or stores it. We saw that multiplication and division happen before addition and subtraction, that parentheses let us decide the order ourselves, and that a calculated result can be stored under a name just like any other value.

The practice tasks ahead put JavaScript to work as a calculator: totals, change, and a bill split fairly between friends. Let's go and let the computer do the sums!