TypeScript 반복문: for, forEach, for...of, for...in

TypeScript의 반복문은 JavaScript와 같습니다: for, for...of, for...in, while, do...while, 그리고 배열 메서드 forEach. TypeScript가 더하는 것은 타입입니다. for...of의 반복 변수는 요소 타입을 가지고, for...in의 키는 항상 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...of가 가장 알맞습니다. 읽기 쉽고, break, continue, await를 지원하며, 타입 표기가 필요 없습니다.

기본 for 문

for (init; condition; update)는 횟수를 세거나, 한 번에 여러 칸씩 건너뛰거나, 거꾸로 도는 반복에 씁니다. TypeScript는 카운터의 타입을 초기값에서 추론합니다.

// 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);
}

카운터는 var가 아니라 let으로 선언하세요. let을 쓰면 반복마다 새로운 바인딩이 생기므로, 반복문 안에서 만든 콜백이 그 회차의 값을 봅니다.

for...of: 배열, 문자열, Map의 값

for...of는 이터러블이면 무엇에든 동작하며, 반복 변수는 그에 맞는 타입을 받습니다. 인덱스도 필요하면 [index, value] 튜플을 내놓는 array.entries()를 순회하세요.

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는 반복을 빠져나가고 continue는 다음 항목으로 넘어가며, for 문과 똑같이 동작합니다. 런타임 세부 사항(이터러블, 제너레이터)은 JavaScript for...of와 for...in 페이지에 있습니다.

forEach: break도 await도 안 된다

forEach는 요소마다 함수를 호출하고 undefined를 반환합니다. 콜백의 매개변수는 배열에서 타입을 받으므로 타입 표기가 필요 없습니다. 다만 할 수 없는 일이 두 가지 있습니다.

• 일찍 멈출 수 없습니다. 콜백 안의 break는 컴파일 오류 TS1107 Jump target cannot cross function boundary.입니다. return은 현재 호출만 끝내므로 continue처럼 동작합니다.
• 비동기 작업을 기다리지 않습니다. forEach는 async 콜백이 반환하는 Promise를 무시합니다.

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

비동기 함정은 경고 없이 컴파일되므로 놓치기 쉽습니다.

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();

forEach 콜백들은 반복이 이미 다음으로 넘어간 뒤에 타이머 순서(10, 20, 30)대로 끝납니다. for...of 버전은 차례대로 실행합니다. 병렬로 실행하면서도 끝날 때까지 기다리려면 await Promise.all(items.map(async (item) => { ... }))를 쓰세요.

for...in: 키는 문자열이다

for...in은 객체의 열거 가능한 프로퍼티 이름을 순회합니다. 키의 타입은 항상 string이며, 배열에서도 키는 문자열로 된 인덱스입니다. 그래서 타입이 지정된 객체를 인덱싱하기에는 불편합니다.

// 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가 키를 string으로 지정하는 것은 의도된 것입니다. 런타임에 객체는 타입에 나열된 것보다 많은 프로퍼티를 가질 수 있고(구조적 타이핑은 추가 프로퍼티를 허용합니다), for...in은 상속된 열거 가능한 프로퍼티도 순회합니다. 그래서 키가 "name" | "age"라고 보장할 수 없습니다. 해결 방법은 다음 절에 있습니다. 배열에는 for...in을 아예 쓰지 마세요.

객체의 키와 값 순회하기

Object.entries는 [key, value] 쌍을 주며, 객체를 순회하는 일반적인 방법입니다. Object.keys도 for...in과 같은 이유로 string[]를 반환하므로, 객체에 추가 키가 없다는 것을 안다면 키 타입을 단언하세요.

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

키를 미리 알 수 없는 데이터라면 객체를 Record<string, number>로 타입 지정하거나 Map을 쓰세요. 둘 다 딕셔너리 페이지에서 다룹니다.

while과 do...while

while은 매번 실행하기 전에 조건을 검사하고, do...while은 본문을 한 번 실행한 뒤에 검사합니다. 조건이 만족될 때까지 읽는 것처럼 컬렉션을 순회하지 않는 반복에 알맞습니다. 좁히기(narrowing)도 동작합니다. 조건에서 !== undefined를 검사하면 본문에서는 변수가 좁혀집니다.

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);

중첩 반복문에서 레이블, break, continue

일반 break는 가장 안쪽 반복만 빠져나갑니다. 바깥 반복을 빠져나가려면 레이블을 붙이고 그 레이블을 지정하세요.

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 ]

어떤 반복문을 쓸까