Loops in JavaScript

What are our options?

Even if we stick to JavaScript’s basic loops, we still have quite a few options available to us. This can vary based upon our goals but can ultimately come down to your own personal style or preference when coding. A loop, no matter how it is constructed, will always be a loop. To review before we jump right into it, we create loops so that we can repeatedly do something. This could range from manipulating a whole data set to simply just trying to find if a match exists in the data set. Now that were feeling ready let’s jump into it.

For Loop

The basic principles of a for loop, is that it will keep repeating itself as long as its conditions evaluate to true. Once its conditions equate to false, that is an indicator to itself that it is now time to execute the next lines of code, after the loop. Let’s take a look at the example below.

I have created a function called forLoop1 which takes in an array as an argument. From there you can see that I have created an empty string to hold our numbers. Then this is where the magic happens, we create our for loop. Our for loops conditions are made up of three parts. First is the initial expression, this is where we will create our index variable as this is executed first. Second, we have our conditional expression, this is where we will determine whether to move forward in the loop or break out. Third and lastly, we have our increment expression, this is where we will increment our index to be able to indeed move onto the next index in line. Once that has completed, we will then have access to what we want to do during our loop.

In this case we will take our string of nums, add on our original value for nums, the number at the current index in our given array, and then finally a new line. The new line is just to make our return look that much better. As stated this will keep looping until our index is bigger then the length of our array. Our last line of code in the function after the for loop is our return, which will return all the numbers in our array. Take a look at our return.

As you can see we have returned all of the numbers in our array. This is also a good example of how many times our for loop ran, 10 times. What if I want to list the current cars in my collection? We can use a for loop for that as well. Take a look at the example below.

Returns

For in Loop

Not vastly different looking from our regular for loop but executes a little differently. While we are not worried about true of false values to keep our loop going, the for in loop iterates over all of our enumerable properties. While this is a great option to loop through an object, we will be using it to loop through our arrays. Let’s take a look at how we can achieve the same goals as before.

Returns

As you can see we have looped through our numbers array and returned our numbers. The main difference is our for loops parameters. As you can see we create a variable for our index, and for each index in our array we will loop until there are no more index’s to loop through. We are also still able to do the exact same thing during each loop iteration. Check out our garage doing the same thing.

Returns

For of Loop

While extremely similar to our for in loop in execution, we are still looping over all of the enumerable properties but instead of our variable holding our index, it is in fact holding the value of that index. Take a look at the code below.

Previously our variable of i was our index, while it still is a representation of the index, it is the value at that index. Instead of having to grab the value from the arrays index like we have previously (arr[i]), we are given the value outright in this case. Take a look at our return.

Again, we have no problem reaching the same solution even though we are looping a different way. And that holds true for our second example as well.

Returns

While Loop

Now that we have covered all of our bases with the different for loops, it is time to get into our while loops which in reality are not that different. They will keep looping as long as its conditions are true and break once they become false. So, what’s really the difference then? Let’s take a look at this example.

Again there are a lot of similarities with our for loop, but yet it is still different. First off you will notice that we have declared our index variable outside of our loop parameters. This is because we only need to have a conditional expression present in our parameters. You may have also notice that the increment for our index is the last item to run in our loop, that fine because by the time our next occurrence has been reached, i will already have incremented. You may have also noticed that we will need to pull out our occurrences from array using our index. Lets take a look at the return.

We again are able to achieve the same goals by using different means. This is what I meant when it really comes down to personal preference as well. We are able to reach the same solutions using four different style of loops. Maybe had to alter some code to get it done, but were none the less able to get it done. Here is are second example in action again.

Returns

Do while Loop

A do while loop is exactly the same as a while loop except for the fact that you are first declaring what you want to do during the loop, then declare your while statement. To me this just looks funny because you can always declare what to do after your loop parameters, without even needing to type do. But again this comes down to personal preference. Take a look at the two examples below.

Returns

As you can see there is not a huge difference between the two, just in how they are written.

Returns

Break from a Loop

I feel that that last thing we should cover is how to break out of a loop. There can be many reasons for breaking out of a loop but mostly would be used when searching for an item through an array. Should that item be found well stop the array since we have already found it. We don’t need to keep going through the array which could potentially add longer runtimes for our code. Lets take a look at the example below.

Returns

As you can see we using a while loop, none the less we have the addition of an if statement. Should the number at the arrays index match our chosen number we will redefine our answer to found and then break our of the loop. We can do this similarly with our second example as well.

Returns

I would like to thank you for reading along and hope that you have learned something new! Keep an eye out for more articles the future!

If you would like to view a copy of these examples to play around with for yourself or just for reference, you can find the link for the GitHub Repo here.