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.