Loops and their scopes can be confusing AF! 😰

Loops can be very confusing to grasp, and for this very reason, it took me a while to fully understand them.

What makes them even more confusing is all the tech terminology that a beginner might have a harder time understanding. So, I've tried my best to write this tutorial in full English mode, so that all of you can digest loops with ease 😆

This tutorial goes over what loops are, the types of loops, their differences, and their scopes.

What are loops?

Loops execute a block of code inside of them depending on a condition. If the condition is true, the code will execute. If the condition is false, the code won't execute, and it'll exit the loop.

There are 3 kinds of loops: the "while" loop, the "do while" loop, and the "for" loop.

"while" loops ➰

"while" loops will run through a block of code over and over again as long as the condition is true. This means that "while" loops won't even start if the condition isn't met. Once the condition becomes false, the code will stop running, and we'll exit the loop.

This is what the base of a "while" loop looks like:

while (condition) {
  // code
}

Here's an example of a "while" loop, with the "English" mode explanation below:

// Declare (i), set its value to 0
let i = 0;

// Check condition: if (i) < 5 is true, print 'i is less than 5' on console
while (i < 5) {
  console.log('i is less than 5');

// Add 1 to (i) AFTER this iteration
  i++;
}

English mode:

1. Start: i is 0

2. Check the condition

   • While i is less than 5, execute the code inside the curly braces. Otherwise, exit the loop

3. Then, add 1 to i

4. Now, the starting value if i is 1

The steps above are repeated until the condition is no longer true. Once the condition is no longer true, it won't execute the code, and we'll exit the loop.

In this case, the code above will keep running as long as i is less than 5.

"do...while" loops ➰

"do...while" loops are similar to "while" loops, but have a distinct difference. The key difference is that "while" loops check the condition first, and then run the code. You will only enter the loop if the condition is met.

On the other hand, "do...while" loops will execute the code at least once before the condition is checked. Then, once inside the loop, it'll repeat as long as the condition is true. This means that whether or not the condition is true, "do...while" loops will execute the code once at the beginning.

In other words, "do...while" loops don't check the condition until after it ran the block of code once. So, use "do while" loops when you want to execute the code at least once before, regardless of the condition.

This is what the base of a "do...while" loop looks like:

do {
  // code
} while (condition)

Here's an example of a "do...while" loop, with the "English" mode explanation below:

// Declare (i), set its value to 0
let i = 0;

// Run the code below once before it checks condition
do {
  console.log('i is less than 5.');

// Add 1 to (i)
  i++

// Check condition: if (i) < 5 is still true, print 'i is less than 5' on console
} while (i < 5);

English mode:

1. Start: i is 0

2. Execute the code inside curly braces

3. Add 1 to i

4. Check the condition, and if it's still true, repeat

"for" loops ➰

"for" loops and "while" loops are very similar. "for" loops, like "while" loops, will check if the condition is true first, then run through a block of code over and over again, until the condition is false. Once the condition is false, the code will stop running, and we'll exit the loop.

"for" loops consist of 3 expressions, which I call the "initial variable", "condition", and "increment". These are not the original names, but I call them like this to remember them better.

This is what the base of a "for" loop looks like, with the explanation below:

for (initial variable; condition; increment) {
  // code
}

First expression of "for" loop: initial variable

In most cases, the first expression of a "for" loop is where you'll declare the variable used in the loop (before it starts). You can name it whatever you want, but conventionally, most people use i.

This might look something like: let i = 0;.

for (let i = 0; condition; increment) {
  // code
}

Second expression of "for" loop: condition

The second expression of a "for" loop is where the condition of the initial variable is checked. In the example below, the loop checks if i really is less than 10.

for (let i = 0; i < 10; increment) {
  // code
}

Third expression of "for" loop: increment

The third expression of a "for" loop is where you increment the value of the initial variable. You can also decrement the value of the initial variable, like this:

// Increment
for (let i = 0; i < 10; i++) {
  // code
}

// Decrement 
for (let i = 0; i < 10; i--) {
  // code
}

You'll probably get a better understanding with an example. Here's an example of a "for" loop, with the "English" mode explanation below:

// Declare (i), set its value to 0, check the condition, add 1 to (i)
for (let i = 0; i < 5;  i++) {

// Run code below if condition is true
  console.log('i is less than 5');

// Add 1 to (i), repeat
}

English mode:

The "for" loop will always execute the first expression (initial variable) first. In other words, the first expression that initializes a variable will always execute first.

1. Check the condition

   • While i is less than 5, execute the code inside the curly braces. Otherwise, exit loop.

2. Add 1 to `i`

3. Repeat steps 1 and 2

Scope in Loops

Loops have scope too: local scope and global scope. Scope affects whether or not a certain variable is accessible from outside, or inside, let's say, a function, or in this case, a loop.

This just means that being able to access a variable depends on where on the code you declared it.

Local scope

Let's take a look at this example below:

// (i) is local scope
for (let i = 0; i < 5; i++) {
  console.log(i); // (i) gets logged
}

console.log(i); // error: undefined

On the code above, notice how I declared i inside the "for" loop. Now, i is only seen inside that loop. You won't be able to access it outside the loop.

Global scope

Let's take a look at the following example:

// (i) is global scope
let i = 3; // Declare (i) outside the "for" loop

for (i = 0; i < 5; i++) {
console.log(i); // logs 0 1 2 3 4 
}

On the code above, i was assigned the number 3 outside of the "for" loop. But entering the loop, it was re-assigned to 0. As a result, the value of i changes. Console will not log 3.

Be careful with declaring i without the let keyword. It might change the value of an existing i variable outside the loop.

// Be careful with this!
for (i = 0; i < 5; i++) 

// This is more secure, less bugs
for (let i = 0; i < 5; i++)

Conclusion

Loops were a fucking pain for me to fully understand. I think this is where I almost called it quits with JavaScript. However, the best way of learning is teaching. Writing this article really helped me dive deeper in the concept. I'm also hoping this article helped others (like me) who had a hard time understanding loops.

---

Check out my Twitter for more educational posts, my programming learning journey, but mostly shit posting.