🔓 Week 1 – JavaScript Fundamentals

11 CheckPoints (CP) ✔️
🔓 Week 2 – Start with HTML

11 CheckPoints (CP) ✔️
🔓 Week 3 – Working with CSS

14 CheckPoints (CP) ✔️
Schedule a call with us today for enrollment and Job Guarantee details

🔒 Week 4 – Object Oriented JavaScript & ES6

10 CheckPoints (CP) ✔️
🔒 Week 5 – File/Directory Management with Command Line

8 CheckPoints (CP) ✔️
🔒 Week 6 – Environment Setup continued, Git & GitHub

12 CheckPoints (CP) ✔️
🔒 Week 7 – Advanced JavaScript, JQuery and Ajax

9 CheckPoints (CP) ✔️
🔒 Week 8 – Consuming Restful API, Creating Mockup, Deployment

7 CheckPoints (CP) ✔️
🔒 Week 9 – API Hack Capstone Project Overview

4 CheckPoints (CP) ✔️
🔒 Week 10 – Finish Your API Hack Capstone Project

4 CheckPoints (CP) ✔️
🔒 Week 11 – React

5 CheckPoints (CP) ✔️
🔒 Week 12 – React bootstrap

4 CheckPoints (CP) ✔️
🔒 Week 13 – Conditional Rendering , List and Keys

5 CheckPoints (CP) ✔️
🔒 Week 14 – Forms

2 CheckPoints (CP) ✔️
🔒 Week 15 – React HTTP requests

4 CheckPoints (CP) ✔️
🔒 Week 16 -React – Redux

3 CheckPoints (CP) ✔️
🔒 Week 17 – NodeJS, Express framework

5 CheckPoints (CP) ✔️
🔒 Week 18 – NodeJS, Express framework part 2

6 CheckPoints (CP) ✔️
🔒 Week 19 – NodeJS and Express framework part 3

5 CheckPoints (CP) ✔️
🔒 Week 21 – Capstone Project II

8 CheckPoints (CP) ✔️
🔒 Week 22 – Capstone Project II (Continued)

2 CheckPoints (CP) ✔️
🔒 Writing resume & cover letter

2 CheckPoints (CP) ✔️
🔒 Mock Technical Interviews

8 CheckPoints (CP) ✔️
🔒 Successful job-hunting strategies

3 CheckPoints (CP) ✔️
🔒 Create Portfolio

5 CheckPoints (CP) ✔️
🔒 MongoDB & Algorithms

31 CheckPoints (CP) ✔️
**Objective:** By the end of this checkpoint, you will have better understanding of how to handle ‘Numbers’ and Mathematical operations using JavaScript.

- Number Operators
- Incrementing Operator
- Decrementing Operator
- Hexadecimal Values
- Octal Values
- Math Object
- Constants
- Rounding Number Functions
- Trigonometric Functions
- Powers & Square Roots
- Absolute Value
- Random Numbers

A large part of our time in JavaScript will be spent dealing with numbers. Even if we aren’t working with numbers directly, we’ll indirectly encounter them when doing even the most basic of tasks such as keeping count of something, working with arrays, etc.

In order to use a number, all we have to do is, well, use it. Below is a simple example of us declaring a `variable`

called stooges that is initialized to the number 3:

let stooges = 3;

That is it. There are no hoops to jump through. If we wanted to use more complex numbers, we can just use them as if nothing is different:

In the above example, we are using a decimal value, a hexadecimal value, and a really large value using exponents. In the end, our browser will automatically do the right thing. Note that the “right thing” doesn’t just exist in the positive space. We can use negative numbers easily as well. To use negative numbers, just place a minus, `-`

, character before the number we want to turn into a negative value:

`let temperature = -42;`

What we’ve seen in this section makes up the bulk of how we will actually use numbers. In the next couple of sections, let’s go a bit deeper and look at some of the other interesting things we can do with them.

If you are curious why working with numbers is so easy, the reason is because JavaScript isn’t big on numerical types. You don’t have to declare a number as being of type `int`

, `double`

, `byte`

, `float`

, etc.

No introduction to numbers would be complete, or started, without showing you how we can use mathematical operators in code to implement things we learned in third-grade Math class.

Let’s look at the common operators in this section.

In JavaScript, we can create simple mathematical expressions using the `+`

, `-`

, `*`

, `/`

, and `%`

operators to `add`

, `subtract`

, `multiply`

, `divide`

, and find the remainder (`modulus`

) of numbers, respectively. If you can use a calculator, then you can do simple Math in JavaScript.

Here are some examples that put these operators to use:

In the last line of the above example, notice that we are defining a particular order of operations by using parenthesis around the expression I want to evaluate as a group. Again, all of this is just calculator stuff.

JavaScript evaluates expressions in the following order:

- Parenthesis
- Exponents
- Multiply
- Divide
- Add
- Subtract

There are various mnemonic devices out there to help you remember this order. A common one is: “**P**lease **E**xcuse **M**y **D**ear **A**unt **S**ally.”

A common thing you will do with numbers will involve incrementing or decrementing a variable by a certain amount. Below is an example of incrementing the variable `i`

by `1`

:

You don’t have to increment or decrement by just `1`

. You can use any arbitrary number:

All of this doesn’t have to be just `addition`

or `subtraction`

. You can perform other operations as well. For example:

You should start to see a pattern here. Regardless of what operator you are using, you’ll notice that you are cumulatively modifying your `i`

variable. Because of how frequently you will use this pattern, we have some operators that simplify this a bit.

Expression |
What it does |

`i++` |
Increments i by 1: i = i + 1 |

`i--` |
Decrements i by 1: i = i – 1 |

`i += n` |
Increments i by n: i = i + n |

`i -= n` |
Decrements i by n: i = i – n |

`i *= n` |
Multiplies by n: i = i * n |

`i /= n` |
Divides i by n: i = i / n |

`i %= n` |
Finds the remainder of i when divided by n: i = i % n |

`i **= n` |
Exponential operator where i is raised to the power of n |

If we use these operators on the three examples we saw earlier, the code will look like this:

`i++;`

`i -= 2;`

`i /= 2;`

Before we wrap this up, there is one quirk you should be aware of. It has to do with the `--`

and `++`

operators for incrementing and decrementing a value by `1`

. More specifically, whether the `++`

and `--`

operators appear before or after the variable they are incrementing or decrementing matters.

Let’s look at this example:

`let i = 4;`

`let j = i++;`

After executing these two lines, the value of `i`

will be `5`

. This is likely what you would have expected. But the value of `j`

will be `4`

. Notice that in this example, the operator appears after the variable.

If we place the operator in front of the variable, the results are a bit different:

`let i = 4;`

`let j = ++i;`

The value of `i`

will still be `5`

. But here is the kicker, the value of `j`

will also be `5`

.

What changed between these two examples is the __position of the operator__. The position of the operator determines **whether the incremented value will be returned or the pre-incremented value will be returned**. Now, aren’t you glad you learned that?

Beyond using normal decimal values, you can use hexadecimal (base 16) and octal (base 8) values as well. When working with octal values, make sure to start your number with a `0`

. For example:

`let leet = 02471;`

For hexadecimal values, you need to start your number with `0x`

:

`let leet = 0x539;`

In many situations, you’ll find yourself dealing with octal and hexadecimal values in the form of strings. If they are strings, you cannot manipulate them as you would normal numbers. You need to convert the string to a number first.

The way you do that is by using the `parseInt()`

function:

The `parseInt()`

function takes your hexadecimal or octal value followed by the base you are converting from and turns it from a string to a number.

Sometimes, you will have numbers that are buried inside strings. To get all the numbers from those strings, read this tutorial on how to extract out all the numbers from many strings.

Numbers are used in a variety of mathematical expressions. They often go beyond simple `additions`

, `subtractions`

, `multiplications`

, and `divisions`

. Your Math classes back in the day would have been a whole lot easier if that’s all there was to it. To help you more easily do complicated numerical things, we have the `Math`

object. This object provides you with a lot of functions and constants that will come in handy. We are going to very briefly look at some of the things this object does.

We are not going to lie to you. Looking at all the stuff the `Math`

object provides is pretty boring. Unless you really want to know about all of this now, we would much prefer you just VERY quickly skim through the following sections and refer back as needed. The `Math`

object isn’t going anywhere (it has no friends), so it will be waiting for you at a later time.

To avoid you having to explicitly define mathematical constants like **pi**, **Euler’s constant**, **natural log**, and so on, the `Math`

object defines many common constants for you:

Usage |
What it stands for |

`Math.E` |
Euler’s constant |

`Math.LN2` |
Natural logarithm of 2 |

`Math.LN10` |
Natural logarithm of 10 |

`Math.LOG2E` |
Base 2 logarithm of E |

`Math.LOG10E` |
Base 10 logarithm of E |

`Math.PI` |
3.14159 (that’s all we remember and we are too lazy to look up the rest!) |

`Math.SQRT1_2` |
Square root of 1/2 |

`Math.SQRT2` |
Square root of 2 |

Of all of these constants, the one that’s most commonly used is `Math.PI`

. This is because you will use this in everything from drawing circles on your screen to specifying trigonometric expressions. In fact, we can’t ever remember having used any of these other constants outside of `Math.PI`

. Here is an example of a function that returns the `circumference`

given the `radius`

:

You could use `Math.PI`

or any other constant just as you would any named variable.

Your numbers will often end up containing a ridiculous amount of precision:

To help you round these numbers up to a reasonable integer value, you have the `Math.round()`

, `Math.ceil()`

, and `Math.floor()`

functions that take a number as an argument:

Function |
What it does |

`Math.round()` |
Returns a number that is rounded to the nearest integer. You round up if your argument is greater than or equal to .5. You stay at your current integer if your argument is less than .5. |

`Math.ceil()` |
Returns a number that is greater than or equal to your argument. |

`Math.floor()` |
Returns a number that is less than or equal to your argument. |

The easiest way to make sense of the above table is to just see these three functions in action:

These three functions always round to an integer. If you want to round to a precise set of digits, check out this tutorial.

Our favorite of all the Math-based functions. This `Math`

object gives you handy access to almost all of the trigonometric functions you will need:

Function |
What it does |

`Math.cos()` |
Gives you the Cosine for a given argument |

`Math.sin()` |
Gives you the Sine for a given argument |

`Math.tan()` |
Gives you the Tangent for a given argument |

`Math.acos()` |
Gives you the Arccosine for a given argument |

`Math.asin()` |
Gives you the Arcsine for a given argument |

`Math.atan()` |
Gives you the Arctangent for a given argument |

To use any of these, just pass in a number as the argument. For example:

These trigonometric functions take arguments in the form of radian values. __If your numbers are in the form of degrees, be sure to convert them to radians first.__

Continuing down the path of defining the `Math`

object functions, we have `Math.pow()`

, `Math.exp()`

, and `Math.sqrt()`

functions:

Function |
What it does |

`Math.pow()` |
Raises a number to a specified power |

`Math.exp()` |
Raises the Euler’s constant to a specified number |

`Math.sqrt()` |
Returns the square root of a given argument |

Let’s look at some examples:

Note that `Math.pow()`

function takes two arguments.

If you want the absolute value of a number, simply use the `Math.abs()`

function:

To generate a somewhat random number between 0 and a smidgen less than 1, we have the `Math.random()`

function. This function doesn’t take any arguments, but you can simply use it as part of a mathematical expression:

Each time your `Math.random`

function is called, you will see a different number returned for `Math.random()`

. To learn all about how to work with this function to generate random numbers, read this tutorial on how to generate Random Numbers in JavaScript.