Loops and Iteration
Episode #5 of the course Fundamentals of JavaScript by Matt Fay
In today’s lesson, we’re going to learn about loops, a quick and easy way to do something multiple times, which helps us avoid repetition.
Loops: First, What Are They?
Think about the merry-go-round at a carnival. They’re stationary until children surround it and begin boarding their seats. Then, when everyone is safely seated, a worker clicks a button, which sets off a “loop.” it goes around and around a set number of times, and then it stops. We can imagine as the children climb in that the first spin hasn’t yet happened—it’s at 0. When it starts moving, it may spin around five times before it stops. So, the merry-go-round is similar to our loop such that it executes in a like manner until it doesn’t anymore. So, why is this useful? Imagine if that worker had to click the button each time the merry-go-round went around once. That would be painful. Likewise, if we had to, say, write a program to count from one to 100 and we didn’t know about loops, it would be just as painful or maybe even more so!
For Loops
Extending on the analogy above, imagine the worker having to press a button for each spin. That wouldn’t be so fun, would it? Likewise, what if we wanted to print the numbers from one to ten in JavaScript? Well, we can do something like this:
console.log(1);
console.log(2);
console.log(3);
…
console.log(10);
But that’s inefficient! We’re programmers, we can make this much simpler. Enter the for loop:
for (var i = 1; i < 11; i++) {
console.log(i);
}
Whoa! That’s a lot to digest. So, let’s think about this a little.
for (initialization; condition; incrementation);
First, we initialize a variable i, which we set to one.
Next, we check a condition, which reads: for as long as i is less than 11.
Finally, we decide what’s going to happen. In the above, we’re simply adding 1 to i.
In the for loop’s body—between the curly braces—we’re logging the variable i, which will simply return the numbers 1 to 10. So, it reads: variable i is equal to 1. While i is less than 11, add 1 to i.
While Loops
If it is raining, bring an umbrella. While it is raining, hold your umbrella up. When it is no longer raining, put your umbrella away. We can sum a while loop up such as: While a condition is, or isn’t met, do something. When that something is no longer going on, stop doing that something. Now, something is simply a set of steps, such as adding one to x.
// Set a variable x to 0
var x = 0;
// While x is not equal to 10
while (x !== 10) {
// Add 1 to x
x+1;
}
Note: We can replace x+1; with x++;—as they do the same operation, add 1.
Like our umbrella analogy, we’re doing something until something no longer holds true. In the above example, that “something” is adding one to a variable while it doesn’t equal ten. On each iteration(x+1), our while loop checks the value of x, continuing on until x gets to ten. The value of x being in the parenthesis is that it reads: Is x(0) equal to 10? No. Add 1 to x, set x = 1. Is x(1) equal to 10? No, x(1) + 1, set x = 2 … x(10) = 10? Yes. Break out of the loop, we’re done here!
Do/While Loop
A do/while loop can be explained with a simple example:
Do: Ask Mom what’s for dinner. While: She’s not responding.
We’re going to do something while a certain condition isn’t met. We’ll bring this into a practical example below.
// Set a variable x to equal zero
var x = 0;
// Add 1 to x
do {
x + 1;
}
// While x is not equal to 10
while (x !== 10);
Notice that the while loop above has a semicolon. It’s not a loop itself, but a statement for the do block of code.
That’s it for today, folks! Stay tuned for Lesson 6, where we’ll learn about objects and arrays.
Share with friends