Intro to Javascript’s incredible for loop

Today I am introducing one of the most basic concepts in programming, the for loop. My goal today is to talk about the for loop in a way that could be understood by someone who is completely unfamiliar with the concept.

Loops are a fundamental concept in programming and different types of loops are used in all programming languages.

The for loop is one of the building blocks of Javascript, and many of our higher-order functions are built using it. (Check out my write-up on some of those functions here!)

So what is a for loop?

Mozilla’s documentation defines it in the following way:

A for loop repeats until a specified condition evaluates to false.

We are setting a condition and then telling our program to continue an action for as long as that condition is true.

This is the basic structure of a for loop:

for ([initialExpression]; [conditionExpression];[incrementExpression])
  statement

This is commonly expressed in the following way:

for(let i = 0; i < 4; i++) {
     console.log(i)
}

We have set our variable i to 0 and told it that as long as i is less than 4, to print the value of i to the console. If we stopped here the loop would just run forever, because i is always0 which is never equal to or greater than 4 .

To solve this, we have to build in a way for i to change so it can become equal to or greater than 4 and ending the loop. This is where the incrementExpression comes in. We are telling i to increase by 1 at the end of each loop. With that in place, ourconditionExpression will at some point be false (when it is no longer less than 4), thus ending the loop.

Let’s step through the example above:

Our for loop starts, and i is 0 , and 0 is less than 4, so it will show 0 in the console log, and then increment i to 1 .

On the second loop i is equal to 1 . Because 1 is still less than our 4 , it will show 1 in the console log, and increment i to 2.

This will continue until our conditionExpression returns false (in this case wheni = 4 . So in this example, the conditionExpression will be true four times ( when i is 0, 1, 2, and 3), so we will console i ‘s current value four times.

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

small celebration

A small celebration is in order here. We have convinced our very literal-minded program to do something a set number of times.

What we have asked it to do so far (console log our counter, i ) is not very dynamic. How can we use this for loop to do something a little more useful?

In our last example, we set our conditionStatement to be a fixed number. What if we want to search through an array? We want to make sure our loop runs enough times so it can look at each element, but we don’t need it to check each item more than once.

We could just look at the array, count how many elements are in it, and set our conditionStatement to that number, but that makes it hard to reuse this code. And what if we don’t know how long the array is? What if the array length changes?

One very common way around this is to set our condition to the length of the array. Calling our array with .length on the end will return the number of elements in the array (see below).

let gemSearch = ["rock", "rock", "gem", "rock", "rock", "gem", "rock", "gem"];
gemSearch.length
// 8

Now we can set our condition to precisely the length of the array we are searching.

Check out the example below:

let gemSearch = ["rock", "rock", "gem", "rock", "rock", "gem", "rock", "gem"];
for(let i = 0; i < gemSearch.length; i++){
     console.log(gemSearch[i])
}
// rock
// rock
// gem
// rock
// rock
// gem
// rock
// gem

Ok, so we told our for loop to run 8 (gemSearch.length ) times, giving ourselves enough loops to look at each item in the array. For each loop we are logging gemSearch[i] to the console.

Because we seti = 0 , and 0 also represents the first index of an array, we are now able to look at specific elements in the array! i starts at0 and our loop will log gemSearch[0] Theni is 1 and our loop logs gemSearch[1] . As i increases we progress through the array.

This is why it is common to see loops with i as the variable; because it is so commonly used to track the index.

Now that we are able to look at every element in an array, let’s tell our program to do something based on what each element is.

In the following example, we are going to look through an array of rocks and gems, and anytime we come across a “gem” element we are going to add it to a new array. Then, we are going to return our array of gems.

let gemSearch = ["rock", "rock", "gem", "rock", "rock", "gem", "rock", "gem"];
let foundGems = [];
for(let i = 0; i < gemSearch.length; i++){
     if(gemSearch[i] === "gem") foundGems.push(gemSearch[i])
}
foundGems;
// ["gem", "gem", "gem"]

Done!

We have used a for loop to search through an array and filter out only the elements that match our search criteria.

I hope you have found this introduction to for loops useful. We barely scratched the surface of what these loops can accomplish in your code and I look forward to future installments where I can show more dynamic usage!

Please feel free to reach out to me at joshuagauthreaux@gmail.com or visit my website at joshgotro.com.

Thanks and be well!