JavaScript for loops explained like you're 5

Explanation

For loops are a way to execute the same code block X times. This is the most simple explanation about loops, but it's not really helpful, so let's dive deeper and see some examples.

Let's say you want to print 'hello world' 5 times, you could do something like this

Event tho this works, it's not the best approach, just imagine if you would need to print 'hello world' 97889 times, you would need to write console.log('hello world') 97889 on your code, but I don't even know why would anyone need to print'hello world' 97889 times hehehe, anyways, lets continue.

In this case it could be easier to use a for loop and our good friend JavaScript provides us with many kinds of for loops, but let's just use a regular for loop.

This code will print 'hello world' 5 times. Maybe you may think that this doesn't saves us so much lines of code, but If you need to print 'hello world' 97889 times, you just need to change the number 5.

Just like this, this code will print 'hello world' 97889 times. Ahhh, now it seems more helpful. But how does this work?

The basic structure of a for loop is such as this

initial expression

Here's where you declare a variable and this is where our for loop will start executing our code. Most of the times you will start with 0, but you can start with any number.

condition

Every time your for loop executes your code block (iterates), it first check's if the condition, if it returns true, the for loop will execute your code again and if it returns false, it will stop executing the code.

• Careful: if your condition never returns false, it will execute your code forever!!!!

increment

It tells your for loop how much your initial expression will increment (or decrement) after each code block execution (iteration)

Analogy

A for loop is like following a daily routine, you're gonna repeat the same steps everyday until you reach a specific goal, but each day those steps could have different results

More examples

The 'hello world' example was a little bit dumb, but easy to understand, so now let's see some more 'advanced' implementations of a for loop

Printing from 1 to 10

Since our initial expression is set to 1 and the increment is 1, it will start executing from 1 and the initial expression will increment by 1 after each code execution. After every code execution (iteration) it will check if our initial expression is less or equal to 10, if it's true it will print the initial expression and if it's false, it will stop. So this code will end up printing the numbers from 1 to 10 and then it stops.

• Remember: after each code execution (iteration), the initial expression will increment by 1

Printing odd numbers from 1 to 10 times 10

Our initial expression is 1, the increment is set to 2 and the condition checks if our initial expression is less or equal to 10. The code to execute will be our initial expression times 10, so it will end up printing 10, 30, 50, 70, 90 and then it stops.

It never prints 10 because after printing 90, the initial expression increments to 11, so the conditions return false and therefore it doesn't executes the code

I've seen you already mastered the basics of for loops, so now let's get crazy with them

Little guessing game

• First, we declare an array of names
• Then we declare a variable answer which is an empty string
• Lastly we create a for loop who will use a initial expression of 0, it will increment by 1 and then it will stop at the 6th code execution
  • Every code execution it will show you a prompt asking for a name
  • Then it updates the answer to what you typed
  • Lastly it will check if the answer is equal to the one stored in our names array in the i position, which is what the current code execution (iteration) is
    • example: in the third execution it will compare if your answer is equal to 'clara' since it is the 3rd name in the names array
  • If the condition in the if statement is true, it will print 'You've guessed the name' and it's false, it will print 'Wrong, the name was "
    • example: if in the fourth execution you don't guess the name, it will print ''wrong, the name was john", since it is the fourth name stored in the names array

This game would be easier with a for...in loop but I will explain that kind of loop and more in other post, so stay tuned

Run this game and play with it here

https://jsfiddle.net/9r4zfj0q/

Exercises

You can make this exercises here

https://jsfiddle.net/

1. Print the numbers from 10 to 1
2. Print 'uwu' when the number is odd and print 'owo' when the number is even, from 1 to 20
3. Ask the user for his/her age and print the odd numbers from 1 to his/her age
4. Abolish social inequality...just kidding, that can't be done with a for loop T_T

Results

Remember that this exercises can be accomplished with different approaches, I'm just showing you my approach

• Exercise 1

• Exercise 2

• Exercise 3