DEV Community

loading...

How To For Loop Through Anything in JS

Jacob Paris
Sales funnels and B2B SaaS for the mortgage industry, almond latte fanatic, LA @eggheadio , formerly ToolStache
・3 min read

There are now four ways to open a for loop in javascript

  • For of
  • For await of
  • For in
  • Classic For

While they differ a bit on speed and the variables they declare implicitly, the actual body of the for loop doesn't change much between the different methods.

The easiest way to loop through an array is with the for…of loop

const fruits = ['apple', 'banana', 'cherry']

for (const fruit of fruits) {
  console.log(fruit)
}

// apple
// banana
// cherry
Enter fullscreen mode Exit fullscreen mode

We're not limited to arrays though, since all iterators work the same in javascript. That means we can just as easily loop through a string

for (const letter of "javascript") {
  console.log(letter)
}

// j
// a
// v
// a
// s
// c
// r
// i
// p
// t
Enter fullscreen mode Exit fullscreen mode

Many emojis are stored as multiple codepoints, and some emojis are created by joining multiple other emojis.

For…of will iterate over them one by return, returning every πŸ‘¨ in a πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦

for (const person of "πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦") {
  console.log(person)
}

// πŸ‘¨
// πŸ‘©
// πŸ‘§
// πŸ‘¦
Enter fullscreen mode Exit fullscreen mode

We can use the return keyword to break out of a function early. In a loop, we can use the continue keyword to break out of the current iteration and start the next iteration immediately.

const sequence = [0, 1, 2, 3, 4, 5]

for (const number of sequence) {
  if (isOdd(number)) continue

  console.log(number)
}

// 0
// 2
// 4
Enter fullscreen mode Exit fullscreen mode

Loops also have the break keyword, which will cancel not only the current iteration but also the rest of the loop

const sequence = [0, 1, 2, 3, 4, 5]

for (const number of sequence) {
  if (number >= 3) break

  console.log(number)
}

// 0
// 1
// 2
Enter fullscreen mode Exit fullscreen mode

At the end of every iteration, the current scope is discarded and a new one is opened, so it's ok to use const or let at the start

for (const item of items)
// or
for (let item of items)
Enter fullscreen mode Exit fullscreen mode

If you try to use await inside a loop, the execution will pause until the promise resolves and then it'll proceed as usual. To allow the loops to proceed concurrently, you can either await the promises before starting the loop or using for await of to do the same thing

for (const x of await Promise.all(arrayOfPromises))
// or
for await (const x of arrayOfPromises)
Enter fullscreen mode Exit fullscreen mode

In javascript, objects are not strictly iterable. If you want to loop through the keys of an object, you can either use for in or convert the keys to an array

const hashMap = {
  abcd: { … },
  abce: { … },
  abcf: { … },
  abcg: { … },
  abch: { … }
}
Enter fullscreen mode Exit fullscreen mode
for (const key of Object.keys(hashMap)) {
  const value = hashMap[key]
}
// or 
for (const key in hashMap) {
  const value = hashMap[key]
}
Enter fullscreen mode Exit fullscreen mode

If the only thing we need the key for is to access the value, we can skip a step and loop through the values directly

for (const value of Object.values(hashMap) { … }
Enter fullscreen mode Exit fullscreen mode

If we need both key and value, my preferred method is to use Object.entries, which returns a [key, value] pair, and destructure them right in the head the loop

for (const [key, value] of Object.entries(hashMap)) { … }
Enter fullscreen mode Exit fullscreen mode

Since arrays are just objects with numeric keys, we can use that same syntax to get the index of our array elements inside our loop

for (const [i, element] of Object.entries(array)) { … }
Enter fullscreen mode Exit fullscreen mode

To run a loop a specific number of times, we can create an array with that many elements and then loop through it.

Iterators skip over empty array slots, so we need to fill it with at least undefined first, and then optionally map its index

const array = Array(25).fill() // [ empty, empty, empty, …]
// or
const array = Array(25).fill().map((_, i) => i) // [ 0, 1, 2, … ]

for (const i of array) { … }
Enter fullscreen mode Exit fullscreen mode

The other option is to use the classic for loop syntax. This gives you the most control at the cost of readability.

for (let i; i < 25; i++) { … }
Enter fullscreen mode Exit fullscreen mode

Discussion (7)

Collapse
fleshmecha profile image
〄

I really hoped this was going to tell me how to write the fastest for loop! Which one is quickest?

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited

jsperf.com/loop-vs-map-vs-foreach/22

So, map and classical for loop. But it is usually more semantically to use forEach rather than map, albeit slow.

for loop isn't so bad, but it depends on the use case.

Collapse
leob profile image
leob

Why is it more semantical to write "arr.forEach(...)" instead of "for (... of arr)" ? Seems merely a matter of syntax and taste to me ...

Thread Thread
jacobmparis profile image
Jacob Paris Author

I would absolutely consider this to be a matter of taste

Thread Thread
patarapolw profile image
Pacharapol Withayasakpunt

I meant arr.forEach() vs arr.map().

for of and for in are another species, and is whether you want it to be functional or procedural. Neither is better than the others.

Collapse
jacobmparis profile image
Jacob Paris Author

That depends what you're measuring

Most of the time a for loop takes up is spent doing logic on each iteration. The amount of time it takes to switch from the end of one iteration to another (which is the only way these differ) is microscopic in comparison.

Unless you're doing many thousands of iterations, performance is the wrong heuristic to help you decide

Collapse
leob profile image
leob

Great article, thorough and informative, the kind of content that seems to become increasingly rare on dev.to ...