Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Start a free Basic trial
to watch this video
Performing mathematical operations like adding, subtracting, and multiplying are a snap in JavaScript thanks to the builtin operators that make doing math in your programs a very natural process.

0:00
[? Music ?] [Treehouse]

0:08
So far we've seen the different ways that we can define numbers in JavaScript.

0:11
Now we'll take a look at a few of the mathematical operators

0:13
that we can use to actually work with those numbers.

0:17
At this point, we should be pretty familiar with how to actually get numbers

0:20
into our variables or into our JavaScript code.

0:24
Now what can we do with them?

0:26
Well, the most common thing we'll do is arithmetic operations

0:29
like adding them, subtracting them, dividing them and multiplying them.

0:33
And we've already seen a little bit of this before,

0:36
but let's just go over the operators that we could use.

0:40
We'll create a variable called "o,"

0:42
and we can do something like 1 + 2.

0:47
Using the + operator will simply add the 2 operands together,

0:50
in this case, 1 and 2.

0:52
Or we could replace this with a variable,

0:55
1 + k, or we could do j + k.

0:59
If we take a look at the value of o, it's going to be j + k, which is 42.

1:03
Or we could just do 1 + k, and o would be 24.

1:09
And of course, if we did 1 + 2, we get 3.

1:16
Subtraction works exactly like you would expect it to.

1:19
If we wanted to do 10  7, we use the dash character as our subtraction operator,

1:25
and the value of p will of course be 3.

1:29
The + and  operators work both with our whole numbers

1:32
and our floating point, so we could do 1 + 2.4

1:36
and 10  7.3, and we'll get the values 3.4 and 2.7 as usual.

1:44
Nothing too crazy there.

1:48
Multiplication and division work pretty much the same way.

1:51
If we want to multiply 3 times 4,

1:53
the multiplication operator is the star,

1:56
and on most keyboards, that's the asterisk, which is Shift and the number 8.

2:01
3 times 4, q should have the value of 12, which it does.

2:07
Again, we could do 3 times 4.2,

2:11
and if we refresh and check q, then we get 12.6.

2:15
Again, we see it's not exactly 12.6.

2:17
It's 12.6, then a lot of zeros and a 1.

2:21
It's very near 6, but again, this is the issue

2:24
with multiplying our floating point numbers together.

2:27
Sometimes we get these rounding errors, and we're just going to

2:31
sort of deal with that right now.

2:33
For division, we use the forward slash operator.

2:36
We'll set a variable r, and if we do 16 / 8,

2:44
we will get 2.

2:47
Now, there's something very important to note about division.

2:50
In some languages, like I mentioned before, when we have integers or whole numbers

2:54
and we divide them, and they don't come out evenly,

2:57
there are 2 things that could happen.

3:00
Let's say, for instance, we divided 15 / 10.

3:04
The actual answer would be 1.5,

3:07
but in some languages, because both of our operands here were

3:10
whole numbers or integers, they would want to return an integer,

3:14
in which case it would round down the number to 1.

3:17
However, in JavaScript, all of our numbers are the same floating point type

3:21
even if they look like whole numbers, so 15 / 10

3:25
is going to in fact give us the answer 1.5.

3:30
Now we'll see how we could round our answer down

3:33
if we wanted to in the next video,

3:36
but now just remember that division is always going to possibly return you

3:40
a floating point number like 1.5.

3:43
The next operator you may not be very familiar with using

3:46
in typical mathematical operations, but in programming

3:49
it's a pretty important operator, and it's called the modulo operator,

3:54
and it's represented by the percentage sign.

3:57
If we take s, and we take 15 mod or modulo using the percentage sign, 10,

4:06
instead of giving us the answer to 15 / 10,

4:09
instead it's going to give us the remainder of dividing 15 by 10.

4:15
If you divide 15 into 10, you get 1 with a remainder of 5,

4:20
so 15 mod 10 will return us 5, hopefully.

4:25
If we refresh, take a look at s, we get 5.

4:29
Again, if we did 16 mod 10

4:33
and take a look at s, we get 6.

4:37
26 mod 10 will also be 6 because 26 goes into 10 two times

4:43
with a remainder of 6.

4:46
And if we had the number 30, because 10 goes into 30 three times

4:50
with no remainder, the modulo answer of s would be 0.

4:54
Now, a little bit later on we'll see some practical applications of this operator,

4:58
but it's important to know that you can use it to get the remainder

5:01
of the division operation.

5:05
Now we can combine these operators together.

5:09
What happens if we do 1 + 2 * 3 / 4?

5:17
Well, it really depends on something called the order of operations.

5:21
You probably learned about order of operations in your math classes in school,

5:25
and the same thing applies in JavaScript.

5:27
There is an order of operations to the different operands here.

5:30
If there wasn't an order, for instance, we would get the number 1 + 2,

5:35
which would be 3, times 3, which would be 9.

5:38
Then 9 / 4.

5:40
However, that's not the order of operations in arithmetic.

5:43
Instead multiplication and division operations

5:46
always come before addition and subtraction operations,

5:50
and this is no different, so instead what we get is

5:53
2 times 3, which is 6, divided by 4,

5:57
which is 1.5, and then finally we do the addition operation,

6:02
so t should be 2.5.

6:05
If we refresh and check out the value of t,

6:12
we get 2.5.

6:14
Now what if we wanted, for instance, 1 + 2 to be calculated before

6:18
the multiplication and the division?

6:20
Just like in normal arithmetic, we can use parentheses to group them.

6:24
Parentheses will always be evaluated before any other operators,

6:29
so if we wanted 1 + 2 to be evaluated first,

6:34
we can simply wrap the subexpression 1 + 2 in parentheses.

6:39
Now 1 + 2, which will be 3, will be multiplied times 3

6:43
and then divided by 4, so the result will be 9 divided by 4,

6:47
and if we check it out, we get 2.25, which is 9 divided by 4.

6:52
Multiplication and division have the same level precedence

6:55
in our order of operations.

6:58
Similarly, addition and subtraction have the same level.

7:01
When 2 operators have the same level,

7:04
the mathematical operators are what we call left associative,

7:07
meaning that if they are at the same level,

7:09
it will go from left to right, so in this case

7:12
it will multiply our 3 times 3

7:15
and then divide by 4.

7:17
If, for instance, we wanted to divide 3 divided by 4 before we multiply them,

7:21
we could, again, wrap those in parentheses,

7:24
but it should lead to the same result, 2.25.

7:28
But any time you want to control the order of operations,

7:31
parentheses are what allow you to proceed the normal order of operations

7:35
of our operators.

7:37
Now, there are a lot of other operators besides our arithmetic operators,

7:41
and JavaScript has a welldefined order of operations on all of these,

7:45
so if you're ever curious as to which operators will be evaluated first

7:49
in a complicated expression, you can refer to the operator precedence table

7:53
to determine exactly what will happen.

7:55
[Operator Precedence Table] [developer.mozilla.org/en/JavaScript/Reference/Operators/Operator_Precedence]

7:57
Again, you can always use parentheses to control the order of the operations

8:00
to how you want them to work.

8:03
Up next, we'll see how we can compare 2 numbers together in JavaScript.

8:06
[? Music ?] [Treehouse]
You need to sign up for Treehouse in order to download course files.
Sign up