Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
There are several ways to define a number in JavaScript. In this video we take a look at the syntax for creating several types of numbers in JavaScript.

0:00
[? Music ?] [Treehouse]

0:08
In the last video, we saw some simple ways to define JavaScript

0:11
numbers in our programs.

0:13
Now we'll take a look at a few more advanced techniques

0:15
for creating numbers.

0:17
We've seen how to create numbers using different literals in JavaScript.

0:21
We've created whole numbers, floating point numbers, and negative numbers,

0:24
and we've seen the different rounding errors that can result from

0:27
doing operations on our floating point numbers.

0:31
There are a couple of other ways that we can create numbers

0:34
in our JavaScript files.

0:36
One way we can do this is using a different type of literal

0:39
for our JavaScript numbers, and this one is useful for,

0:42
for instance, very large numbers.

0:45
Say we wanted to represent the number 1 million.

0:48
Well, one way we could do that is by typing in, let's say,

0:51
"g = 1" with 6 zeros after it.

1:00
And if we go into our browser, refresh the page,

1:03
and take a look at our variable g, we'll see that it's 1 million.

1:07
But this isn't a very great way to represent our number.

1:10
There's a lot of zeros next to each other, and we have to really get in there

1:14
and count to figure out what the number is.

1:17
Instead we can use an exponential representation of this number.

1:21
Instead of thinking of it as a 1 with 6 zeros after it,

1:25
we can think of it in scientific notation as 1 times 10 to the sixth power.

1:30
10 to the sixth power is 1 million,

1:33
but that's how we would represent it, so how we can do this

1:35
instead of having our 6 zeros at the end

1:37
is we'll do 1E and then the number 6 for the sixth power.

1:43
And if we go back to our browser and we refresh our page

1:46
and type in the letter "g," we can see the number is also 1 million.

1:51
Now, we don't have to just have the number 1 before our e here.

1:54
We could do 1.23, and that would be 1.23 times 10 to the sixth power,

2:01
so it would be 1,230,000, hopefully.

2:06
If we save it out and refresh, and now if we type "g,"

2:10
we can see we get 123 with 4 zeros after it.

2:14
This allows us to create very large numbers

2:17
without creating very large JavaScript literals in our code,

2:21
so we could extend this out even to the 16th power,

2:24
and if we refresh and take a look at g,

2:27
we can see we have a very large number that we didn't have to manually type out.

2:31
It's both easier to read and less errorprone in our JavaScript code.

2:35
Here's a curious example.

2:37
Let's take the variable h, and I'm going to use the literal 012.

2:45
Now, if you look at this code, you might assume that its value

2:48
is the number 12 or 1 dozen, but if we go back to our code,

2:52
and remember, this is a variable called "h,"

2:54
and we refresh, we see when we type in "h" the number is 10.

3:01
Now, why would this be?

3:03
Well, because our JavaScript literal began with the number 0,

3:08
it actually is being interpreted as an octal number.

3:12
What does this mean?

3:14
Well, normally when we think about numbers, we think about it in the decimal system,

3:18
meaning it's base 10, so we use the digits 0,1,2,3,4,5,6,7,8,9.

3:25
And then when we go above that, we use the next digit to the left,

3:29
put a 1, and start back at 0, so each place in our number

3:33
represents a power of 10.

3:35
However, in octal, each place in our number

3:38
represents a power of 8,

3:41
so instead of using the numbers 0 through 9,

3:44
instead we use the numbers 0 through 7,

3:47
and then when we go to the number above 7,

3:50
instead of representing it with the digit 8,

3:53
we instead move to the left, set its value up 1,

3:56
and then use a 0, so instead of going 6,7,8,

4:00
in octal you would go 6,7,1,0 or 10,

4:05
even though 1,0 would actually be the representation of 8 in octal.

4:10
When we see 012, we're seeing octal,

4:12
and we can calculate its number.

4:14
By seeing the 1 in the second to last place,

4:17
we can see that means 8, and then in the last place we see 2,

4:21
so we can add 8 + 2, and its actual value number is 10.

4:26
Now, using octal numbers isn't something that you would do very often in code.

4:30
However, this mistake can show up in your code and be very, very confusing.

4:34
You'll wonder why you typed in one number and it seems to be representing a different one.

4:38
Well, that's just because the 0 puts it in a different base,

4:42
so the resolution to this issue is to not lead your JavaScript numbers with a 0

4:48
because that has a very specific meaning, which will cause a lot of confusion.

4:53
Here's another issue with octal.

4:55
012 here is being read as an octal number representing the number 10.

4:59
However, if we change the digits from 012 to 019,

5:04
what would happen?

5:06
Well, because we're starting with a 0, we think we're in octal.

5:08
However, because the number 9 is not used in octal notation

5:12
because the highest digit we can use is 7,

5:15
then we would have a problem.

5:18
You would hope that this would have some sort of error,

5:20
but instead, if we go back to our code and check the value of h now,

5:24
it's 19, so again, we see starting with a 0 we think it's octal,

5:29
however, we see an illegal octal character, so JavaScript interprets it

5:33
as a decimal literal 19.

5:36
It's very confusing, so the moral of this is do not lead

5:39
your JavaScript literals with 0 because it will lead to some very confusing results.

5:44
Now, we've seen that JavaScript can handle literals in both decimal

5:47
and octal notation, which we've seen here.

5:50
There's actually one more base that JavaScript can handle number literals for,

5:54
and that's hexadecimal.

5:56
Now, hexadecimal numbers are base 16.

5:59
You may have seen hexadecimal numbers, for instance,

6:01
when working with colors in CSS.

6:04
For instance, when you represent red,

6:06
the number you would use is ff0000.

6:12
This is actually a number, but it's a base 16 number,

6:15
and you can think about the color red split up like this.

6:19
The first 2 digits represent a number that represents the red value.

6:23
The next 2 digits would have been the green value,

6:26
and the next 2 digits would have been the blue value.

6:29
FF actually represents a number, in this case, 255.

6:35
But we can actually represent this in our JavaScript literal.

6:38
The way we do this is we'll create our variable i here,

6:42
and we'll lead it with a 0 but also lead it with a lowercase x,

6:46
and the 0x represents that we're going to have our literal be in hexadecimal notation,

6:52
and this means our characters can be not just 0 through 9

6:55
but also a through f, so if we typed in ff

7:00
and we check the value of i, we see the number is 255.

7:04
By changing these numbers around, we can do f0

7:09
and see that i is 240.

7:11
And if we wanted to just see what the value of f would be,

7:15
we can refresh, check our value of i,

7:18
and see f represents the number 15.

7:20
When you add 1 to that, it would become 16,

7:24
and 16, when represented in hexadecimal, is 10

7:28
because that's the base of hexadecimal.

7:31
If we save this and refresh, 0x10 should represent 16.

7:36
This could be useful. You don't use it very often.

7:39
But sometimes you do want to represent a number in hexadecimal form,

7:43
so if you ever do, this is a way that you can do it.

7:47
Now we've seen all the different ways that we can define numbers in JavaScript.

7:50
Up next, we'll see some of the things that we can do with those numbers.

7:54
[? Music ?] [Treehouse]
You need to sign up for Treehouse in order to download course files.
Sign up