The For Of Loop in JavaScript: A Definitive Practical Guide
Master the for...of loop in JavaScript, how it iterates over any iterable, when to use it, and practical examples across arrays, strings, maps, and sets.
For of in javascript refers to the for...of loop, a looping construct that iterates over iterable objects using the syntax for (const item of iterable) { ... }.
What the for of loop is in JavaScript
According to JavaScripting, the for of loop in JavaScript is a modern looping construct designed to iterate over any iterable. It yields values from the iterable in sequence, rather than indices or keys. In practice, you write:
for (const item of iterable) {
// use item
}This syntax is concise and expressive, making code easier to read compared with classic for loops when you only need the values. The loop relies on the iterable protocol, which means the object must provide a Symbol.iterator method. Arrays, strings, maps, sets, and many user defined objects implement this protocol, enabling seamless iteration with for of. When the loop finishes, no extra value is returned, and control passes to the next statement after the block.
Be mindful that for of yields values, not indices. If you need the index, you can use a separate counter or combine with array.entries().
Syntax and basic usage
The core idea is straightforward: iterate over an iterable and access each value directly. The syntax is:
for (const value of iterable) {
// operate on value
}The loop variable value takes each element from the iterable in order. You can use let or const for the loop variable, depending on whether you plan to rebind the element inside the loop. For arrays, value will be the items; for strings, individual characters; for maps, value is the [key, value] pair when you iterate over map entries or you call map.keys() or map.values() explicitly. When you reach the end of the iterable, the loop exits automatically. The break and continue statements work as expected inside for of loops.
Iterables and the iteration protocol
A key concept behind for of is the iteration protocol. An object is iterable if it has a Symbol.iterator method that returns an iterator. The iterator has a next() method that returns { value, done }. The for of loop uses this protocol behind the scenes. Most built in data structures in JavaScript are iterable by default, including arrays, strings, maps, and sets. You can also create your own iterables by implementing Symbol.iterator. Note that iterables can be infinite; in that case, you should ensure your loop includes a terminating condition or a break. If you use a generator function, you can yield values and consume them with for of. For asynchronous code, there is a related construct called for await...of for asynchronous iterables.
Using for of on arrays and strings
When you apply for of to an array, value corresponds to each element. This makes array processing straightforward:
const nums = [1, 2, 3];
for (const n of nums) console.log(n);Similarly, iterating over a string yields each character:
for (const ch of 'hello') {
console.log(ch);
}These patterns avoid dealing with indices and can simplify code that transforms or filters items. However, for performance sensitive loops, you might still prefer a traditional for loop if you need index-based access or mutation. The for of structure is generally favored for readability and correctness when you only need the element values.
Iterating maps and sets
Maps and sets have unique iteration shapes. For maps, you typically iterate over entries to get [key, value] pairs:
const m = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of m) {
console.log(key, value);
}For sets, you usually iterate over values directly:
const s = new Set([1, 2, 3]);
for (const val of s) {
console.log(val);
}If you need only keys or values, you can iterate over map.keys() or map.values(). Remember that maps and sets preserve insertion order, which means your loop order reflects the order in which items were added.
Differences from for ... in and classic for loops
The for of loop is not the same as for...in. for...in iterates over enumerable property keys of objects, which is not what you want for arrays or maps. For arrays, for...in yields indices as strings, which can be surprising. The classic for loop (for (let i = 0; i < arr.length; i++) { ... }) gives you explicit index control, which is useful when you need the index or when mutating the array during iteration. In most ordinary value-centric tasks, for of is preferable for its clarity and safety.
When to choose for of
Choose for of when you want to read values directly from any iterable without worrying about indices. It shines for transform pipelines, filtering, and simple aggregations. For asynchronous streams, consider for await...of with AsyncIterable. If you need index positions or to mutate the array mid iteration, a traditional for loop may be a better fit.
Common pitfalls and best practices
- Do not modify an array's length inside a for of loop; this can lead to skipped elements.
- If you need the index, use entries() or a separate counter.
- Avoid using for of on non-iterable objects; ensure the object is iterable.
- When working with asynchronous code, prefer for await...of with an AsyncIterable or convert to an array with await inside Promise.all for batched work.
Following these guidelines keeps code readable and maintainable.
Practical example: processing a data array
Let's walk through a real world scenario: taking an array of user objects and producing a summary report. We'll use for of to extract and transform data.
const users = [
{ id: 1, name: 'Ava', active: true },
{ id: 2, name: 'Ben', active: false },
{ id: 3, name: 'Kai', active: true }
];
let activeCount = 0;
let names = [];
for (const user of users) {
if (user.active) {
activeCount++;
names.push(user.name);
}
}
console.log('Active users:', activeCount);
console.log('Names:', names.join(', '));This example demonstrates how for of makes it easy to access each object in an array, perform checks, and accumulate results. You can adapt the pattern to map data, compute aggregates, or feed values into downstream processes. When writing practical code, remember to keep loops simple, readable, and focused on the primary task at hand.
Questions & Answers
What is the difference between for...of and for...in in JavaScript?
for...of iterates over the values produced by an iterable, such as items in an array or characters in a string. for...in iterates over the enumerable property keys of an object. For arrays and other iterables, use for...of to get values, not indices.
for...of gives you the actual values from an iterable, while for...in lists property keys. Use for...of when you need elements.
Can I break or continue inside a for...of loop?
Yes. The break and continue statements work inside for...of just like any other loop, allowing you to exit early or skip to the next iteration.
Yes, you can use break or continue inside a for...of loop.
Is for...of supported in all environments?
For modern browsers and Node.js environments, for...of is widely supported. In very old browsers you may need a transpiler like Babel to convert the code.
Most modern environments support for...of; older ones may require transpilation.
How do I iterate over a Map or Set with for...of?
Maps yield [key, value] pairs when you iterate over the map itself, while Sets yield the values. You can destructure in the loop as needed.
Iterate maps to get key and value, sets yield values directly.
What should I use to iterate asynchronously?
For asynchronous data, use for await...of when you are dealing with AsyncIterable sources. For non asynchronous data, stick with for...of.
Use for await...of for asynchronous iterables.
What to Remember
- Master the for...of loop to iterate values directly
- Use with arrays, strings, maps, and sets
- Know when to use for...in or traditional for loops instead
- For asynchronous data, use for await...of
- Understand the iteration protocol beneath the hood