Hi, I'm Nicholas Johnson!

software engineer / trainer / AI enthusiast

Maths Operators - Doing Sums

JavaScript is great for maths. Lets say we need to know what 3 times 5 is. We can just ask JavaScript:

alert(3 * 5);

So handy! You’ll never need a desk calculator again. We can also combine maths with our new found knowledge of variables like so:

let slices = 12;
let slicesNeededForASandwich = 2;
let numberOfSandwiches = slices / slicesNeededForASandwich;
alert(numberOfSandwiches);

Note the that a forward slash (/) means division.

Maths characters

The following special characters are used when doing maths in Javascript.

  • Addition: +
  • Subtraction: -
  • Multiplication: *
  • Division: /
  • Test for greater than: >
  • Test for less than: <
  • Test for equal to: ===
  • Brackets can be used as in maths to separate a part of the equation. ( )

There are a few more that you might need later, but these will do for now. These characters are the same in almost every programming language you will come across.

Exercise: Doing Sums

  1. Create an HTML file and linked Javascript file.
  2. Output 5 - 2 using an alert box
  3. Output 6 * 9
  4. Output 6 * 9 + 4
  5. Output 6 * (9 + 4)
  6. Output (1 + 1) * (1 + 1)

Answers

  1. alert( 5 - 2 );
  2. alert( 6 \* 9 );
  3. alert( 6 \* 9 + 4 );
  4. alert( 6 \* (9 + 4) );
  5. alert( (1 + 1) \* (1 + 1) );

Exercise - equality

  1. Try this now, alert 1 + 1 === 2, what do you get?
  2. Now alert 5 + 5 === 10 What do you get?
  3. What if I were to do this instead: 5 + (5 === 2). Whoah, that’s weird. Why did you get this result?
  4. Now try 5 + (5 === 5). Also weird. Why did you get this result? You’ll find out more when we get to Booleans.

Answers

  • The braces force the right part of the expression to be evaluated first. Unlike maths, === is just an operator, the same as + or -. 5 === 2 is false.
  • 5 + (5 === 2) is the same as 5 + false. JavaScript doesn’t know how to do this, so it converts the false into zero and gives you 5 + 0 which is 5
  • 5 + (5 === 5) is the same as 5 + true. JavaScript doesn’t know how to do this either, so it converts the true into 1 for “historical reasons” and gives you 5 + 1 which is 6.

Exercise: Sandwich Calculator

  1. Create an HTML file and linked JavaScript file.
  2. Enter the following code:
let slices = 12;
let slicesNeededForASandwich = 2;
let numberOfSandwiches = slices / slicesNeededForASandwich;
alert(numberOfSandwiches);
  1. Find out how many sandwiches you can make?
  2. You have taken a large job lot of bread, 800 slices in total, and it’s starting to go stale. Quickly adjust the code to find out how many sandwiches you can make with all that bread.
  3. You decide to make Club sandwiches for a swanky dinner, and you need 3 slices for each. Adjust the code to find out how many sandwiches you can make with those 800 slices?
  4. There’s a problem with the delivery and some of the bread comes damaged! You estimate 10% it is no good! How many slices do you have now? How many sandwices can you make?

Answers

If you have 800 slices, you need to change the value of the slices variable like so:

let slices = 800;
let slicesNeededForASandwich = 2;
let numberOfSandwiches = slices / slicesNeededForASandwich;
alert(numberOfSandwiches);

To find out how many club sandwiches we need, all we need to do is change the value of slicesNeededForASandwich from 2 to 3. We will now get the correct answer.

let slices = 800;
let slicesNeededForASandwich = 3;
let numberOfSandwiches = slices / slicesNeededForASandwich;
alert(numberOfSandwiches);

To estimage the 10% damage, you can just multiply slices by 0.9 to get the usable slices that remain.

let slices = 800 * 0.9;
let slicesNeededForASandwich = 3;
let numberOfSandwiches = slices / slicesNeededForASandwich;
alert(numberOfSandwiches);

You did it! Horray for maths and Horray for you!

We need to do this sort of thing all the time in JavaScript, whether we’re working out the size of a page element, writing a handy little VAT calculator for our online shopping cart, or deciding to increase our spend on Google AdWords.

Now on to functions…