Platform under construction

Control Flow

Intermediate

for in & for of

for...of loops over values from an iterable. for...in loops over enumerable property names. They look similar, but they are not the same tool.

const tools = ["HTML", "CSS", "JavaScript"];

for (const tool of tools) {
  console.log(tool);
}

const settings = { theme: "dark", density: "compact" };

for (const key in settings) {
  console.log(key, settings[key]);
}

Control Flow

Use for...of for values and for...in for object keys.

for...of works with iterable values such as arrays, strings, maps, sets and many DOM collections. It gives you each value directly.

for...in works with enumerable property keys on an object. It gives you keys, not values. It can also include inherited enumerable properties, so object ownership checks can matter.

For arrays, prefer for...of, array methods or a classic for loop. for...in on arrays loops over keys as strings and can behave unexpectedly with custom properties.

for...of

Reads values from iterables such as arrays, strings, sets and maps.

for...in

Reads enumerable property keys from objects.

Object.hasOwn()

Checks that a property belongs directly to the object.

entries()

Pairs keys and values for arrays, maps and objects when used with the right helper.

Examples

Control flow should make the program path easy to follow.

Pick the loop that matches the data shape

for (const item of items) {
  console.log(item.title);
}

for (const key in settings) {
  if (Object.hasOwn(settings, key)) {
    console.log(key, settings[key]);
  }
}

for...in used as an array value loop

const items = ["alpha", "beta"];

for (const item in items) {
  console.log(item); // "0", then "1"
}

// The variable is the key, not the value.

Rules that matter

Make branches, loops and exits deliberate.

Control flow decides which path code takes. Keep that path visible: name conditions, protect loop boundaries, avoid accidental fallthrough and use early exits only when they make the main path clearer.

Use for...of for arrays

It gives you each value directly.

Use for...in for object keys

It is about property names, not array values.

Check own properties when needed

Object.hasOwn protects against inherited enumerable properties.

Use Object.entries for key-value pairs

It is often clearer than for...in plus bracket access.

Remember strings are iterable

for...of can loop over characters.

Avoid mutating while iterating

Changing the collection during iteration can produce confusing results.

Production thinking

Reliable branching is reliable behavior.

Why does this matter?

Choosing the wrong loop changes what your variable contains. That creates bugs that look small but spread quickly through rendering and data processing.

Accessibility

Loops often generate lists and controls. Correct iteration keeps labels and item order predictable.

Production note

Production code should make data shape obvious. Arrays, maps, sets and plain objects deserve different iteration patterns.

SEO note

Wrong iteration can output indexes instead of meaningful text or links, which hurts both users and crawlers.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Replace for...of with for...in for the array and inspect the output.
Use Object.entries(settings) instead of for...in.
Add a Set and loop over it with for...of.

Practice assignment

Do this before moving to the next topic.

Write a for...of loop for an array.
Write a for...in loop for a plain object.
Use Object.hasOwn inside a for...in loop.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand for in & for of.