6. Working with Numbers

Objective: By the end of this checkpoint, you will have better understanding of how to handle ‘Numbers’ and Mathematical operations using JavaScript.

Key Terms

• 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

JavaScript Numbers & Operators

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.

Using a Number

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.

Trivia: Numbers in JavaScript

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.

 

Operators

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.

 

Doing Simple Math

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:

1. Parenthesis
2. Exponents
3. Multiply
4. Divide
5. Add
6. Subtract

There are various mnemonic devices out there to help you remember this order. A common one is: “Please Excuse My Dear Aunt Sally.”

 

Incrementing and Decrementing

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?

 

Hexadecimal and Octal Values

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.

 

Going 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.

 

The Math Object

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.

 

This is Boring!

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.

 

The Constants

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.

Rounding Numbers

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.

 

Trigonometric Functions

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.

 

Powers and Square Roots

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.

 

Getting the Absolute Value

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

Random Numbers

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.