iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use a for...of loop to process each value provided by an iterable, such as an array, string, map, set, or typed array. The loop variable is usually inferred from the iterable’s element type:
const values = [1, 2, 3];
for (const value of values) {
console.log(value);
}How do I use a for…of loop in TypeScript?
The basic form places the iterable after of and runs the block once for each value it produces:
const names = ["Ada", "Grace"];
for (const name of names) {
console.log(name);
}TypeScript infers name from the array’s element type. Use const when you do not reassign the loop variable; let is also valid if you need to reassign its binding inside the loop body.
What can a for…of loop iterate?
for...of works with iterable values, not arbitrary objects. An object is iterable when it implements Symbol.iterator, which returns an iterator. TypeScript’s built-in iterable examples include arrays, maps, sets, strings, and typed arrays. See the TypeScript handbook on iterators and generators.
#1 Best Overall
For example, you can write a function that accepts any iterable of a particular type rather than only an array:
function toArray<X>(xs: Iterable<X>): X[] {
return [...xs];
}The Iterable<X> type expresses that the input can supply values of type X through the iterable protocol.
Rank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
What is the difference between for…of and for…in?
for...of yields values. for...in yields property names, which for an array are typically index strings:
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteconst list = [4, 5, 6];
for (const index in list) {
console.log(index); // "0", "1", "2"
}
for (const value of list) {
console.log(value); // 4, 5, 6
}Choose for...of when the code needs array elements or other iterable values. Use for...in when property names are what you need; it can enumerate object properties generally, whereas for...of requires an iterable.
Why does for…of give me an error with my TypeScript target?
Compiler target influences how TypeScript emits iteration code and which iteration behavior it supports. The handbook documents a distinction for older configurations: with an ES5 target, iterator-based iteration is allowed only for values of type Array, even if another object implements Symbol.iterator. With an ES2015-or-higher target, TypeScript emits for...of to use the runtime’s built-in iterator implementation.
Check both your TypeScript version and deployment runtime before changing compiler settings. TypeScript 6.0 deprecates target: "es5" and the downlevelIteration option. Its release notes recommend using an external compiler or post-processing when ES5 output is still required. See the TypeScript 6.0 release notes.
What does downlevelIteration do?
Historically, downlevelIteration was an option for more accurately emulating ES6 iteration features in ES5-targeted output. When Symbol.iterator exists, the emitted helper can use it; without it, fallback behavior applies. The option does not install Symbol.iterator or provide a runtime polyfill. The TypeScript reference for downlevelIteration describes its behavior; for TypeScript 6.0, note that the option is deprecated.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Best Value
Common for…of mistakes
- Using
for...infor array values: it gives you property names such as"0", not the element values. - Looping over a non-iterable object: an object must implement
Symbol.iteratorforfor...ofto work. - Expecting
downlevelIterationto add runtime support: it cannot supply a missing iterator implementation. - Applying older ES5 advice without checking the compiler version: TypeScript 6.0 deprecates both the ES5 target and
downlevelIteration.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
