JavaScript Loops

• Introduction
• for
• forEach
• do...while
• while
• for...in
• for...of
• for...in vs for...of

Introduction

JavaScript provides several ways to repeat code or iterate over data.

Use for...of for iterable values such as arrays. Use Object.keys() when you need an object’s own enumerable property names. Use a classic for or while loop when you need direct control over the iteration.

for

const list = ['a', 'b', 'c']
for (let i = 0; i < list.length; i++) {
  console.log(list[i]) //value
  console.log(i) //index
}

• You can interrupt a for loop using break
• You can fast forward to the next iteration of a for loop using continue

forEach

forEach() is an Array method. It calls a function once for each existing array element:

const list = ['a', 'b', 'c']
list.forEach((item, index) => {
  console.log(item) //value
  console.log(index) //index
})

//index is optional
list.forEach(item => console.log(item))

You cannot stop a forEach() early with break. Use for...of when you need to exit the loop.

do…while

const list = ['a', 'b', 'c']
let i = 0
do {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)

You can interrupt a do...while loop using break:

let attempts = 0

do {
  attempts = attempts + 1
  if (attempts === 3) break
} while (attempts < 10)

You can also jump to the next iteration using continue. Make sure the loop condition can still change, or you can create an infinite loop.

while

const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
}

You can interrupt a while loop using break:

while (true) {
  if (something) break
}

and you can jump to the next iteration using continue:

let i = 0

while (i < 5) {
  i = i + 1
  if (i === 3) continue

  console.log(i)
}

The difference is that do...while always runs its body at least once.

for…in

for...in iterates over an object’s enumerable string property names, including inherited ones.

const person = {
  name: 'Flavio',
  country: 'Italy'
}

for (const property in person) {
  if (!Object.hasOwn(person, property)) continue

  console.log(property) //property name
  console.log(person[property]) //property value
}

For own enumerable properties, Object.keys() is often clearer:

for (const property of Object.keys(person)) {
  console.log(property)
  console.log(person[property])
}

Avoid for...in for arrays. It returns string property names and can include non-index properties. See the MDN for...in reference for the enumeration rules.

for…of

ES6 introduced the for...of loop. It visits the values produced by an iterable, and supports break and continue:

//iterate over the value
for (const value of ['a', 'b', 'c']) {
  console.log(value) //value
}

//get the index as well, using `entries()`
for (const [index, value] of ['a', 'b', 'c'].entries()) {
  console.log(index) //index
  console.log(value) //value
}

Notice the use of const. This loop creates a new scope in every iteration, so we can safely use that instead of let.

Arrays, strings, Maps, Sets, and many DOM collections are iterable. Plain objects are not iterable by default.

for…in vs for…of

The difference is:

• for...of iterates values defined by an object’s iterator
• for...in iterates enumerable string property names, including inherited ones

The MDN for...of reference has more examples for custom iterables and early exits.

Related posts about js: