What is a JavaScript Loop? A Loop in JavaScript is used to perform repeated tasks based on conditions that typically have a return value of true or false. The loops I will introduce today are the “for loop”, “while loop”, and “do…while loop”.
The Syntax / Example:
In this example, the for loop contains three expressions all separated by a semi-colon inside of the parentheses. The first expression is an initialization that starts the loop and can be used to declare the iterator variable (counter). The second expression is the stopping condition that, if true, the code block will run, but if it evaluates as false, the code will stop. The last expression is an iteration statement, which is used to update the iterator variable upon each loop.
In the example above, the name of our iterator variable is “counter”, which is declared by the let variable declaration. The next expression is our stopping condition, which is read as “when counter is less than 4, run the code block, otherwise, stop.” The third expression means that after each loop, the value of “counter” will increase by 1.
Another example of how to use a for loop is using the for loop through a data structure, like an array. A for loop will perform the same operation on each element on an array until the stopping condition is met.
Example:
In this example, we’ve declared our iterator variable with the name of “i”, which is a common naming convention with for loops. Our stopping condition is i < dogs.length (while i is less than the array length of dogs, run the code block). According to MDN, “The length property of an object which is an instance of type Array sets or returns the number of elements in that array”. In this case, when we call .length on our “dogs” variable, our return should be 4. Our third expression states that after the end of each loop, increment our counter variable by 1.
In the output, we can see that each dog gets pet in the end. Because “puddles” is the last dog on the list, the array’s last element, the condition is met and the code stops running.
Another loop we will look at is the “while loop”.
Syntax:
Example:
In our example, we declare our iterator variable, i, and set it to 0. We use the “while” keyword to begin writing our while loop then in the parentheses, we enter in a condition to evaluate. If this condition evaluates as true, the statement / code block will execute. When the condition no longer evaluates as true, the code will no longer be execute. In our example, our condition (which you can also consider as our stopping condition) reads as “while i is less than 4, run the code block” / i < 4. In our statement, we tell the program to console.log(i) and to iterate plus 1 to our variable every time the condition evaluates as true.
In cases where we want our statements to do a task once and then keep doing it until the condition is met, we use our “do…while loop”.
Syntax:
Example:
For this example, we start by using the do keyword to begin our do…while loop. In the curly brackets, we write a statement that will be ran first, then our while keyword is used to write the next part. After while, in the parentheses, we write a condition and if that condition evaluates as true, we run the code block.
In this example, we tell the program to “do” cupsAdded++, which means to increment by 1 and console.log the variable “cupsAdded”. Then the program reads the while statement, cupsAdded < cupsOfSugarNeeded evaluates as true, then the program console.log(cupsAdded + “ cup(s) has been added.”).
First, the code block after “do” is executed, then the condition is evaluated, then if the condition evaluates as true, the block will execute again. This only stops when the stopping condition evaluates as false.
The difference between the while loop and the do…while loop is that the do…while loop will run the code at least once whether or not the condition returns a value of true.
The best thing to remember about loops is that they perform repetitive actions so we don’t have to manually write the code every time.
