Working with the While Loop

Modern JavaScript Using Control Structures
9 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.72
List Price:  €129.81
You save:  €37.09
£79.26
List Price:  £110.97
You save:  £31.71
CA$135.49
List Price:  CA$189.69
You save:  CA$54.20
A$153.49
List Price:  A$214.89
You save:  A$61.40
S$134.92
List Price:  S$188.90
You save:  S$53.97
HK$782.50
List Price:  HK$1,095.53
You save:  HK$313.03
CHF 90.16
List Price:  CHF 126.23
You save:  CHF 36.07
NOK kr1,085.06
List Price:  NOK kr1,519.13
You save:  NOK kr434.06
DKK kr691.90
List Price:  DKK kr968.69
You save:  DKK kr276.78
NZ$167.41
List Price:  NZ$234.39
You save:  NZ$66.97
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳10,980.73
List Price:  ৳15,373.46
You save:  ৳4,392.73
₹8,335.04
List Price:  ₹11,669.39
You save:  ₹3,334.35
RM472.40
List Price:  RM661.38
You save:  RM188.98
₦139,532.04
List Price:  ₦195,350.44
You save:  ₦55,818.40
₨27,813.53
List Price:  ₨38,940.06
You save:  ₨11,126.52
฿3,638.31
List Price:  ฿5,093.78
You save:  ฿1,455.47
₺3,237.16
List Price:  ₺4,532.16
You save:  ₺1,294.99
B$501.53
List Price:  B$702.17
You save:  B$200.63
R1,888.66
List Price:  R2,644.21
You save:  R755.54
Лв180.76
List Price:  Лв253.07
You save:  Лв72.31
₩134,741.70
List Price:  ₩188,643.77
You save:  ₩53,902.07
₪367.71
List Price:  ₪514.81
You save:  ₪147.10
₱5,617.33
List Price:  ₱7,864.49
You save:  ₱2,247.16
¥15,132.45
List Price:  ¥21,186.03
You save:  ¥6,053.58
MX$1,658.17
List Price:  MX$2,321.51
You save:  MX$663.33
QR364.88
List Price:  QR510.84
You save:  QR145.96
P1,378.06
List Price:  P1,929.34
You save:  P551.28
KSh13,256.67
List Price:  KSh18,559.87
You save:  KSh5,303.20
E£4,744.14
List Price:  E£6,641.99
You save:  E£1,897.84
ብር5,687.29
List Price:  ብር7,962.44
You save:  ብር2,275.14
Kz83,433.85
List Price:  Kz116,810.73
You save:  Kz33,376.88
CLP$98,290.17
List Price:  CLP$137,610.17
You save:  CLP$39,320
CN¥722.08
List Price:  CN¥1,010.95
You save:  CN¥288.86
RD$5,924.54
List Price:  RD$8,294.60
You save:  RD$2,370.05
DA13,479.97
List Price:  DA18,872.49
You save:  DA5,392.52
FJ$225.66
List Price:  FJ$315.94
You save:  FJ$90.27
Q780.13
List Price:  Q1,092.22
You save:  Q312.08
GY$20,949.30
List Price:  GY$29,329.86
You save:  GY$8,380.56
ISK kr13,941.60
List Price:  ISK kr19,518.80
You save:  ISK kr5,577.20
DH1,013.74
List Price:  DH1,419.27
You save:  DH405.53
L1,764.37
List Price:  L2,470.19
You save:  L705.82
ден5,702.11
List Price:  ден7,983.18
You save:  ден2,281.07
MOP$806.29
List Price:  MOP$1,128.85
You save:  MOP$322.55
N$1,909.24
List Price:  N$2,673.01
You save:  N$763.77
C$3,682.20
List Price:  C$5,155.22
You save:  C$1,473.02
रु13,347.49
List Price:  रु18,687.02
You save:  रु5,339.53
S/372.08
List Price:  S/520.93
You save:  S/148.85
K382.87
List Price:  K536.04
You save:  K153.16
SAR375.15
List Price:  SAR525.22
You save:  SAR150.07
ZK2,481.24
List Price:  ZK3,473.83
You save:  ZK992.59
L460.94
List Price:  L645.33
You save:  L184.39
Kč2,346.52
List Price:  Kč3,285.22
You save:  Kč938.70
Ft36,532.34
List Price:  Ft51,146.74
You save:  Ft14,614.40
SEK kr1,069.05
List Price:  SEK kr1,496.71
You save:  SEK kr427.66
ARS$85,802.56
List Price:  ARS$120,127.02
You save:  ARS$34,324.45
Bs691.35
List Price:  Bs967.92
You save:  Bs276.56
COP$386,901.39
List Price:  COP$541,677.43
You save:  COP$154,776.03
₡50,320.66
List Price:  ₡70,450.94
You save:  ₡20,130.27
L2,469.73
List Price:  L3,457.73
You save:  L987.99
₲739,686.52
List Price:  ₲1,035,590.72
You save:  ₲295,904.20
$U3,756.16
List Price:  $U5,258.77
You save:  $U1,502.61
zł399
List Price:  zł558.62
You save:  zł159.61
Already have an account? Log In

Transcript

Let's take a look at loops. Now remember the purpose of a loop is to cycle through JavaScript statements until a certain condition is met. The first type of loop that we will look at is the while loop. Let's take a look at the syntax for the while loop. First off, you must begin with the word while that is a reserved word. And then inside of parentheses you present the condition so very similar to the if conditional.

Then you have the block of code that will execute that can be one or more statements, and that code executes every iteration of the loop and finally, you close with a curly brace. So the two curly braces indicate the block of code which needs to execute. The code will continue to execute as long as the condition for the while loop evaluates to true as soon as it evaluates to false, it will exit out of the loop. Now there's another loop structure in JavaScript very similar to the while loop. It's not used very often, basically because it accomplishes the same thing that the while loop accomplishes. But I just want to show it to you before we do an example of the while loop.

That's the do while loop. And like I said, it works just like the while loop. The only difference is that the code block will execute at least once. So the condition is not checked until the code block has executed. So, it begins with the word do then inside of the curly braces is the block of code to execute. And then there is a while statement and a condition.

So the code blocks executes then it checks the condition if the condition is still true. It goes through and executes the code block again and continues to do that until it is false. So So the main difference between the do while and the while is that the do while will always execute the code block at least once the while not necessarily. Now you can accomplish the same thing with both types of loops. There's one more loop we'll look at in a subsequent movie, but these two are very similar the while in a do while so I presented them together. Alright, so back to the while loop syntax because this is the one we're going to do the exercise on.

Let's go ahead and open up sublime. Now what we want to accomplish with this exercise is we want to generate a random number between zero and 10. And we want to do it until we get a five and then we want to print out how many times it took to get to that number five. Okay, that's a good good situation where we would want to use a while loop. So let's first set up some variables. We want to set up a random num variable, this is going to contain our random number.

And then we also want to set up a counter. We'll use this counter to determine how many times it takes to get a five in our random number. And we need to initialize this variable to a zero because it's a counter for us. We want to start at zero. We've done it zero times. Alright, let's go ahead and create our while loop.

We begin with the keyword while then inside the parentheses. We put our conditional and we want that conditional be while the random number is not equal to five. Great and then we put our code the We put our curly braces to indicate our code block. Now first let's assign a number to random num, a random number two random. So random equals math dot random. And we want to multiply that by 10.

Because we want a random number between zero and 10. Okay. Now, as you may remember from the last time we did, we use random in the math object that it presents a decimal number between zero and one. When we multiply that by 10, there still is a number of digits after the decimal point. So how do we get rid of that? You may remember that we have to round it.

Now I could do a second line here. But instead I'm just going to put the results of math dot random multiplied by 10 inside math dot round, so open parentheses there, and then I put a close parentheses after the 10. That will round the results of math dot random times 10. Okay, and now one last thing we need to do is we need to increment our counter. Remember the increment operator plus plus, that will add one to it. That is exactly the same thing as counter equals counter plus one.

Okay, both of those would work. Obviously, counter plus plus is shorter to type. All right, now we simply need to print out our results. So let's do a console dot log. So basically, once ran num equals five, it will exit out of the loop, the loop will stop and then we can go ahead and print out our results. So while the loop is running, counter is incremented each time it goes through an iteration.

So counter will indicate how many times it went through that before it got to a five. So let's print that information out console dot log. And just for the sake of giving another example of template string literals, let's use that to print out the data. So I'm going to do a backtick it took, and then we'll put in the counter variable, because this is how many times it took to reach and now let's put in the random variable, we'll just use that variable because then we can make sure that random is set to five, if we want it to be set to five, okay. And then it will conclude that was one more backtick and the statement needs to be concluded with the semicolon. All right, let's take a look and see how this works.

So we're going to go ahead and save this. I'm going to grab the file path to my HTML file. And then we'll put that inside of the browser. Let's go ahead and open up the console. And this time, it said it took three times to reach five. All right, let me dock the console, so we can try to execute this couple more times it took three times reach five, if I refresh, we get it took 39 times to reach five.

Refresh again, took 19 times to reach five. Okay, I want to make one more change on our code here to make it a little more reusable. So right now, the code is set up to only do this if we want to find the number five How can we make this so that it could be any number we wanted between zero and 10? Well, we could set this up in a variable once again, another reason for a variable. So let's call this variable and value and let's set it equal to five. Whoops, then we can change and value anytime we want.

Now, obviously, in this small bit of code we have here it'd be just as easy to change in value as it would be to change this number. But if we were doing a large program, and we had our variables at the top, and who knows how many time we're using that variable, that would be a situation where you'd want to change the variable only and it would change it for the rest of the program. Just as an example, that we can put in value, and then we could also have n value in our console dot log statements, so then we use the variable twice. We only need to change it once up here. Okay, let's go ahead and save that. Jump out again.

Test it 20 times 52 times just kind of interesting sees one time. Wow. All right, so there's our first example of a while loop. We're going to do one more example in the next movie.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.