JavaScript For

Three slots in one line

A classic for loop has three parts separated by semicolons: start, test, step. The start runs once. Then JavaScript checks the test, runs the body, runs the step, and checks again, until the test is false.

Use this form when you know how many passes you want, or when you need the index as well as the value.

Count with a classic for

let i = 0 starts the counter. i < 5 is the test. i = i + 1 is the step. The values printed are 0, 1, 2, 3, 4 — five times, not six.

const lines = [];

for (let i = 0; i < 5; i = i + 1) {
  console.log(i);
  lines.push(String(i));
}

document.body.textContent = lines.join(", ");

i++ means the same as i = i + 1 here. The let in the start slot is scoped to the loop. After the closing brace, i is gone.

Walk an array by index

The test is usually i < list.length. Then list[i] is the current item. This is the form you want when the index itself matters — pairing two lists, writing “item 3 of 10”, or splicing while you walk (carefully).

const colors = ["red", "green", "blue"];
const lines = [];

for (let i = 0; i < colors.length; i = i + 1) {
  const row = i + ": " + colors[i];
  console.log(row);
  lines.push(row);
}

document.body.textContent = lines.join(" | ");

for...of walks values

for (const item of list) gives you each value, in order, with no index. That is the loop you want when you only care about the item. It works on arrays and on other iterables such as strings.

const colors = ["red", "green", "blue"];
const lines = [];

for (const color of colors) {
  console.log(color);
  lines.push(color);
}

document.body.textContent = lines.join(", ");

for...in walks keys

for (const key in object) visits enumerable property names. On an array those names are the index strings "0", "1", … plus any extra properties someone hung on the array. That is why this tutorial does not use for...in to walk arrays.

const person = { name: "Ada", role: "engineer" };
const lines = [];

for (const key in person) {
  const row = key + "=" + person[key];
  console.log(row);
  lines.push(row);
}

document.body.textContent = lines.join(", ");

Which loop to write

What to remember

• Classic for: start, test, step. Counting from 0 is the usual habit.
• for...of is the straightforward array walk.
• for...in is for object keys, not for arrays.
• The test must become false. A missing step is an infinite loop.

Next: while and do...while — repeat while a test stays true.