**Heads up!** To view this whole video, sign in with your Courses account or enroll in your free 7-day trial.
Sign In
Enroll

Preview

Start a free Courses trial

to watch this video

JavaScript lets you create random numbers, which you can use to add variety and surprise in your programs. You generate a random number in JavaScript via a method named Math.random().

### Resources

### Example Return Values

Math.floor() | Return Value | Math.ceil() | Return Value |
---|---|---|---|

`Math.floor()` |
`Math.ceil()` |
||

`Math.floor(1.2)` |
`1` |
`Math.ceil(1.2)` |
`2` |

`Math.floor(0.0012)` |
`0` |
`Math.ceil(0.0012)` |
`1` |

`Math.floor(5.028)` |
`5` |
`Math.ceil(5.028)` |
`6` |

`Math.floor(2)` |
`2` |
`Math.ceil(2)` |
`2` |

`Math.floor(0)` |
`0` |
`Math.ceil(0)` |
`0` |

Roll die and
you'll get a number from one to six.
0:00

Which number you get is up to chance.
0:03

The outcome is random and
could be different each time you roll.
0:05

You learn that JavaScript lets
you create random numbers,
0:09

which you can use to add variety and
surprise in your programs.
0:12

For example, you could program a game
to randomly place enemy spaceships and
0:15

asteroids on the screen.
0:19

Or you can liven up your homepage by
randomly selecting a photo to display each
0:21

time someone visits your site.
0:25

Or, randomly select a question
as part of a quiz application.
0:26

Each of these tasks starts
with creating a random number.
0:31

Generating a random number in
JavaScript is quite straightforward.
0:35

It's an operation built into JavaScript
via a method named Math.random.
0:39

Let's look at the documentation for
0:43

the Math.random method on
the Mozilla Developer Network.
0:45

You'll find a link to it in
the teachers notes with this video.
0:48

So here it says that Math.random
returns a floating-point
0:51

pseudo-random number in
the range of 0 to 1.
0:55

That is from 0 up to, but not including 1.
0:59

Let's see how it works.
1:03

Although back into the JavaScript
console for this, and type Math.random.
1:04

And I'll run it a few times in
the console to see what it returns.
1:10

Again, in the console,
1:13

you can press the up arrow key to
display the code you previously ran.
1:15

Then you can either edit that code or
press Return or
1:18

Enter to run the code again.
1:21

As you can see, Math.random returns a
random number with lots of decimal places,
1:23

but never the number 1.
1:28

Let's say that we want to simulate
the role of a six sided die.
1:30

We want to get any number from 1 up to and
including 6.
1:33

Well, Math.random returns
a number that's between 0 and 1.
1:38

So we could start by
multiplying that by 6.
1:42

Let's see what this returns.
1:46

I'll try this a few times.
1:47

Okay, now I'm getting numbers that vary in
value between a little over 0 to over 5.
1:49

They still all have a decimal values,
however.
1:54

And I'm want an integer value like 1,
2, 3, 4, 5 or 6.
1:57

JavaScript math object provide
a couple of methods to help with this.
2:02

Math.floor() and
2:06

Math.ceil() both convert decimal
values to integers or whole numbers.
2:07

You provide a number to each of these and
they return a new value.
2:12

Math.floor rounds the number down
toward the floor, if you will.
2:16

For example, if you provide Math.floor,
the number 1.2 it returns the number 1.
2:21

Math.ceil on the other hand,
rounds the number up toward the ceiling.
2:28

So passing Math.ceil(1.2)
rounds the number up to 2.
2:33

Now, if the number is already an integer,
then the methods return that value.
2:41

For instance,
passing 2 to Math.ceil returns 2.
2:45

And passing 2 to Math.floor returns 2.
2:50

You can see more examples of Math.ceil and
2:54

Math.floor in the teachers
notes with this video.
2:56

So I'll use Math.floor to help around
the number to the proper value for
3:00

the random number generator.
3:05

Since Math.random returned a number value,
3:07

I can provide that method
to Math.floor like this.
3:11

This might look a little
complicated right now, so
3:18

let's break this down by looking
at each part of the code.
3:20

In JavaScript and programming in general,
code runs inside out.
3:23

In other words, what's inside
the innermost parentheses happens first.
3:28

In this case,
Math.random() * 6 gets processed,
3:32

or evaluated as programmers like to say,
before the Math.floor method.
3:36

And this makes sense,
3:40

because Math.floor needs a number
provided to it before it can do anything.
3:41

Let's again start with Math.random,
3:45

which returns a value from 0 to a decimal
value up to but not including 1.
3:48

Most of the time, Math.random returns
a really long decimal value like this.
3:54

When we multiply the number
Math.random returns by 6,
4:00

it returns a new number, also with
lots of numbers following the decimal.
4:05

Finally, if we provide
that number to Math.floor,
4:11

the method rounds it down to an integer.
4:16

I'll run this a few times.
4:19

And notice how each time it returns a
random integer like 2, 1, 3, 4, and so on.
4:20

In fact, this code will always
return a value between 0 and 5.
4:28

But I want a number between 1 and 6.
4:34

Well, to make that happen,
I'll need to add 1 to Match.floor.
4:37

And this will ensure that I'll
get a number between 1 and 6.
4:42

I'll run this a few times.
4:46

And notice how it returns 2,
4, 1, 5, 5, 1, and so on.
4:47

So now you might be asking,
why don't you just use Math.ceil?
4:55

It rounds upward.
4:59

So a number over 5 would round up to 6,
right?
5:00

Well, this might seem like a good idea,
and would make it so that we didn't have
5:03

to add one at the end of the statement
to produce the number from 1 to 6.
5:07

Unfortunately, with that approach there is
a chance that you might end up with a 0.
5:13

Remember, Math.random returns a number in
the range of 0 up to but not including 1.
5:17

So the random number returned could be 0.
5:24

And using Math.ceil on 0 returns 0.
5:27

So with that approach, there's a chance
you'd end up with numbers from 0 up to and
5:31

including 6.
5:36

With Math.floor +1, we make sure that the
lowest number returned is 1 instead of 0.
5:37

All right, now let's see how we could use
this random number generator in a program.
5:49

For example, a game where you roll a die.
5:53

You can cut along with me by
opening the file random.js located
5:56

inside your js folder.
5:59

Then in index.html,
update the source attribute
6:01

in the script tag to js/random.js.
6:06

I'll start by declaring
a variable name dieRoll to store
6:12

the result of a random number from 1 to 6.
6:17

Next, I'll generate a number from 0 to 5.
6:20

Like earlier,
I'll multiply Math.random by 6 and
6:23

I'll round the return value
down using Math.floor.
6:28

When rolling a die, the lowest number of
returns should be 1 and the highest 6.
6:38

So I'll add 1 to the end to make sure
that I get a number from 1 to 6.
6:43

Finally, I'll use the console.log method
to display the result in the console.
6:50

I provided a template literal with
6:54

the message You rolled ${dieRoll}.
6:58

Remember, the dollar sign and
7:04

curly brace syntax inserts the value
of the direct variable into the string.
7:06

Let's see how it works.
7:11

I'll save the file and refresh the page.
7:12

Each time I refresh the console, prints
a different random number between 1 and 6.
7:16

Good.
7:21

You need to sign up for Treehouse in order to download course files.

Sign up