#100DaysOfCode: Day 7
For Loops
Day7 of #100DayOfCode! This week I am going to start a mini-series on the bread and butter of Javascript — array iterator methods. But before I explain what array iterator methods are, I need to take a moment to explain what a for loop is. It’s hard to comprehend the power of array iterator methods if you do not have some understanding of what a for loop is. So today is about for loops!
What is a for loop?
A for loop is a programming structure that repeats a sequence of instructions until a specific condition is met. It is a statement for specifying iteration which allows code to be executed repeatedly. It allows us to manipulate data automatically rather than having to type out every single operation within our text editor.
Structure of a for Loop
A for loop has 4 separate pieces:
- Initial expression
This is where the declaration for our variable index lives. Usually written as i = 0, this expression assigns an index (i) to 0. You can think of an index as a counter.
2. Conditional Express
This is where we declare the condition of how the for loop will end. In example B, the for loop will end once i is greater than 9.
3. Increment Expression
This is where we declare what happens to i at the end of every loop. In the example above, we add 1 to i every time the loop ends.
4. Statement
This is where we define the logic we want to perform. The sky’s the limit for the statement. We can do almost anything we want in this section! In the example above, we are creating a string that adds the current index to the string. This will cause the for loop to print a string of 9 numbers given the expressions we have passed in as arguments for the for loop.
Dive Deeper
We can also use for loops to manipulate arrays. We can structure a for loop to manipulate each index of the array with the magic of bracket notation. By using bracket notation we can access each element in our array with the index we defined in the initial expression to perform the logic we need.
Consider the example above. We have an array of someNumbers. The mission is to multiply each index of the array by 2. In order to do this, we have to set up our for loop correctly first.
- Initial expression
We can label ‘i’ whatever we want! It doesn’t have to be only i since it is a variable declaration. In this case, I used the word index to be more semantically descriptive for our mission to iterator over an array.
2. Condition Expression
If we want to manipulate every single index of the array, we can use the someNumbers.length to set the condition to the length of the array we are iterating over.
3. Increment Expression
We want to do this logic index by index, so adding 1 to the index each time the loop ends makes sense in this case.
4. Statement
Now we tell the loop what action needs to happen for each index. In this case, we are multiplying the index by two each time. In order to access the array, we can use bracket notation like someNumbers[Index].
Success! On line 1272 of the picture above, you can see our mission was successful! We were able to multiple each index of the array by 2.
For loops are super powerful but they can get messy quickly. If we need to make several modifications to our array, or access other data, it can get confusing fast. This is where the power of array iterator methods comes in. Tomorrow we will explore how we can make our lives easier with array iterator methods.
