I'm a relatively new programmer, I started learning to code a little over two years ago and most recently finished a six-month coding boot camp. I program mostly in Javascript in what's called the MERN stack. That's MongoDB, Express, React and Node. I'm slowly building up the confidence to start exploring other programming languages such as C# and Python. But every now and then I like to refamiliarize myself with some of the nuances and basic skills in JavaScript. One feature of Javascript that can also be found in other languages is the for loop. That's what this article is about. At around week 3 of the 24 week, six-month-long boot camp, I was introduced to the infamous for loop.
By my surprise, I quickly grasped the convention of initializing a variable and looping and iterating over a block of code a set number of times per its conditional statement until you break out of said loop via a false condition (Holy run-on sentence). Well, at least I thought I had a grasp on the concept. Here's a brief lesson on the for loop.
The for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a block statement to be executed in the loop. Let's assume that we are going to use each of the three optional expressions.
for ([initializer]; [condition]; [final_expression]) {
block statement
}
The first expression is the initializer, a variable declaration evaluated once before the loop begins. Typically used to initialize a counter variable.
The second expression is the condition, an expression to be evaluated before each loop iteration. If this expression evaluates to true, then the statement is executed.
The third and final expression occurs before the next evaluation of the condition. Mostly used to update or increment the initializer aka the counter variable.
Finally, you must code up a block statement that will be executed as long as the condition evaluates to true.
Here's what a for loop would look like IRL:
for (var i = 0; i < 10; i++) {
console.log(i) // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
}
In the first expression, we begin with the initializer that declares a variable i with a value of 0 var i = 0
. Then in the second expression, we create a condition that states that as long as i, which we initialized as the value of 0 is less 10, evaluate to true i < 10
(we'll come back to this soon). Finally, in the third expression, we state that each time our condition evaluates to true, increment i by one. That's what ++
means. You could also code this expression as i = i + 1
.
The first time the condition is evaluated, it is evaluated as true because 0 < 10
, as a result, variable i is incremented to the value of 1. Then the second time the condition is evaluated again as true because 1 < 10
, variable i is then incremented by 1 and is now the value of 2 and so on and so forth until variable i reaches the value of 9, which (I exclaim!) is less than 10.
One would think that this is the point where the loop stops because in our condition statement we asked for the loop to evaluate to true as long as i is less than 10. 9 < 10
so the loop should stop. This is where I recently realized that I may be dumb, but I'm smarter than a computer.
In my head, it made perfect sense to make the assumption that since 9 is, in fact, less than 10 then this loop should stop and evaluate to true for the very last time and never run again because obviously 10 isn't less than 10 - it's equal! However, I was wrong. I even did further checking by calling console.log
on variable i to check it's value. I thought the value returned from this log would be 9 since that's the last number returned from the statement. However, I was wrong again. The value of i, in this case, is 10.
for (var i = 0; i < 10; i++) {
console.log(i) // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
}
console.log(i) // 10
Not only was this a stupid assumption on my part but the computer is even dumber than me. Because the computer has no way of making assumptions. The computer has to actually go through one last additional loop to check whether 10 is less than 10. Once it realizes that 10 is not less than 10, this check evaluates to false, then the loop ends.
Learning the nuances of any programming languages is fun!
Top comments (1)
I think that's the reason that so many people (include me) hate
var
. It makes that so hard to see the scope. As someone who has JavaScript as not even second but third, I love it but it doesn't make sense many times. I really appreciate ES6.let
would let the same code just throw an error would be expected.