Navigate back to the homepage

5 ways to loop through an array with JavaScript

Kyrell Dixon
January 23rd, 2020 · 4 min read

Here are 5 ways to iterate through array values with examples and a quick explanation of how each one works.

1. The for loop

1const numbers = [1, 2, 3, 4, 5]
2for (let i = 0; i < numbers.length; i++) {
3 console.log(numbers[i]) // prints 1 2 3 4 5
4}

The 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

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 used.

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.

1const numbers = [1, 2, 3, 4, 5]
2for (let i = 0, food = ['burgers', 'fries', 'shake'], name = 'Kai'; i < numbers.length; i++) {
3 console.log(numbers[i]) // prints 1 2 3 4 5
4}

With no values, you still have to include the semicolon for that section so that JavaScript can tell the difference between each part.

1const numbers = [1, 2, 3, 4, 5]
2let i = 0;
3for (; i < numbers.length; i++) {
4 console.log(numbers[i]) // prints 1 2 3 4 5
5}

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

The condition is a statement that evaluates to true or false. While the value is true, the loop will run infinitely or until it crashes. It stops when the statement evaluates to false.

Here’s an example of a loop that will run until it sees a certain number in the array.

1const numbers = [1, 2, 3, 4, 5]
2for (let i = 0; numbers[i] !== 3; i++) {
3 console.log(numbers[i]) // prints 1 2
4}

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 false. 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.

1const numbers = [1, 2, 4, 5]
2for (let i = 0; numbers[i] !== 3 && numbers[i] !== undefined; i++) {
3 console.log(numbers[i]) // prints 1 2 4 5
4}

The condition can be interpreted as “loop while the value in the array is not 3 and not undefined”. When the array reaches numbers[4], the value will be undefined since the last element, 5 is at numbers[3].

The Incrementer

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++ or ++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.

1const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
2for (let i = 0; i < numbers.length; i = i * 2 + 1) {
3 console.log(numbers[i]) // prints 1 2 4 8
4}

This 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 loop.

1// Iterating backwards
2const backwardsWords = ['backwards.', 'sentence', 'this', 'wrote', 'I']
3for (let i = backwardsWords.length - 1; i >= 0; i--) {
4 console.log(backwardsWords[i]) // prints I wrote this sentence backwards.
5}

2. The for in loop

1const numbers = [1, 2, 3, 4, 5]
2for (let i in numbers) {
3 console.log(numbers[i]) // prints 1 2 3 4 5
4}

The 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.

3. The while loop

1const numbers = [1, 2, 3, 4, 5]
2let i = 0
3while (i < numbers.length) {
4 console.log(numbers[i]) // prints 1 2 3 4 5
5 i++
6}

The 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 for loop.

Here’s another example of looping backward and forwards through an array with a while loop.

1const palindrome = [
2 "is", "it", "crazy", "how", "saying", "sentences", "backwards",
3 "creates",
4 "backwards", "sentences", "saying", "how", "crazy", "it", "is"
5]
6
7let readForwards = false
8let readBackwards = false
9let i = 0
10while (!(readForwards && readBackwards)) {
11 const word = sameBackwardAndForward[i]
12 console.log(word)
13 // has i gotten to the end of the array
14 if (i === palindrome.length - 1) {
15 readForwards = true
16 }
17 // has i gotten to the end of the array
18 // and back to the beginning
19 if (readForwards && i === 0) {
20 readBackwards = true
21 }
22 // if it hasn't reached the end, push it closer
23 // to the end by incrementing
24 if (!readForwards) {
25 i++
26 }
27 // if i has gotten to the end and it's not
28 // back at the beginning, keep pushing it backwards
29 if (readForwards && !readBackwards) {
30 i--
31 }
32}

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.

1const numbers = [1, 2, 3, 4, 5]
2let i = 0
3while (i < numbers.length) {
4 console.log(numbers[i]) // prints 1 2 3 4 5
5 i++
6}
7
8let j = 0
9for (;j < numbers.length;) {
10 console.log(numbers[j]) // prints 1 2 3 4 5
11 j++
12}

4. The forEach loop

1const numbers = [1, 2, 3, 4, 5]
2numbers.forEach(num => console.log(num))

The 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.

1const numbers = [1, 2, 3, 4, 5]
2numbers.forEach((num, i, arr) => {
3 if (i === 0) {
4 console.log(arr)
5 }
6 console.log(`numbers[${i}] = ${num}`)
7})

A 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 forEach loop.

1const squareAndLog = (num, i) => {
2 const squared = num * num
3 console.log(`arr[${i}] = ${num} * ${num} = ${squared}`)
4}
5
6const numbers = [1, 2, 3, 4, 5]
7numbers.forEach(squareAndLog)

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 map, filter, and reduce.

5. The for of loop

1const numbers = [1, 2, 3, 4, 5]
2for (let num of numbers) {
3 console.log(num)
4}

The 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!

Bonus: Recursion

1function loop(arr, i) {
2 if (arr.length === i) {
3 return;
4 }
5 console.log(arr[i])
6 loop(arr, ++i)
7}
8const numbers = [1, 2, 3, 4, 5]
9loop(numbers, 0) // prints 1 2 3 4 5

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.

1function loopBackwards(arr, i) {
2 // stop iterating when i
3 // has gotten below the first index
4 if (i < 0) {
5 return;
6 }
7 console.log(arr[i] * 2)
8 // keep decreasing the value of i
9 // to approach -1 each iteration
10 loopBackwards(arr, i - 2)
11}
12const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
13// start the loop from the last index
14// of the array
15loopBackwards(numbers, numbers.length - 1) // prints 20 16 12 8 4

That’s all it takes to loop through an array!

Wrapping up

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!

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Kyrell Dixon

Git Life Hacks—The Hidden Features of Git You Never Knew Existed

Here's a series of Git features that have the potential to completely change your workflow for the better.

January 10th, 2019 · 3 min read

Creating a Next.js app from a Dribbble design

How I built a destination planner web app based on a Lonely Planet Dribbble design

March 21st, 2020 · 2 min read
© 2019–2020 Kyrell Dixon
Link to $https://twitter.com/kyrelldixonLink to $https://github.com/kyrelldixonLink to $https://instagram.com/kyrell.dixonLink to $https://www.linkedin.com/in/kyrell-dixon/