JavaScript for...of and for...in
for and while walk with a counter you manage. Often the data is already a list or an object — you want each value, or each key, not a homemade index. for...of hands you the next value from an iterable. for...in hands you the next key on an object. Same family of “repeat work”; different thing in the loop variable.
What does for...of do?
for...of runs its block once per value in an iterable. Arrays and strings are the everyday beginner cases. You write for (const item of list) — each round, item is the next value. You do not write i < list.length unless you still want an index loop.
for...of, for...in, and classic loops
📊 Everyday walk shapes
| Shape | What the loop variable holds | Everyday fit |
|---|---|---|
for...of |
a value from an iterable | each fruit in an array; each char in a string |
for...in |
a key (property name) on an object | each field name on a plain object |
classic for |
an index you control | when you need the number 0, 1, 2… |
while |
whatever you update in the body | keep going while a rule holds |
Start with arrays for for...of. Reach for for...in when the story is “every property name on this object.” Keep classic for when the index itself matters.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
Walk values in an array
Each round prints one string: red, then green, then blue. The loop variable is the value itself — not 0, 1, 2. If you only need the items, for...of stays shorter than managing an index.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
Walk characters in a string
Strings are iterable too. This prints h, then i. Treat each character as one value — useful for simple letter-by-letter work before you learn heavier string APIs.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
Walk keys with for...in
Here key becomes "name", then "role". You read the value with user[key]. Prefer for...in for plain objects’ own enumerable keys. Do not use it as your first tool to read array values — that is what for...of is for.
Remember the short rule: of → values, in → keys. Mixing them is the classic beginner mix-up.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
Build a message from values
Each round appends a letter and a dash. After the loop, slice drops the trailing dash, so you see A-B-C. Same join idea as earlier loop lessons — now the walk uses values directly.
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
When an index loop still helps
The classic for prints both index and value. The for...of prints only values. Need the position number? Keep an indexed for (or other index tools later). Need only the items? Prefer for...of.
Show for...of on the page
Walk an array with for...of, build a short line, write it into the page.
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
The page shows list=tea milk honey. Change one array entry, refresh, and read the new line. Use for...of for values, for...in for object keys, and classic for when the index matters. Next lesson covers break and continue to steer loops mid-flight.
Try it yourself
- Use
for...ofto log each value in["a", "b", "c"]. - Use
for...ofto log each character of"ok". - Use
for...inon{ x: 1, y: 2 }and logkey=value. - Join
["1", "2", "3"]into1-2-3withfor...of. - Write one classic indexed
forthat prints index and value side by side. - In the HTML demo, change only the array, refresh, and read
list=.
Common mistakes
- Writing
for...inwhen you meant values from an array (for...of) - Writing
for...ofon a plain object (objects are not iterable that way for beginners) - Expecting
for...ofto give you0,1,2— it gives values, not indexes - Forgetting
user[key]afterfor...inand logging only keys when you needed values too - Using a long index loop when a clear
for...ofwould read cleaner
Summary
for...ofwalks values of iterables (arrays, strings)for...inwalks keys on objects- Classic
forstill fits when you need the index number whilestill fits a single ongoing condition- Build messages by appending values in the loop body
- Next: break and continue — stop or skip a round
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top