JavaScript for loops

The concept of loops is present in almost all programming languages, a loop is a control flow statement that specifies iteration and is basically a method for executing statements one or more times up to a desired number of times. This is especially useful if you are working with arrays (there is actually more than one way to loop through an array and I go into some more detail on this in my array methods post).

For this post we are going to be looking at the basic for loop and it’s practical uses. A for loop is a very handy tool in web development, imagine you have a playlist of songs for example that you want to display to your website. You could hard code each title into a list in the HTML like the example image below;

This method is ok in theory but supposing your playlist had 100 songs? It would take quite a lot of HTML’ing to build out the full playlist when using a JavaScript for loop to dynamically display the data programmatically might be a slightly easier way to go (and would also mean tidier code). To familiarise ourselves with the basic for loop syntax I am going to briefly walk us through it. The code starts with the ‘for’ keyword followed by parentheses that will contain three expressions, the first exression sets the counter variable that we will use to count through all the iterations.

It is most commonly set as a variable called ‘i’ but it can be called any other variable name. The next part will set how long the loop runs for, so if we wanted it to just count up to limit of 99 we would write i < 100 and if we was referring to an array it would be array.length using the .length keword to get full length of the array. Then the last expression increases a value each time the code block in the loop has been executed, which can be either i++ or i += 1. Finally we add curly braces after the parentheses in which we will store whatever we want the loop to do. The finished product will look something like this;

Using this code we will now print to the page, the playlist I used in the example earlier. This time around rather than writing the code in HTML I have created the list of songs and artists in a JavaScript array. When we want to add a new song to the playlist we can now just add the it to our array and the for loop will forever dynamically output the whole list to the page.

The loop will create the counter variable, loop through the list until it comes to the end of the list’s length and then output’s the list item’s to the page by way of the content variable which will attach to the ul element with id of ‘demo’. Here is the full code and beside it an image of the output to the page;

Var or let?

You will notice in my examples that I have used ‘let’ to declare the counter variable (first expression in the loop) instead of ‘var’, both are perfectly fine to use but sometimes it can affect the scope if ‘var’ is used instead of the later ES6 ‘let’ keyword.

An example of this would be that if the i variable is declared outside and before the loop which if using var can change what the expected output would normally be from the loop. Consider this piece of code;

You would assume that the first variable declared would output 5 but due to ‘var’ being what we call hoisted (see my previous blog on JavaScript hoisting) then ‘var’ is ignored and the i variable inside the loop is used instead. If we where to call ‘let’ instead on the first variable then the output would be 5 instead of 10.

Generally speaking, using ‘let’ is a lot easier when dealing with loops. Hopefully this is helpful to anyone who is a beginner or trying to learn basic JavaScript or programming, I will be covering the other loops in a future blog. Until then, happy coding!