A Beginner’s Guide to Loops
Decoding repetitious cycles.
What are Loops?
Whether you have only been coding for a while or are a seasoned vet, chances are that you have or will soon encounter loops. Loops are instructions that allow you to repeat, or iterate, blocks of code until conditions are met. These structures are simple yet powerful and are crucial to have in a developer's toolbox.
While the concept of loops is fundamental and can be implemented in most programming languages, the examples that are shown below will be written in javascript.
All you need to follow along is a willingness to learn, after all, this is for beginners!
Loop Basics
Though many types of variations exist, basic loop structures have three things in common.
- a keyword — identifies the type of loop
- a condition statement — when false, this statement ends the loop
- a body — the chunk of code meant to repeat
While Loops run an undefined number of times until the condition statement is false.
It is easy to relate while loops to everyday situations. Let’s say it is raining. “While” it continues to rain and we need to go outside, we’ll grab an umbrella. These types of indefinite conditions arise frequently in programming.
The structure of a while loop is simple:
- the while keyword
- the condition
- the body
let sum = 0; //sets the variable "sum" to zerowhile (sum < 100){ //sets the exit condition sum = sum + 10; //adds 10 to the variable "sum"}// sum values for each loop: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
- In our first line of code, we create a variable named sum and set its value to zero.
- The second line contains the while keyword and the condition statement. Together, this line can be read as “while the sum is less than 100.”
- The line of code between the braces is the body which adds 10 to the sum and then assigns that number as the value of sum.
- The value of sum continues to increment by tens until sum is 100. At this point, the value is no longer less than 100 but equal to it. The condition statement is false, therefore exiting the while loop.
Do-While Loops run similarly to while loops, with the one major difference. As you may have noticed, the while loop checks for a true condition before executing the body of the code. Do-while loops check the condition after running the body once.
If you wanted to relate a do-while loop to a real-world event, imagine getting a bag of chips from a vending machine. If you want to finish the bag, how would you go about that? Would you eat 10 chips or 30? You don’t know how many chips are in the bag, but you know that when you open the bag there will at least be one chip. So what you “do” is open the bag and eat, and “while” there are more chips you continue to eat. Do-while loops follow this same structure when you might have to repeat something but definitely want to execute the step at least once.
The structure of a do-while loop:
- the do keyword
- the body
- the while keyword
- the condition
let sum = 200; //sets the variable "sum" to 200do{ //block of code to be executed sum += 10; //adds 10 to the variable "sum" } while (sum < 100) //checks exit conditions // sum value for do-while loop: 210
In this do-while loop, we have very similar code to our while loop example.
- In our first line of code, we create a variable named sum and set its value to 200.
The second line contains the do keyword that signals the body of the do-while loop will be in the following braces. The body of this loop also adds 10 to the sum and then assigns that number as the value of sum. (sum += 10 is shorthand for sum = sum + 10)
- The last line contains the while keyword and the condition statement that is checked after the body executes.
- When the loop runs, the value of sum increments by ten and is now 210. The condition statement is evaluated. Since 210 is greater than 200, the condition is false, the do-while loop exits.
For Loops are the last type of loop we will discuss. These loops are great for repeating code over a specific number of times. The structure of the for loop is a little more complex than its while counterpart but can be quickly mastered.
Bringing for loops to an actual scenario is easy as well. If we are setting a dinner table “for” every member of our family, we need to place plates and silverware. In coding, there are plenty of situations where you will want to perform the same actions on a group of similar objects.
The structure of a for loop:
- the for keyword
- the starting value
- the condition
- the increment
- the body
let sum = 0; //sets the variable "sum" to 0for (let i = 0; i < 10; i++){ //the for loop statements sum += 10; //adds 10 to the variable "sum"}// sum values for each loop: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
If you are starting to panic don’t worry. Let’s break this down. After the for keyword in parenthesis, there are three statements. The first two are each followed by a semicolon. (Don’t leave those out.) The first statement identifies a variable that the loop starts counting from. It is common to see this represented by the letter i with a value of 0. The second statement is a condition statement, just like the ones found in the while and do-while loops. After each cycle of the loop, the starting value defined in the first statement is incremented. The third statement determines how the starting value increments. The last part, surrounded by braces, is the body of the loop.
In the example above, we are trying to achieve the same goal as we did in our while loop.
- The initial value of the variable sum is zero.
- Next, we identify that we are creating a for loop with the for keyword.
- The first statement creates a variable i and initializes its value as zero.
- The second statement is the condition and can be read as “while i is less than 10.”
- The third statement tells us that i will increment by 1 after the body is executed. (i++ is shorthand i = i +1 for i incrementing by one)
- The body of code increments the sum by 10.
The values of each loop are as follow:
- loop 1: i = 0, sum = 10
- loop 2: i = 1, sum = 20
- loop 3: i = 2, sum = 30
- loop 4: i = 3, sum = 40
- loop 5: i = 4, sum = 50
- loop 6: i = 5, sum = 60
- loop 7: i = 6, sum = 70
- loop 8: i = 7, sum = 80
- loop 9: i = 8, sum = 90
- loop 10: i = 9, sum = 100
That’s it! You’ve got the for loop down!
Your choice of whether to use while loops, do-while loops, or for loops, ultimately comes down to how you want your code to flow and how comfortable you are implementing these structures.
Remember… the more you practice programming, the better you get!
What Next?
Look into these topics to build onto your foundation of loop structures.
