# Javascript – Numbers

9e-6
Scientific notation uses the letter ‘e’ to represent an exponential value. This number is the same as 9 times 10 to the negative 6 power: 9 * 10^-6 or 0.000009

++++++++

Numbers in JavaScript are as straightforward as they sound; you don’t need any special syntax for numbers, you write them straight into JavaScript.

In JavaScript, numbers can be whole numbers (called integers). For example:

``50-1009999``

Or numbers with decimal points to represent fractions of a whole number like:

``3.14-9.88888.0000009``

Numbers like these with decimal points are also called “floating point numbers.” JavaScript even lets you use scientific notation to represent really large or really small numbers:

``9e-6 // same as .0000099e+6 // same as 9000000``

## Storing Numbers in Variables

Just as with string values, you can put a number in a variable, or “assign” a number to a variable using the equals sign (or assignment operator):

``let score = 0;const pi = 3.141592653589793;const absoluteZero = -273.15;const numberOfAtomsOnEarth = 1.33e+105;``

Unlike strings, you don’t put quote marks around a number. If you do, then you have a string, not a number. This is one confusing part about working with strings and numbers. For example, consider the following code:

``const aString = '10'; ``

The value stored in the variable `aString` is not the number 10. It’s a string made up of the character `1` followed by `0` – this can lead to strange and confusing behavior like making some math operations not work as expected. We’ll look at how to convert a string containing a number into an actual number in a later video in this stage, but keep this in mind: a number inside quotes isn’t really a number.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#types_of_numbers

# Basic math in JavaScript — numbers and operators

At this point in the course we discuss math in JavaScript — how we can use operators and other features to successfully manipulate numbers to do our bidding.

## Everybody loves math

Okay, maybe not. Some of us like math, some of us have hated math ever since we had to learn multiplication tables and long division in school, and some of us sit somewhere in between the two. But none of us can deny that math is a fundamental part of life that we can’t get very far without. This is especially true when we are learning to program JavaScript (or any other language for that matter) — so much of what we do relies on processing numerical data, calculating new values, and so on, that you won’t be surprised to learn that JavaScript has a full-featured set of math functions available.

This article discusses only the basic parts that you need to know now.

### Types of numbers

In programming, even the humble decimal number system that we all know so well is more complicated than you might think. We use different terms to describe different types of decimal numbers, for example:

• Integers are whole numbers, e.g. 10, 400, or -5.
• Floating point numbers (floats) have decimal points and decimal places, for example 12.5, and 56.7786543.
• Doubles are a specific type of floating point number that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places).

We even have different types of number systems! Decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like:

• Binary — The lowest level language of computers; 0s and 1s.
• Octal — Base 8, uses 0–7 in each column.
• Hexadecimal — Base 16, uses 0–9 and then a–f in each column. You may have encountered these numbers before when setting colors in CSS.

Before you start to get worried about your brain melting, stop right there! For a start, we are just going to stick to decimal numbers throughout this course; you’ll rarely come across a need to start thinking about other types, if ever.

The second bit of good news is that unlike some other programming languages, JavaScript only has one data type for numbers, both integers and decimals — you guessed it, `Number`. This means that whatever type of numbers you are dealing with in JavaScript, you handle them in exactly the same way.

Note: Actually, JavaScript has a second number type, BigInt, used for very, very large integers. But for the purposes of this course, we’ll just worry about `Number` values.

### It’s all numbers to me

Let’s quickly play with some numbers to reacquaint ourselves with the basic syntax we need. Enter the commands listed below into your developer tools JavaScript console.

1. First of all, let’s declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order:

``let myInt = 5;let myFloat = 6.667;myInt;myFloat;``

Copy to Clipboard

2. Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.

3. Now let’s check that both our original variables are of the same datatype. There is an operator called

`typeof`

in JavaScript that does this. Enter the below two lines as shown:

``typeof myInt;typeof myFloat;``

Copy to Clipboard

You should get

``"number"``

returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!

### Useful Number methods

The `Number` object, an instance of which represents all standard numbers you’ll use in your JavaScript, has a number of useful methods available on it for you to manipulate numbers. We don’t cover these in detail in this article because we wanted to keep it as a simple introduction and only cover the real basic essentials for now; however, once you’ve read through this module a couple of times it is worth going to the object reference pages and learning more about what’s available.

For example, to round your number to a fixed number of decimal places, use the `toFixed()` method. Type the following lines into your browser’s console:

``let lotsOfDecimal = 1.766584958675746364;lotsOfDecimal;let twoDecimalPlaces = lotsOfDecimal.toFixed(2);twoDecimalPlaces;``

Copy to Clipboard

### Converting to number data types

Sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it. This most commonly happens when data is entered into a form input, and the input type is text. There is a way to solve this problem — passing the string value into the `Number()` constructor to return a number version of the same value.

For example, try typing these lines into your console:

``let myNumber = '74';myNumber + 3;``

Copy to Clipboard

You end up with the result 743, not 77, because `myNumber` is actually defined as a string. You can test this by typing in the following:

``typeof myNumber;``

Copy to Clipboard

To fix the calculation, you can do this:

``Number(myNumber) + 3;``

# TREEHOUSE EXAMPLE

## Arithmetic Operators

JavaScript lets you perform most mathematical calculations, including addition, subtraction, multiplication, and division.

For example, in a previous course, you used the `+` symbol (or the addition operator) to add two numbers together:

``2 + 7 // 9``

To subtract numbers, use a minus sign (or the subtraction operator):

``4 - 3 // 1``

To divide two numbers, you use a forward slash character, also called the division operator:

``6 / 3 // 2``

The division operator instructs the JavaScript engine to divide the number on the left by the number on the right. In the example above, divide 6 by 3 (which is 2).

To multiply numbers, use the multiplication operator, which is represented by an asterisk. For example, the following means `10` times `9`:

``10 * 9 // 90``

You won’t spend much time doing literal calculations with JavaScript, meaning you don’t need to ask JavaScript what ‘2 + 2’ is – we have calculators for that. However, you will frequently store numbers in variables, and then perform calculations with those variables.

For example, you might start a game by creating a variable named `score`:

``let score;``

And store the number `0` in it:

``let score = 0;``

Later in the program, maybe when the player destroys an invading spaceship, you add 100 points to that score:

``score = score + 100;``

The variable `score` appears twice in this statement. Remember, when putting a value into a variable, whatever is on the right goes into the variable on the left. In this case, the value on the right is the current contents of the variable `score` plus `100`. That total is then stored back into the variable on the left — this is how we update a variable.

The `let` keyword allows you to add to the current value of `score`.

## Assignment Operators

There are shorthand methods for performing each of the basic mathematical operations on a variable: addition, subtraction, multiplication and division. For example, to add `10` to the contents of a variable, use `+= 10`. This both adds `10` to the current variable and assigns the result back into the variable.

There are also shorthands for subtracting from a variable, multiplying a variable by a value, and dividing a variable by a value.

## Arithmetic operators

Arithmetic operators are the basic operators that we use to do sums in JavaScript:

Note: You’ll sometimes see numbers involved in arithmetic referred to as operands.

Note: You may sometimes see exponents expressed using the older `Math.pow()` method, which works in a very similar way. For example, in `Math.pow(7, 3)`, `7` is the base and `3` is the exponent, so the result of the expression is `343`. `Math.pow(7, 3)` is equivalent to `7**3`.

We probably don’t need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your developer tools JavaScript console to familiarize yourself with the syntax.

1. First try entering some simple examples of your own, such as

``10 + 79 * 860 % 3``

Copy to Clipboard

2. You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example:

``let num1 = 10;let num2 = 50;9 * num1;num1 ** 3;num2 / num1;``

Copy to Clipboard

3. Last for this section, try entering some more complex expressions, such as:

``5 + 10 * 3;num2 % 9 * num1;num2 + num1 / 8 + 2;``

Copy to Clipboard

Parts of this last set of calculations might not give you quite the result you were expecting; the section below might well give the answer as to why.

### Operator precedence

Let’s look at the last example from above, assuming that `num2` holds the value 50 and `num1` holds the value 10 (as originally stated above):

``num2 + num1 / 8 + 2;``

Copy to Clipboard

As a human being, you may read this as “50 plus 10 equals 60”, then “8 plus 2 equals 10”, and finally “60 divided by 10 equals 6”.

But the browser does “10 divided by 8 equals 1.25”, then “50 plus 1.25 plus 2 equals 53.25”.

This is because of operator precedence — some operators are applied before others when calculating the result of a calculation (referred to as an expression, in programming). Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the calculation is always evaluated from left to right).

If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:

``(num2 + num1) / (8 + 2);``

Copy to Clipboard

Try it and see.

Note: A full list of all JavaScript operators and their precedence can be found in Expressions and operators.

## Increment and decrement operators

Sometimes you’ll want to repeatedly add or subtract one to or from a numeric variable value. This can be conveniently done using the increment (`++`) and decrement (`--`) operators. We used `++` in our “Guess the number” game back in our first splash into JavaScript article, when we added 1 to our `guessCount` variable to keep track of how many guesses the user has left after each turn.

``guessCount++;``

Copy to Clipboard

Note: These operators are most commonly used in loops, which you’ll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You’d use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We’ve actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! We’ll look at loops in detail later on in the course.

Let’s try playing with these in your console. For a start, note that you can’t apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:

``3++;``

Copy to Clipboard

So, you can only increment an existing variable. Try this:

``let num1 = 4;num1++;``

Copy to Clipboard

Okay, strangeness number 2! When you do this, you’ll see a value of 4 returned — this is because the browser returns the current value, then increments the variable. You can see that it’s been incremented if you return the variable value again:

``num1;``

Copy to Clipboard

The same is true of `--` : try the following

``let num2 = 6;num2--;num2;``

Copy to Clipboard

Note: You can make the browser do it the other way round — increment/decrement the variable then return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use `++num1` and `--num2`.

## Assignment operators

Assignment operators are operators that assign a value to a variable. We have already used the most basic one, `=`, loads of times — it assigns the variable on the left the value stated on the right:

``let x = 3; // x contains the value 3let y = 4; // y contains the value 4x = y; // x now contains the same value y contains, 4``

Copy to Clipboard

But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:

Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.

Note that you can quite happily use other variables on the right hand side of each expression, for example:

``let x = 3; // x contains the value 3let y = 4; // y contains the value 4x *= y; // x now contains the value 12``

Copy to Clipboard

Note: There are lots of other assignment operators available, but these are the basic ones you should learn now.

## Active learning: sizing a canvas box

In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the Canvas API. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables `x` and `y`, which are initially both given a value of 50.

Open in new window

In the editable code box above, there are two lines marked with a comment that we’d like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let’s try the following:

• Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.
• Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.
• Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.
• Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.
• Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.
• Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.

Don’t worry if you totally mess the code up. You can always press the Reset button to get things working again. After you’ve answered all the above questions correctly, feel free to play with the code some more or create your own challenges.

## Comparison operators

Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators.

Note: You may see some people using `==` and `!=` in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from `===`/`!==`. The former versions test whether the values are the same but not whether the values’ datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.

If you try entering some of these values in a console, you’ll see that they all return `true`/`false` values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:

• Display the correct text label on a button depending on whether a feature is turned on or off
• Display a game over message if a game is over or a victory message if the game has been won
• Display the correct seasonal greeting depending what holiday season it is
• Zoom a map in or out depending on what zoom level is selected

We’ll look at how to code such logic when we look at conditional statements in a future article. For now, let’s look at a quick example:

``<button>Start machine</button><p>The machine is stopped.</p>``

Copy to Clipboard

``const btn = document.querySelector('button');const txt = document.querySelector('p');btn.addEventListener('click', updateBtn);function updateBtn() {  if (btn.textContent === 'Start machine') {    btn.textContent = 'Stop machine';    txt.textContent = 'The machine has started!';  } else {    btn.textContent = 'Start machine';    txt.textContent = 'The machine is stopped.';  }}``

Copy to Clipboard

Open in new window

You can see the equality operator being used just inside the `updateBtn()` function. In this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying “Start machine” when it is pressed, we change its label to “Stop machine”, and update the label as appropriate. If the button is currently saying “Stop machine” when it is pressed, we swap the display back again.

Note: Such a control that swaps between two states is generally referred to as a toggle. It toggles between one state and another — light on, light off, etc.