Today I'd like to speak about the for Loop in Javascript. What a fantastic invention!

I've only really just learnt the fundamentals, but here are a few simple examples:

See the syntax below:

const cities = ['London', 'Paris', 'Rome'];
for (let i = 0; i < cities.length; i++) {
console.log(cities[i])};

And the result should be:

London // First item (0)
Paris // Next item (1)
Rome // Last item (2)

So lets break it down! First thing to notice is the way the for loop is constructed:

The first part is for (let i = 0;. for activates the loop and let i = 0 is simply the declaring the variable 'i' which (in my opinion) stands for 'index', since we will be indexing through some sort of list.

i can be any letter or name but I use it for clarity. I set the value to 0 because in every JavaScript list the first item starts from zero. For example, if I set i to 1 then the result would be:

Paris
Rome

Next is the condition i <cities.length which is how long you want the loop to operate for. The array has three items inside and will therefore return a value of 3. The condition then reads as: "i must stay below three loops" making the last item "Rome". If the array had four items, cities.length would also be a value of 4.

The last part of the syntax is i++ which means we simply want the index to increase by one. If I instead typed i += 2 then the index would increase by two and look like this on the console:

London
Rome

Most importantly though, is the [i] that comes after the array name. This means JavaScript reads the first loop as cities[0], making the first item on the array London. On the second loop it becomes cities[1] making the second value Paris.

Furthermore, you can loop with anything that has a string of values:

const myName = "Prodigal";
for (let i = myname.length; i >= 0; i--) {
console.log(myName[i]);
}

In this example, I reversed the process. You can see that now the first part has i with a value of the string's length (in this case 8). The second part's condition stops i from going any lower than zero, and the third part decreases the value by one through each loop. This would return the following to the console:

l
a
g
i
d
o
r
P

Now have a look at this more complicated example, which is a nested loop:

const cities = ['London', 'Paris', 'Rome'];

for (let i = 0; i < cities.length; i++) {

  console.log(cities[i]);

  const towns = [`Currently has ${i} towns.`, `Soon there will be ${i + 3}.`];

  for (let x = 0; x < towns.length; x++) {

    console.log(towns[x]);
  }
}

A nested loop is a loop within a loop. You can see here the initial process taking place but this time I am not logging the cities array to the console. Instead I have declared a little sentence with template literals. Template literals allow you to add almost anything into a string of words (very helpful!).

I have then written another for loop inside the first one and the result should look like this:

London
Currently has 0 towns.
Soon there will be 3.
Paris
Currently has 1 towns.
Soon there will be 4.
Rome
Currently has 2 towns.
Soon there will be 5.

Does this make sense to you? The cities array loops through, but inside that the towns array loops as well. As there are two items in the towns array, both sentences will log to the console after every cities loop.

You can also see the index feature is full swing! Note how the sentences quote i and the relevant value appears. A simple calculation in the second sentence makes the same 0 value in i a 3 instead, thus makes the other sentences change as well.

The possibilities really are endless with this feature, so keep experimenting.

I hope I was able to break down the for loop for you (lol). If you have anything cool to add about this type of loop, let me know in the comments and I'll be sure to give it a read.

Thanks for reading!