5th Week of #100DaysOfCode with JavaScript. What did I Learn so far?
Topic I learned this week: Loops!
This week I learned another important concept in JavaScript which is loops. Loops is used in any programming language I can think of. You will always use this in programming. Loops are a way to repeat the same code multiple times. I am no expert but here is a example: If you wanted to execute code from 1–10 you can use a loop instead of writing that same code 10 times. Lets take a look at how the while loop work.
In this code snippet, I show how the while loop is set up. You have the keyword ‘while’ and then you have the ‘condition’ inside of the parentheses (kind of like a if statement). Inside of your brackets you have the code and the loop body. So while the condition is true, the code inside of the loop body is executed. Lets actually put some code inside of the while loop.
A single execution of a loop is called a iteration. In this example the loop will go through 4 iterations. In simpler terms, the loop will execute 4 times and no more than that because it only executes as long as i is less then 4. First I declared the variable i to be 0. Then I created the while loop with a condition that says as long as i is less than 4 keep executing whats in the loop body. So the browser console will keep printing numbers until it reaches 3. The last piece of code (i++) in the loop body is to stop the from running forever (in theory). Lets talk about the do…while loop.
In this code snippet, the loop body is moved above the condition. Its important to note that you would only use this kind of loop if you want the execute the body of the loop at least one time regardless of the condition being true. Other than that, the regular while loop is acceptable. So this will execute 4 times just like the example of the while loop. It’s the same exact concept just a different loop. Lets talk about the more complex and common loop which is the for loop!
This one was more confusing to me than the other loops but it is the most common type of loop. This is a for loop and its basic syntax. The begin piece of code executes once upon entering the loop. The condition piece of code is checked on each iteration of the loop and it stops when the condition is false. The step piece of code executes after the body on each iteration (do not put a semi colon after this one). Lets look at how this works.
In this example, I learned this by reading it in pseudo-code. So this loop is saying: “begin loop” (i = 0;), “if condition is true, run the loop body and run step as well ” (i < 4) { console.log(i); i++ }. “Run this loop until it reaches 3 which is the furthest you can go for i to be less than 4”. Hopefully this makes sense to you because I had a hard time figuring out how this works.
Normally, a loop will terminate once the condition becomes false. However, we can terminate or exit the loop anytime we want to by using a loop break. Lets look at a example of this.
A break is a pretty simple concept. In this example, the for loop originally supposed to iterate 6 times but due to the break that was added it will only iterate 5 times starting from 0 until it hit 4. On line 2 , I added a if statement saying if i is equal to 4 then stop the loop (break). There is also a continue statement that is really just a “lighter” break statement. So basically it does not stop the whole loop, it just stops the iteration of the loop and starts a new one if the condition allows it.
Summary
Overall, I felt like learning loops was fun to play around with and definitely useful. I see why loops are so common in programming and I cant wait to actually start using them in a project. This was the last of the basic concepts that I needed to learn and now I will start getting into the fun stuff which is building projects!
