Here are 5 ways to iterate through array values with examples and a quick explanation of how each one works.
for loop is typically the first way most college developers learn how to loop through data.
It has 3 main parts, each separated by a semicolon. Each part is completely optional, but usually takes on one of 3 roles:
- The initializer
- The condition
- The incrementer
The initializer is run the first time the loop starts. In the example above,
i is initialized to
0 so that the loop will access
all the array values starting from the first. Most developers use
i in loops to reference the index of an array, but any value can be
In the initializer section, you can initialize as many values as you like including no values at all. Below is an example of some completely unnecessary values being initialized. You can probably tell I was hungry when I wrote this.
Although you will probably never see it written this way, the code above is still completely valid. With or without the initializer, the loop can still run as long as there is a condition.
The condition is a statement that evaluates to
false. While the value is
true, the loop will run infinitely or until
it crashes. It stops when the statement evaluates to
Here's an example of a loop that will run until it sees a certain number in the array.
The condition section is the one you have to be the most careful with since you have to make sure that at some point it will be
In the above example, if you remove
3 from the array, it will run infinitely.
One way you could fix it is by having a second condition that checks if there are any values left.
The condition can be interpreted as "loop while the value in the array is not 3 and not undefined".
When the array reaches
numbers, the value will be undefined since the last element,
5 is at
The incrementer is last section in a
for loop and it is run after each iteration. This statement is what updates the initial value so the loop can make progress
through the array.
It is usually set to
++i to increment
i by one, but it can be modified in any way.
Here is an example of doubling
i and adding 1 each loop iteration.
for loop is very flexible and gives you the most power over how you iterate over an array. Here are a few more examples of different
ways to iterate through an array with a
for in loop
for in loop is a great way to loop through array values without worrying about the condition or incrementer.
This loop automatically extracts out each index of the array which can then be used to log a value.
The loop is much less flexible for array values, but it's also much more simple to use.
while loop is the go-to loop when you want to run code based on just a condition and don't necessarily care about iteration.
Much like the
for loop, it watches for a condition to become
false before it stops. The main difference is that since it only
cares about a condition, it is typically used more flexibly than a normal
Here's another example of looping backward and forwards through an array with a
The above example is a bit more complex, but this just goes to show how powerful a while loop can be.
One other note is that a
for loop can actually be made to function as a
while loop if you remove the initializer and incrementer.
This next example will show a
while loop and its
for loop equivalent.
forEach loop is a high-order function (a function that takes a function as a parameter) that handles looping.
The function that you pass a
forEach loop is passed 3 parameters:
- the current value in the array
- the current index of the array
- the array itself
Here's an example that more clearly shows what's going on.
forEach loop is a great way to apply some function to each value in an array without having to worry about modifying
the original values. Here's an example of squaring and logging each number in an array by passing a function to a
There are several other types of high-order functions that arrays have access to as well,
so if you understand the
forEach loop then you have a good foundation for working with some of the other
common functions like
for of loop
for of loop is much like the
forEach in the way it extracts out a single value from an array on each iteration.
If all you need is a quick way to pull out an array value, this is the loop to go to!
Okay, so I said there would only be 5 ways to loop, but I have to include recursion. Recursion is a looping technique where
a function calls itself. While recursion doesn't use any specific looping function like the
for loop variations or the
while loop, it still
allows you to iterate over an array.
Recursive functions are most similar to a
while loop since they will continue to call themselves until they reach
some condition that causes them to stop. In this example, the function will
return or stop calling itself when
arr.length === i.
Since each time the function is called
i goes up by one, the function will step through and print each array value
just like all the other loops!
Recursion is a great topic to bring up with interviews, so I'll leave you with another example to help clarify how recursion works. In the next example, shows how to loop through an array backward and print every other value multiplied by 2.
That's all it takes to loop through an array!
So with all these examples, which for loop should you use? And the answer is: it depends. Each loop is better or worse for certain contexts, so try out each one and see what fits your use case!