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
For a straightforward pass over an array’s values, use for...of. Use an indexed for loop when you need each position, and choose array methods such as map or filter when you want a transformed or selected result.
Loop through array values with for...of
for...of visits each value in an array, in order. TypeScript infers the loop variable from the array’s element type in ordinary typed code.
const names: string[] = ["Ada", "Grace", "Linus"];
for (const name of names) {
console.log(name);
}Use this form when you do not need the numeric position. It also supports normal loop control: use break to stop early or continue to skip to the next value.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesArrays are iterable. The TypeScript handbook explains that an object is iterable when it implements Symbol.iterator, and describes for...of as returning values. See the TypeScript handbook’s iterators and generators guide.
#1 Best Overall
Use an indexed loop when the position matters
If you need the index—for example, to display a numbered list or update a particular array slot—use a traditional for loop.
for (let i = 0; i < names.length; i++) {
console.log(i, names[i]);
}With the noUncheckedIndexedAccess compiler option enabled, an expression such as names[i] can have a type that includes undefined, even in a loop whose condition checks that the index is below names.length. TypeScript 4.1’s release notes explain this behavior and recommend for...of or forEach when the index is not needed: TypeScript 4.1 release notes.
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
Choose an array method for a callback or a new result
Use a callback method when the operation is naturally expressed as a function applied to array elements. These methods differ from a loop that simply visits values: map and filter return new arrays, while forEach is for performing an action for each value.
| Need | Use | What it does |
|---|---|---|
| Handle each value without needing a returned array | forEach |
Calls a callback for each element. It does not offer the straightforward break or continue control of a loop statement. |
| Produce a corresponding value for each element | map |
Returns a new array containing the callback’s results. |
| Keep only elements that meet a condition | filter |
Returns a new array containing the elements that pass the callback’s test. |
names.forEach(name => {
console.log(name);
});
const lengths = names.map(name => name.length);
const longNames = names.filter(name => name.length > 4);In TypeScript 5.5, qualifying filter callbacks can use inferred type predicates to narrow the element type of the resulting array. This is useful when filtering out values such as undefined; the behavior and examples are in the TypeScript 5.5 release notes.
Why for...in is not the usual array-value loop
for...in enumerates property keys. For an array, those keys are typically strings such as "0", "1", and "2"; it does not yield the element values as for...of does. Use for...of for values and an indexed loop when you need positions. The TypeScript handbook covers this distinction in its iterators and generators guide.
Check iterable support for older targets
for...of uses the iterable protocol, which depends on Symbol.iterator. For an ES5-compliant target, the TypeScript handbook says iterators are allowed only on array values unless downlevelIteration is enabled. This matters especially when targeting older environments or looping over an iterable that is not an array.
The downlevelIteration compiler option changes how TypeScript emits iteration for older targets. Its helper checks for a native or polyfilled Symbol.iterator and has fallback behavior if one is unavailable. Consult the TypeScript downlevelIteration reference, and verify that the runtime supports the iterable behavior your code needs.
For a normal array and a common modern target, for...of is a clear default. When compiling for an older target, check your target, downlevelIteration setting, and runtime support rather than assuming all iterable inputs behave identically.
Quick Recap
Best Value
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.
