Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Basics (Retired) Creating Reusable Code with Functions Random Number Challenge Solution

Why do we put a second "lower" attribute into the formula?

  var random = Math.floor(Math.random() * (upper - lower + 1)) + lower; 

I don't understand why are we putting a "+ lower" second time here, at the end? Thanks.

Pavel, Thanks for asking this question. I too was wondering this and Dave does not explain this in his video about the challenge.

6 Answers

Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points

The first lower will set the range of options and the second one will play the role of the lowest possible input. If you didn't apply the second lower then the values would not represent the proper range of numbers. For example, (upper: 20- lower: 10 + 1) would give you the same values as upper:10 and lower: 0. Hope that clears it up. Basically, it establishes the starting minimal range where otherwise it would be established purely by the difference between the upper and lower numbers.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Let's see if I can clarify it a little further by using a bigger number and a rather practical scenario. Let's say for instance that we have a website with a dark background and we want to randomize a color. If the color is too dark (ie too close to 0 in an rgb number) it's not going to show up. So we want to limit the range to the upper portion of the rgb spectrum. Where (255, 255, 255) is white. So what we really want is a range of about 55 starting at 200.

• Math.random() = 0 - .99999....

• In this case it's perfectly ok if we have a 0 so we can leave off the + 1

• 255 - 200 = 55 (the range of numbers between 200 and 255 is 56 numbers because it's inclusive. Just like the range of numbers between 1 and 10 is 10 numbers because it includes the numbers on the ends.)

• 4. Then we round these down so we have a nice neat counting number

• 5. If we leave it in this state, the number would now be a random number between 0 and 55, which is exactly what we're trying to avoid as it's on the dark end of the rgb spectrum.

• 6. We add now our "lower" so we can tell it where to start. In this case, 200. Now we have a number between 200 and 255 which should be light enough to show up on our dark backgrounds

In conclusion the upper minus the lower gives us the amount range of numbers we want. Think of it as the difference between a normal die and a die used in D&D (nerd alert warning here). Is it 6 sided or 20 sided? Now, do we want it to start at 1 or do we want it to start at 100? That's where adding the second lower comes into play.

Hope that clears things up!

Thank you for your response, guys. But, to be honest, I'm still hardly getting it. That part with the "lowest possible input" kind of making sense to me. But why are we adding it to difference? Ok, lets set this apart:

  • Math.floor() - we use it to round down the numbers;

  • Math.random() - get us the random numbers in the set range (0-1 by default);

  • (upper - lower + 1) - so the lowest number would never start form zero;

  • lower - I see it this way, if the lower was 0 in the initial condition, +1 won't still make it start from 0.

Does that kind of make sense, or am I still lost?

Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points

Pavel,

Math.floor() => correct understanding; Math.random() => will never quite be 1 so you will never get your upper limit number since you use Math.floor() to round down with it; (upper - lower +1) => Not so the lowest will never be zero, but so you can get to your upper limit number (reasoning stated with Math.random explanation); lower => to move the starting lower limit of your results. Let's say you want a number that has a lowest possible value of 1000. You'd add this lower number a second time because without it the one that is involved inside the equation could possibly be 0 due to the combination of Math.floor and the random outcome. Adding this second 'lower' after all the madness of the equation has been calculated to its left ensures that you will always get at least that second 'lower', in this example case 1000, as an outcome, because it is kind of added on after the chaos to set the starting range / lowest possible value for your answer.

That, along with Jennifer's lovely help as well, should clear things up for you. If you are still struggling with it you know how to reach us. Best of luck to you Pavel!

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Let's assume for a moment that upper is equal to 10 and lower is equal to 5. Without adding the extra lower what you'd have is Math.floor(Math.random() * 6). This code would result in a number between 0 and 5 being rolled as Math.random by itself rolls a number between 0 and 1 (exclusive). This means that a 1 cannot be rolled... only .9999.... you get the point. The result of this * 6 will always be less than 6. Which is where the result between 0 and 5 comes in. Adding the extra lower gives a starting point and makes it so that a number between 5 and 10 will be rolled.

We will still be rolling a number between 0 and 5 but because we add the extra lower we will have that as the starting point. So the number being rolled plus 5(in this case). The number will never be less than 5 and never be greater than 10. Hope that clarifies things!

Thank you so much for your time and explanation, Jennifer and Nicholas. Now, I finally fully understand it. The example with the color codes for a website is great;) Good luck, and wish you best guys. It's awesome that you can find so many nice people here at the forum.