Everything You Need to Know About Looping in JavaScript

Looping is one of the first things you learn as a programmer. It's not just "for" and "while" loops. You've got more options for looping than you'll probably want to know about.

Let's take a look.

FOR

The classic. Old faithful. If you're already familiar, feel free to skip ahead.

The basic for-loop's structure is simple. Repeat a certain amount of code until a condition is met. For a for-loop, that condition is having to run a specific number of times (unless the code itself is designed to exit the loop prematurely).

There are three statements you pass in to a for-loop: the starting point, the end point (exit condition), and the rate at which the loop is going from the start to the end point.

First statement

In 99% of cases, the starting point will look like i = 0. Why i? That's just what everyone uses. It's like coding slang. Not a requirement, but it's familiar. It's supposed to stand for "integer" since that's what you're incrementing.

Why 0? Because arrays are zero-indexed in JavaScript, which means the first value in the array is found at position 0, not 1.

Second statement

The second statement, i < arr.length means the loop will continue until the value of i is greater than the length of arr which is the array which was declared before the loop.

The statement is checked before the loop runs. If i is greater, the code block won't run and your loop closes.

Third statement

The third part, i++ is shorthand for i += 1 which is shorthand itself for i = i + 1. All it means is you're iterating i by 1. So before the first loop, i is equal to 0. Before the second loop, it's equal to 1.

The third statement runs after your code block has executed.

Put it all together, and our example shows us the for-loop will loop 5 times before moving on.

FOR…IN

In plain English, this form of looping lets you loop through an object.

To be more precise, I'll borrow the definition from Mozilla's web docs: "The for…in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols)."

FOR…OF

This syntax looks the same as for…in except it works for arrays and strings.

WHILE

A while-loop is one that re-executes a code block over and over until the exit criteria is met. It's like a for-loop, except only the third statement.

Let's say you're trying to create a program to gamble on blackjack. As long as the cash you have is above zero, you want to run the playHand() function.

DO…WHILE

Similar to a while loop, except you're guaranteeing the function will run at least once. Instead of the exit criteria being checked before the loop is entered, like on a normal while loop, it's checked at the end.

FOREACH()

The method forEach() is applied to arrays. It loops through the array as expected and executes a block of code during each iteration.

MAP()

Another method, map() (not to be confused with Map object), looks and works a lot like forEach() except you're actually making an entirely new array.

BONUS: FILTER()

While it can be used to iterate through an array, filter() is kind of in the gray zone. Here, you're not looping in order to do something to each of the values, nor are you performing an action based on how many times you loop.

Instead, filter() is returning a subset of the array you're passing in based on criteria. Hence the name "filter."

LAST WORD

Of course, there are many more clever tricks you can use to iterate, manipulate, and search through arrays (e.g. reduce(), values(), Object.keys(), find()) but they all require a bit more complexity than you typically need.

The loops and methods here are your fundamentals, and will likely make up 99% of all the looping you'll do.