반복문 — 같은 일을 정확히 여러 번 시키기

1.왜 반복문이 필요할까

1강에서 프로그램을 순서·조건·반복으로 쪼개 보았습니다. 3강의 조건문이 '갈림길'이라면, 이번 강의의 반복문은 '되돌아가는 길'입니다. 1부터 5까지 화면에 찍으려면 console.log를 다섯 줄 써도 되지만, 1부터 1,000까지라면 이야기가 달라집니다. 줄을 복사해 붙이면 실수하기 쉽고, 숫자를 바꾸려면 모든 줄을 고쳐야 합니다.

반복문은 '이 일을, 이 조건이 맞는 동안 계속하라'고 한 번만 적는 문법입니다. 사람은 같은 일을 오래 하면 지치고 틀리지만, 컴퓨터는 백 번째도 첫 번째와 똑같이 해냅니다. 대신 컴퓨터는 언제 멈춰야 하는지를 스스로 판단하지 못하므로, 멈추는 조건을 사람이 정확히 적어 주어야 합니다. 이번 강의 내내 '무엇을 반복하는가'와 '언제 멈추는가'를 한 쌍으로 생각하는 연습을 합니다.

아래 코드는 다섯 줄을 쓰는 대신 반복문 하나로 같은 결과를 냅니다. 숫자 5를 1000으로 바꾸면 1,000줄이 찍히지만, 코드는 한 글자만 바뀝니다. 이것이 반복문이 자동화의 출발점인 까닭입니다.

for (let i = 1; i <= 5; i++) {
  console.log(i + '번째 인사: 안녕하세요');
}

1번째 인사: 안녕하세요
2번째 인사: 안녕하세요
3번째 인사: 안녕하세요
4번째 인사: 안녕하세요
5번째 인사: 안녕하세요

2.`for` 문 — 횟수가 정해진 반복

for 문의 괄호 안에는 세미콜론으로 나뉜 세 부분이 들어갑니다. 첫째는 처음 한 번만 실행하는 준비(let i = 1), 둘째는 매번 반복하기 전에 확인하는 조건(i <= 5), 셋째는 한 바퀴가 끝날 때마다 하는 일(i++)입니다. i++는 i = i + 1을 줄여 쓴 것입니다. 조건이 true인 동안 중괄호 안의 본문이 실행되고, 조건이 false가 되는 순간 반복이 끝납니다.

실행 순서를 정확히 아는 것이 중요합니다. 준비 → 조건 확인 → 본문 → 증가 → 조건 확인 → 본문 → 증가 … 순서로 돌다가, 조건이 거짓이면 본문을 건너뛰고 반복문 아래로 내려갑니다. 그래서 마지막에 i는 조건을 처음으로 어긴 값이 됩니다. 아래 표처럼 변수의 값을 한 줄씩 적어 보는 것을 '추적'이라고 하며, 반복문이 이상하게 동작할 때 가장 먼저 해 볼 일입니다.

반복 변수 이름으로 i를 쓰는 것은 오래된 관습일 뿐 규칙은 아닙니다. 뜻이 분명하면 month, page처럼 이름을 붙여도 됩니다. 반복 변수는 값이 바뀌므로 const가 아니라 let으로 선언합니다(2강).

const dan = 2;
for (let i = 1; i <= 4; i++) {
  console.log(dan + ' x ' + i + ' = ' + dan * i);
}

2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8

3.`for...of`와 두 가지 기본 패턴 — 누적과 세기

목록에 든 값을 하나씩 꺼내 쓸 때는 for...of가 가장 읽기 쉽습니다. for (const x of list)라고 쓰면 list의 값이 처음부터 차례로 x에 담깁니다. 몇 번째인지 셀 필요가 없으니 번호를 잘못 잡는 실수가 줄어듭니다. 목록(배열)은 6강에서 자세히 다루고, 여기서는 대괄호 안에 쉼표로 값을 늘어놓은 것이라고만 알아 두면 됩니다.

반복문으로 하는 일의 상당수는 두 패턴으로 요약됩니다. 누적 패턴은 반복 전에 let sum = 0처럼 '아직 아무것도 없는 값'을 만들어 두고, 한 바퀴마다 값을 더해 쌓습니다. 세기 패턴은 let count = 0으로 시작해 조건에 맞을 때만 1을 더합니다. 두 패턴 모두 시작값이 중요합니다. 합계의 시작은 0, 곱의 시작은 1, 글자를 이어 붙일 때의 시작은 빈 문자열 ''입니다.

누적 변수를 반복문 안에서 선언하면 매 바퀴 0으로 다시 태어나 합계가 쌓이지 않습니다. 반드시 반복문 바깥, 위쪽에서 선언하세요. 반대로 결과를 출력하는 console.log는 보통 반복문이 끝난 아래에 둡니다. 안에 두면 중간 합계가 바퀴마다 찍힙니다. 중간값을 보고 싶을 때는 일부러 안에 넣어 추적용으로 쓰기도 합니다.

const sales = [12000, 8500, 30000, 4000];
let sum = 0;
let count = 0;
for (const won of sales) {
  sum += won;
  if (won >= 10000) {
    count++;
  }
}
console.log('합계', sum);
console.log('만 원 이상', count + '건');

합계 54500
만 원 이상 2건

const scores = [70, 85, 90, 60];
let total = 0;
for (const s of scores) {
  total += s;
}
console.log(total / scores.length);

76.25

4.`while` 문과 무한 반복 — 끝 조건을 누가 바꾸는가

while 문은 조건 하나만 받습니다. 조건이 참인 동안 본문을 계속 실행합니다. 몇 번 돌지 미리 모르고 '목표에 닿을 때까지' 반복해야 할 때 잘 맞습니다. 예를 들어 매달 같은 금액을 모아 목표 금액에 닿기까지 몇 달이 걸리는지는, 계산식으로도 구할 수 있지만 한 달씩 더해 보며 세는 것이 가장 직관적입니다.

while을 쓸 때 꼭 확인할 질문은 '본문 안에서 조건을 바꾸는 줄이 있는가'입니다. 아래 코드에서 saved += 50000이 없으면 saved는 영원히 0이고 조건은 영원히 참입니다. 이것이 무한 반복입니다. 무한 반복에 빠진 프로그램은 오류 메시지도 없이 멈추지 않고 돌기 때문에, 브라우저 탭이 응답하지 않는 것처럼 보입니다. 이 페이지의 실습장은 코드가 2초 안에 끝나지 않으면 강제로 멈추고 '시간 제한'을 알려 줍니다.

무한 반복을 예방하는 점검법은 세 가지입니다. 조건에 쓰인 변수가 본문에서 바뀌는지, 바뀌는 방향이 조건을 거짓으로 만드는 쪽인지(0에서 시작해 빼기만 하면 목표에서 멀어집니다), 그리고 정확히 같을 때만 멈추는 !== 조건 대신 넘어서도 멈추는 < 같은 조건을 썼는지입니다. 2강에서 본 0.1 + 0.2처럼 소수는 정확히 같아지지 않을 수 있으므로 !==로 멈추게 하면 위험합니다.

const goal = 300000;
let saved = 0;
let months = 0;
while (saved < goal) {
  saved += 50000;
  months++;
}
console.log(months + '개월 뒤', saved + '원');

6개월 뒤 300000원

5.`break`와 `continue` — 일찍 멈추기, 건너뛰기

break는 반복문을 즉시 빠져나옵니다. 목록에서 조건에 맞는 첫 번째 값만 찾으면 될 때, 찾은 뒤에도 끝까지 도는 것은 낭비이므로 break로 멈춥니다. continue는 이번 바퀴의 나머지를 건너뛰고 다음 바퀴로 갑니다. 빈 값이나 잘못된 값을 걸러 내고 나머지만 처리할 때 씁니다.

두 키워드는 편리하지만 많이 쓰면 흐름을 따라가기 어려워집니다. 반복문 하나에 break와 continue가 여러 개 섞여 있다면, 조건문으로 다시 쓰거나 5강에서 배울 함수로 나누는 편이 읽기 쉽습니다. 특히 함수 안에서는 return이 반복문과 함수를 한꺼번에 끝내므로 '찾으면 바로 돌려준다'는 뜻을 더 분명히 보여 줍니다.

'찾지 못한 경우'도 반드시 생각해야 합니다. 아래 첫 코드에서 found의 시작값을 -1로 둔 것은 '아직 못 찾았다'는 표시입니다. 반복이 끝났는데도 -1이면 목록에 조건에 맞는 값이 없었다는 뜻입니다. 배열의 indexOf가 못 찾으면 -1을 돌려주는 것도 같은 약속입니다(6강).

const temps = [3, 1, -2, 5, -4];
let found = -1;
for (let i = 0; i < temps.length; i++) {
  if (temps[i] < 0) {
    found = i;
    break;
  }
}
console.log('첫 영하 기온의 위치', found);

첫 영하 기온의 위치 2

const items = ['사과', '', '배', '', '귤'];
for (const name of items) {
  if (name === '') {
    continue;
  }
  console.log(name);
}

사과
배
귤

6.off-by-one — 하나 차이로 틀리는 가장 흔한 실수

반복문 버그 가운데 가장 흔한 것은 한 번 더 돌거나 한 번 덜 도는 실수입니다. 영어로 off-by-one(하나 어긋남) 오류라고 부릅니다. 원인은 대개 세 가지입니다. 시작을 0으로 할지 1로 할지, 조건에 <를 쓸지 <=를 쓸지, 그리고 '개수'와 '마지막 번호'를 헷갈리는 것입니다. 배열의 위치는 0부터 세므로 길이가 5인 배열의 마지막 위치는 5가 아니라 4입니다.

울타리 기둥 문제로 감각을 익혀 봅시다. 10m 울타리에 1m 간격으로 기둥을 세우면 기둥은 10개가 아니라 11개입니다. 구간의 수와 끝점의 수는 하나 차이가 납니다. 마찬가지로 for (let i = 0; i < 5; i++)는 0·1·2·3·4로 5번, for (let i = 1; i <= 5; i++)는 1~5로 5번, for (let i = 0; i <= 5; i++)는 0~5로 6번 돕니다. 같은 '5'가 들어 있어도 횟수가 다릅니다.

off-by-one을 잡는 가장 확실한 방법은 경계값으로 직접 시험하는 것입니다. 3강에서 조건문의 경계값을 확인했듯이, 반복문은 '0개일 때, 1개일 때, 마지막 하나'를 꼭 넣어 봅니다. 배열을 위치로 돌다가 i <= arr.length로 한 칸 넘치면 마지막 바퀴에서 arr[i]가 undefined가 되어 합계가 NaN으로 바뀝니다. 오류 메시지 없이 이상한 값이 나오므로 더 찾기 어렵습니다. 위치가 필요 없다면 for...of를 쓰는 것이 이 실수를 아예 피하는 방법입니다.

const nums = [10, 20, 30];
let a = 0;
for (let i = 0; i <= nums.length; i++) {
  a += nums[i];
}
console.log('한 칸 넘친 합계', a);
let b = 0;
for (let i = 0; i < nums.length; i++) {
  b += nums[i];
}
console.log('바른 합계', b);

한 칸 넘친 합계 NaN
바른 합계 60

• 목록이 비어 있을 때(0개) 결과가 말이 되는가 — 합계 0, 개수 0, 평균은 따로 처리
• 값이 하나뿐일 때 반복이 정확히 한 번 도는가
• 마지막 값이 처리되는가 — 조건이 <인지 <=인지 확인
• 조건에 쓰인 변수가 본문에서 바뀌어 언젠가 거짓이 되는가
• 누적 변수가 반복문 바깥에서 선언되었는가

7.반복문을 읽고 판단하기 — AI가 짠 코드 앞에서

AI 코딩 도우미에게 '목록에서 합계를 구해 줘'라고 하면 반복문이 들어간 코드를 금방 받을 수 있습니다. 하지만 그 코드가 내 데이터에서 맞게 도는지는 직접 확인해야 합니다. 반복문을 읽을 때는 세 가지만 찾으면 됩니다. 반복 전에 무엇을 준비하는가(시작값), 한 바퀴에 무엇을 하는가(본문), 언제 멈추는가(끝 조건)입니다. 이 셋을 한 문장씩 말로 옮길 수 있으면 그 코드를 이해한 것입니다.

그다음에는 작은 입력으로 손 추적을 해 봅니다. 값이 세 개쯤인 목록을 넣고, 위에서 만든 추적표처럼 바퀴마다 변수 값을 적은 뒤 실제 실행 결과와 비교합니다. 빈 목록과 값 하나짜리 목록도 넣어 봅니다. 여기서 결과가 다르면 AI에게 '이 입력에서 이 결과가 나왔는데 기대값은 이것이다'라고 구체적으로 알려 주면 고치기가 훨씬 빨라집니다. 오류를 읽고 원인을 좁히는 방법은 8강, AI 코드를 검증하는 방법은 10강에서 더 자세히 다룹니다.