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

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