Arithmetic Operators LJTT #2
Welcome back to the series, today we will be working through JavaScript Arithmetic Operators
. I hope you're as excited as I am to relive elementary school math. Let's start learning!
TIP
Be sure to check out the first part of the series here for project set up, or download the project template here. Run npm install
inside of the project folder to get started if you download it.
Before getting started be sure to create a basic-arithmetic-operators.spec.js
file in your project directory. This is where we will put all of the new Test Cases
.
Basic Arithmetic Operators
In the table below we list some of the basic operators
that exist within the JavaScript Language. I'm sure that you will recognize at least a few of them from your 4th grade math class. Throughout this tutorial we will use this table to prove out their usage in JavaScript.
Given the following variables:
var x = 10;
var y = 3;
2
Operator | Type | Usage | Result |
---|---|---|---|
+ | Addition | x + y | 13 |
- | Subtraction | x - y | 7 |
* | Multiplication | x * y | 30 |
/ | Division | x / y | 3.3333333333333335 |
% | Modulus (remainder operator) | x % y | 1 |
TIP
The modulus operator is called the remainder operator because it will first divide the first number by the second number, then if the first number cannot be divided evenly by the second number the leftover amount is the remainder. For example 13 % 5 would be 3 because 13 can be divided evenly by 5, 2 times with a remainder value of 3. I would recommend trying with other values to practice with this operator.
Now that we have covered the table, we can begin writing the Test Assertions
for each of the operators
.
Addition
Looking at the usage for addition in the chart above if we add two variables
that are numbers
the result will be the sum of the two numbers
. Given this statement let's create our first Test Case
description, the addition of two numbers will be their sum
.
// test case description goes here
test("the addition of two numbers will be their sum", () => {
// assertions go here
})
2
3
4
Next, we need to create the variables
that we will be adding x
and y
. The value of these two variables will be 10
and 3
respectively as mentioned above in the example.
// test case description goes here
test("the addition of two numbers will be their sum", () => {
// assertions go here
var x = 10;
var y = 3;
})
2
3
4
5
6
With the creation of these variables
we can use the addition
operator
on them to write our Test Assertion
, expect
x + y
toEqual
13
.
// test case description goes here
test("the addition of two numbers will be their sum", () => {
// assertions go here
var x = 10;
var y = 3;
expect(x + y).toEqual(13);
})
2
3
4
5
6
7
8
Great if you run your tests using the npm test
command you should see them all passing.
TIP
If you understand how this first Test Case
works I would encourage you to attempt the other arithmetic operators
, if not feel free to follow along with the tutorial.
Subtraction
The next operator
in the chart above is subtraction. When subtracting two variables
that are numbers
the result will be their difference. Based on the previous statement we can create our Test Case
description, the subtraction of two numbers will be their difference
.
// test case description goes here
test("the subtraction of two numbers will be their difference", () => {
// assertions go here
})
2
3
4
Once again we will create the variables
to operate on. The values of these two variables
will once again be 10
and 3
.
// test case description goes here
test("the subtraction of two numbers will be their difference", () => {
// assertions go here
var x = 10;
var y = 3;
})
2
3
4
5
6
Finally we add our Test Assertion
that we expect
x - y
toEqual
7
, since 10 - 3 = 7
.
// test case description goes here
test("the subtraction of two numbers will be their difference", () => {
// assertions go here
var x = 10;
var y = 3;
expect(x - y).toEqual(7)
})
2
3
4
5
6
7
8
Great work! That's another operator down, give your Test Cases
another run using npm test
to prove everything is working.
TIP
I would highly recommend getting in the habit of running your Test Cases
after creating each one.
Multiplication
On to multiplication, when multiplying two variables
that are numbers
the result will be the product of the two numbers
. We will follow the same logic as the previous Test Cases
and create our description the multiplication of two numbers will be their product
, the variables
, the Test Assertion
that we expect
x * y
toEqual
30
.
// test case description goes here
test("the multiplication of two numbers will be their product", () => {
// assertions go here
var x = 10;
var y = 3;
expect(x * y).toEqual(30)
})
2
3
4
5
6
7
8
Division
Division is bit different than the others, when dividing values in JavaScript you will run into something called floating point numbers
. Floating point
numbers, at a high level, allow us to represent decimal values in JavaScript. For example, if we wanted to represent the value of PI we could assign a variable to the value 3.14
.
TIP
Technically all numbers in JavaScript are 64-bit floating-point numbers. If you want to understand a bit more about floating-point numbers check out this article.
Back to writing our Test Case
we will need to keep in mind that since 10
cannot be evenly divided by 3
the result will be a decimal
value. As a result, we expect
x/y
toEqual
3.3333333333333335
is our Test Assertion
. The rest of the test will follow the same rules as all of the others.
// test case description goes here
test("the division of two numbers will be their quotient", () => {
// assertions go here
var x = 10;
var y = 3;
expect(x / y).toEqual(3.3333333333333335)
})
2
3
4
5
6
7
8
Modulus
As mentioned in the chart above the modulus operator
, otherwise known as the remainder operator
, can be used to obtain remainder from the division of two numbers. In our case, we expect
x % y
toEqual
1
, because the remainder after dividing 10
by 3
will be 1
. The rest of the Test Case
will follow the same rules as the others.
// test case description goes here
test("the modulus of two numbers will be their remainder", () => {
// assertions go here
var x = 10;
var y = 3;
expect(x % y).toEqual(1)
})
2
3
4
5
6
7
8
That's it for the basic arithmetic operators
! Be sure to run your Test Cases
to make sure they are all passing.
Fantastic work getting through this tutorial, you should now have a basic understanding the basic arithmetic operators of JavaScript. I would recommend changing out some of the numbers, updating your Test Cases
, and even adding new ones to solidify these concepts. If you have any questions or feedback feel free to contact me or leave a comment below, and always remember you are the Captain of this Quality Cruise Line.