TypeScript for Loop, forEach, for...of and for...in

TypeScript has the same loops as JavaScript: for, for...of, for...in, while, do...while, and the array method forEach. What TypeScript adds is the types: the loop variable of a for...of has the element type, and a for...in key is always a string.

const scores: number[] = [90, 72, 85];

// Classic for loop: i is number
for (let i = 0; i < scores.length; i++) {
    console.log(`#${i + 1}: ${scores[i]}`);
}

// for...of: score is number
for (const score of scores) {
    console.log(score >= 80 ? "pass" : "fail");
}

// forEach: callback gets (value, index, array)
scores.forEach((score, index) => console.log(index, score));

For most array loops, for...of is the one to reach for: it reads cleanly, supports break, continue and await, and needs no annotations.

The Classic for Loop

for (init; condition; update) is the loop for counting, stepping by more than one, or walking backwards. TypeScript infers the counter from its initial value.

// Every second index
for (let i = 0; i < 10; i += 2) {
    step(i);
}

// Backwards over an array
const letters = ["a", "b", "c"];
for (let i = letters.length - 1; i >= 0; i--) {
    console.log(letters[i]);
}

function step(n: number) {
    console.log("step", n);
}

Declare the counter with let, not var. With let, each iteration gets its own binding, so a callback created in the loop sees that iteration's value.

for...of: Values of Arrays, Strings and Maps

for...of works on anything iterable, and the loop variable gets the matching type. To get the index as well, loop over array.entries(), which yields [index, value] tuples.

type Task = { title: string; done: boolean };
const tasks: Task[] = [
    { title: "write docs", done: true },
    { title: "fix bug", done: false },
];

for (const task of tasks) {              // task: Task
    console.log(task.title, task.done ? "done" : "todo");
}

for (const [i, task] of tasks.entries()) { // i: number, task: Task
    console.log(i, task.title);
}

for (const ch of "hey") console.log(ch);   // ch: string

const ages = new Map([["ada", 36], ["alan", 41]]);
for (const [name, age] of ages) {          // name: string, age: number
    console.log(`${name} is ${age}`);
}

break leaves the loop and continue skips to the next item, exactly as in a for loop. The runtime details (iterables, generators) are on the JavaScript for...of and for...in page.

forEach: No break, No await

forEach calls a function for each element and returns undefined. The callback's parameters are typed from the array, so no annotations are needed. Two things it cannot do:

• Stop early. break inside the callback is compile error TS1107, Jump target cannot cross function boundary. A return only ends the current call, so it acts like continue.
• Wait for async work. forEach ignores the promise an async callback returns.

const nums = [1, 2, 3, 4, 5];

// return skips, it does not stop
nums.forEach((n) => {
    if (n % 2 === 0) return;
    console.log("odd", n);
});

// To stop early, use for...of with break, or some/find
for (const n of nums) {
    if (n > 2) break;
    console.log("small", n);
}
const firstBig = nums.find((n) => n > 3); // number | undefined
console.log(firstBig); // 4

The async pitfall is easy to miss, because it compiles without a warning:

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

async function main() {
    // forEach starts all three and does not wait
    [30, 10, 20].forEach(async (ms) => {
        await wait(ms);
        console.log("forEach finished", ms);
    });
    console.log("after forEach"); // printed first

    await wait(50);

    // for...of waits for each await in turn
    for (const ms of [30, 10, 20]) {
        await wait(ms);
        console.log("for...of finished", ms);
    }
    console.log("after for...of"); // printed last
}

main();

The forEach callbacks finish in timer order (10, 20, 30) after the loop has already moved on. The for...of version runs them in sequence. For parallel work that you still wait for, use await Promise.all(items.map(async (item) => { ... })).

for...in: Keys Are Strings

for...in loops over the enumerable property names of an object. The key's type is always string, even for arrays, where the keys are the indexes as strings. That makes it awkward for indexing a typed object:

// This does not compile: key is string, not "name" | "age".
const user = { name: "Ada", age: 36 };

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

index.ts(5,22): error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ name: string; age: number; }'.
  No index signature with a parameter of type 'string' was found on type '{ name: string; age: number; }'.

TypeScript types the key as string on purpose: at runtime an object can have more properties than its type lists (structural typing allows extra ones), and for...in also walks inherited enumerable properties. So it cannot promise the key is "name" | "age". The fixes are in the next section. Avoid for...in on arrays altogether.

Looping Over an Object's Keys and Values

Object.entries gives [key, value] pairs and is the usual way to loop over an object. Object.keys returns string[] for the same reason for...in does, so when you know the object has no extra keys, assert the key type.

const prices = { tea: 2.5, coffee: 3.2, juice: 4 };

// Keys and values: key is string, value is number
for (const [item, price] of Object.entries(prices)) {
    console.log(`${item}: $${price.toFixed(2)}`);
}

// Typed keys: assert once, then index safely
type Item = keyof typeof prices; // "tea" | "coffee" | "juice"
for (const item of Object.keys(prices) as Item[]) {
    console.log(item, prices[item] * 2);
}

// Just the values
const total = Object.values(prices).reduce((sum, p) => sum + p, 0);
console.log(total); // 9.7

For data whose keys are not known in advance, type the object as a Record<string, number> or use a Map; both are covered on the dictionary page.

while and do...while

while checks its condition before each pass; do...while runs the body once before checking. They suit loops that do not walk a collection, such as reading until a condition holds. Narrowing works inside them: after a !== undefined check in the condition, the variable is narrowed in the body.

const queue: string[] = ["a", "b", "c"];

let next: string | undefined;
while ((next = queue.shift()) !== undefined) {
    console.log("processing", next.toUpperCase()); // next: string here
}

let attempts = 0;
do {
    attempts++;
    console.log("attempt", attempts);
} while (attempts < 2);

Labels, break and continue in Nested Loops

A plain break leaves only the innermost loop. To leave an outer loop, label it and name the label:

const grid: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];

let found: [number, number] | null = null;

outer: for (let row = 0; row < grid.length; row++) {
    for (let col = 0; col < grid[row].length; col++) {
        if (grid[row][col] === 5) {
            found = [row, col];
            break outer; // leaves both loops
        }
    }
}
console.log(found); // [ 1, 1 ]

Which Loop to Use