Please enable JavaScript to use CodeHS

Basic Math in JavaScript

By Ryan Hart

Being able to manipulate numbers and perform mathematical operations is an essential skill in JavaScript. In fact, it’s almost unavoidable! Whether it’s converting ingredients from cups to tablespoons in a baking program, or having a counter in a video game that keeps track of a user’s high score, or placing graphic elements on a webpage, math is everywhere.

The nice thing about the math in JavaScript is that we approach it exactly the same way we would if we were doing it by hand or with a calculator. For example, in the program below, we are performing very simple calculations. Run the program to see their results.

In the example above, try changing the calculations to something more complex. You can use any of the below mathematical operation symbols in JavaScript.

+ for Addition
- for Subtraction
/ for Division
* for Multiplication
** for Exponent

Remember PEMDAS from Algebra?? The same rules apply to JavaScript as well: the operations in a calculation will follow the order of Parentheses, then Exponents, then Multiplication and Division, then Addition and Subtraction. Test your PEMDAS skills in the following two questions:

  1. Incorrect Correct No Answer was selected Invalid Answer

    Choose the correct output of the code: println(5 + 7 - 2 * 2).

  2. Incorrect Correct No Answer was selected Invalid Answer

    Choose the correct output of the code: println(110 / 10 - (2 + 3)).

Using variables with math

Now in programming, we often use both numbers and variables (that store numbers)! We perform the math operations the same way with variables as we do with numbers.Take a look at the following program that converts a user inputted temperature in Fahrenheit to Celsius. As you run the program, consider the questions below:

  • Why do we need to use variables in this program? Is it possible to write this same program without variables?
  • Math.round(celsius) is a function that rounds the number stored in celsius to the nearest integer, storing the new value in celsiusRounded. Try deleting that function to see how it changes the program’s output (that is, make line 8 read: celsiusRounded = celsius).

The Modulus

There is one other mathematical operation in JavaScript that is super useful:

% for Modulus

If you are new to programming, you probably haven’t seen this before. It can be a little tricky at first. Take a look at the example below and see if you can figure out what the modulus calculation is storing in the variables. Try inputing your own modulus calculations to explore further.

Were you able to figure it out??

Answer: the Modulus operator divides the two numbers, then keeps the remainder. Look again at the above calculations. Do you see it now?

15 / 6 = 2 with a remainder of 3
15 / 5 = 3 with a remainder of 0
15 / 4 = 3 with a remainder of 3
15 / 3 = 5 with a remainder of 0
15 / 2 = 7 with a remainder of 1

The remainder is what’s kept in the modulus calculation. This can be very useful in programs! For example, if you want to determine if a number is even, you can write following code: var remainder = number % 2. If the variable remainder is equal to 0, then number is even (since there was no remainder)!

Now it’s your turn!

Imagine a scenario where you are hosting a holiday party for your friends, and you are paying a company to cater the food. They charge $50 per table that can hold up to 5 people (or $10 per person). If there are any extra people that don’t fit at a full 5 person table, they can sit at an extra table that costs $15 per extra person (this catering company discourages partially full tables by charging more per person).

For example, if 23 people attend the party, there will be four full tables with 5 people each (a total of 20), and one extra table with 3 people. The total cost would be (4x50) + (3x15) = $245.

In the editor below, write a program that does the following:

  • Asks the user for the number of total people attending the party
  • Calculates and prints how many extra people will not be at a full table of 5
  • Calculates and prints the total cost of the party

HINTS:

  • See the Temperature Conversion example above to see how to store user input
  • If there are 15 people attending the party, there will be 0 not at a full table of 5; if there are 18 attending, there will be 3 not at a full table

TEST CASES:

  • If the user inputs 22 people, there will be 2 not at a full table, and the total cost of the party will be $230
  • If the user inputs 19 people, there will be 4 not at a full table, and the total cost of the party will be $210

Can we make it simpler?

There are many situations in which we only want to perform a very simple calculation. For example, an adventure video game might want to keep track of how many items the player is carrying. Every time the player picks up or drops an item, the variable containing the item count needs to increase or decrease by 1.

Instead of writing itemCount = itemCount + 1 every time, we can actually just write itemCount += 1 or itemCount++. All three of these do the same thing! Take a look at the example below to see some of the different ways you can use this for many simple calculations.

  • Can you think of examples for when you could use the below shortcuts and examples when you couldn’t?