같은 일을 되풀이하는 반복문: for · for...of · while

01. 횟수가 정해진 반복: for

for의 괄호 안에는 세 부분이 세미콜론으로 나뉘어 들어가요. 처음 한 번 할 일 ; 매번 확인할 조건 ; 한 바퀴 끝날 때마다 할 일이에요. 조건이 참인 동안 본문을 실행하고, 거짓이 되면 반복을 끝내요.

for (let page = 1; page <= 3; page++) {
  console.log(`${page}페이지를 불러와요`);
}
console.log('끝');

let page로 만든 변수는 반복문 안에서만 살아 있어요. 반복이 끝난 뒤에는 쓸 수 없어서, 바깥 변수와 이름이 부딪힐 일이 없어요.

02. 배열을 도는 for...of

배열의 항목을 하나씩 꺼낼 때는 번호를 다룰 필요 없이 for (const 항목 of 배열)을 써요. 번호를 잘못 세서 하나를 빼먹거나 넘치는 실수가 원천적으로 없어요. 문자열도 for...of로 한 글자씩 돌 수 있어요.

const cart = [
  { name: '연필', price: 500 },
  { name: '공책', price: 2000 },
];

let total = 0;
for (const item of cart) {
  total += item.price;
}
console.log(total); // 2500

for (const ch of '하늘') console.log(ch);

비슷하게 생긴 for...in은 객체의 속성 이름을 도는 문법이에요(4장). 배열에 쓰면 값이 아니라 번호가 문자열로 나와서 헷갈리니, 배열에는 for...of를 써요.

03. 조건만 있는 반복: while

몇 번 돌지 미리 알 수 없고 "언제 끝나는지"만 알 때는 while (조건)을 써요. 조건이 참인 동안 계속 돌아요. 본문 안에서 조건이 언젠가 거짓이 되도록 값을 바꿔 주지 않으면 영영 끝나지 않아요.

let size = 1000;   // 이미지 크기(KB)라고 해요
let steps = 0;

while (size > 100) {
  size = size / 2; // 줄일 때마다 절반으로
  steps++;
}

console.log(steps, size); // 4 62.5

본문을 적어도 한 번은 실행해야 할 때는 조건을 뒤에 쓰는 do { … } while (조건);도 있어요. 실무에서는 드물게 써요.

끝나지 않는 반복은 페이지를 멈춰요. 자바스크립트가 메인 스레드를 붙잡고 놓지 않으니까요(스크립트와 화면). 이 글의 실행 블록은 1초가 지나면 끊어 주지만, 실제 페이지에서는 탭이 응답하지 않게 돼요.

04. break와 continue

break는 반복을 그 자리에서 끝내요. 찾던 것을 찾았으면 나머지를 볼 필요가 없을 때 써요. continue는 이번 바퀴만 건너뛰고 다음 바퀴로 가요. 처리할 필요가 없는 항목을 거를 때 써요.

const scores = [72, 0, 95, 88];

for (const score of scores) {
  if (score === 0) continue;      // 결시(0점)는 건너뛰어요
  if (score >= 90) {
    console.log('90점 이상 발견:', score);
    break;                        // 찾았으니 그만
  }
  console.log('확인:', score);
}

반복문이 겹쳐 있을 때 바깥 반복까지 한 번에 끝내는 레이블(outer: for …, break outer)도 있지만, 대개 그 부분을 함수로 빼고 return하는 편이 읽기 쉬워요.

const prices = [3000, 4500, 2000, 5000, 1000];
const budget = 10000;
let count = 0;
let total = 0;

// 여기에 반복문을 써 보세요

console.log(count, total);

for (const price of prices) {
  if (total + price > budget) break;
  total += price;
  count++;
}
console.log(count, total); // 3 9500

05. 실전 포인트

• 언제 쓰나요? 배열은 for...of, 번호가 필요하거나 정해진 횟수만큼이면 for, 끝나는 조건만 알 때(재시도 · 페이지를 끝까지 넘기기)는 while을 써요.
• 대신 쓰는 것: "배열을 바꿔 새 배열 만들기 · 거르기 · 합치기"는 map · filter · reduce 같은 배열 메서드(5장)가 더 짧고 의도가 잘 보여요. 반복문은 중간에 멈춰야 하거나(break) 여러 일을 한 바퀴에 같이 할 때 써요.
• 흔한 실수: while 본문에서 조건을 바꾸지 않아 끝나지 않는 것, i <= arr.length처럼 한 번 더 도는 것, 배열에 for...in을 쓰는 것, 아주 큰 반복을 메인 스레드에서 돌려 화면을 멈추는 것이에요.