반복문

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• for, while, do-while 반복문의 구조와 차이를 이해하고 상황에 맞게 선택할 수 있습니다.
• break와 continue로 반복문의 흐름을 제어할 수 있습니다.
• for...of로 배열과 문자열을 순회할 수 있습니다.
• 무한 루프의 위험성을 이해하고 올바른 종료 조건을 설계할 수 있습니다.

🔁 반복문이 필요한 이유

이 섹션에서는 반복문의 역할과 프로그래밍에서 반복 처리가 왜 필수적인지 살펴보겠습니다.

만약 1부터 100까지의 합계를 구해야 한다면 어떻게 할까요? 1 + 2 + 3 + ... + 100을 직접 쓰는 것은 비효율적이고, 만약 1부터 10,000까지라면 불가능에 가깝습니다. 또한 쇼핑몰의 상품 목록을 화면에 출력해야 한다면, 상품이 몇 개인지도 모르는 상태에서 미리 코드를 작성해야 합니다. 이런 상황에서 반복문(Loop)이 사용됩니다.

반복문은 특정 코드 블록을 원하는 횟수만큼 또는 특정 조건이 만족될 때까지 반복 실행합니다. 반복문 덕분에 수백, 수천 개의 데이터를 처리하는 코드를 단 몇 줄로 표현할 수 있습니다.

// 반복문 없이 1~5 출력 — 비효율적
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

// 반복문으로 1~5 출력 — 간결하고 확장 가능
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 1~100으로 바꾸려면 5만 100으로 수정하면 끝

🔢 for 문 — 횟수가 정해진 반복

이 섹션에서는 반복 횟수가 명확할 때 사용하는 for문의 구조와 활용법을 살펴보겠습니다.

for문은 반복 횟수를 미리 알 때 가장 적합한 반복문입니다. 세 부분으로 구성됩니다: 초기화식(반복 시작 전 한 번 실행), 조건식(매 반복 전에 확인), 증감식(매 반복 후에 실행).

// for (초기화; 조건; 증감)
for (let i = 0; i < 5; i++) {
  console.log(`i의 값: ${i}`);
}
// i의 값: 0
// i의 값: 1
// i의 값: 2
// i의 값: 3
// i의 값: 4

// 실행 순서:
// 1. let i = 0 (초기화, 1번만)
// 2. i < 5 검사 → true면 실행, false면 종료
// 3. console.log() 실행
// 4. i++ 실행
// 5. 2번으로 돌아감

i는 반복문의 카운터 변수로, 관례적으로 i(index의 약자)를 사용합니다. 중첩 반복문에서는 j, k를 순서대로 사용합니다. i = 0에서 시작하는 이유는 배열의 인덱스가 0부터 시작하기 때문입니다. 앞으로 배열을 순회할 때 자연스럽게 연결됩니다.

// 1부터 100까지의 합계
let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log(`1~100의 합: ${sum}`);  // 5050

// 짝수만 출력 (조건문 + 반복문 조합)
for (let i = 1; i <= 20; i++) {
  if (i % 2 === 0) {
    console.log(i);  // 2, 4, 6, ..., 20
  }
}

// 역순 반복
for (let i = 5; i >= 1; i--) {
  console.log(i);  // 5, 4, 3, 2, 1
}

// 2씩 증가
for (let i = 0; i <= 10; i += 2) {
  console.log(i);  // 0, 2, 4, 6, 8, 10
}

초기값, 조건, 증감을 자유롭게 설정할 수 있어 다양한 패턴의 반복이 가능합니다. 역순 반복(i--)이나 2씩 증가(i += 2)처럼 증감식을 변형하면 다양한 수열 패턴을 만들 수 있습니다.

🔄 while 문 — 조건이 기준인 반복

이 섹션에서는 반복 횟수를 모르고 조건이 만족될 때까지 반복해야 할 때 사용하는 while문을 살펴보겠습니다.

while문은 반복 횟수가 사전에 정해지지 않고, 특정 조건이 참인 동안 계속 실행해야 할 때 적합합니다. 구조가 간단합니다: while (조건) { 실행 코드 }

// 기본 while문
let count = 0;
while (count < 5) {
  console.log(`count: ${count}`);
  count++;  // 반드시 조건이 변하도록 만들어야 함!
}

// 실용 예제: 숫자를 계속 반으로 나누어 1 미만이 될 때까지
let number = 128;
let steps = 0;
while (number >= 1) {
  number = number / 2;
  steps++;
}
console.log(`${steps}번 나누었습니다.`);  // 8번

// do-while문 — 조건과 관계없이 최소 한 번은 실행
let attempt = 0;
do {
  console.log(`시도 ${attempt + 1}`);
  attempt++;
} while (attempt < 3);
// 시도 1, 시도 2, 시도 3

while문에서 가장 중요한 주의사항은 반드시 조건이 거짓이 되는 지점을 만들어야 한다는 것입니다. 위 예제에서 count++가 없으면 count < 5는 영원히 true이므로 무한 루프에 빠집니다. 무한 루프는 브라우저나 프로그램을 멈추게 만드는 심각한 버그입니다.

do-while은 while과 달리 코드 블록을 먼저 실행하고 조건을 검사합니다. 따라서 조건과 관계없이 최소 한 번은 실행이 보장됩니다. 사용자에게 입력을 요청하고 유효한 입력이 올 때까지 반복하는 로직에 적합합니다.

구분	for	while	do-while
반복 기준	횟수 기반	조건 기반	조건 기반
조건 확인	실행 전	실행 전	실행 후
최소 실행	0번 가능	0번 가능	반드시 1번
적합한 상황	배열 순회, 횟수 반복	조건 기반 루프	최소 1회 보장 필요

⏹️ break와 continue — 반복 흐름 제어

이 섹션에서는 반복문 실행 중간에 흐름을 바꿀 수 있는 break와 continue를 살펴보겠습니다.

반복문이 실행되는 도중, 특정 조건에서 반복을 완전히 멈추거나 현재 반복만 건너뛰고 싶을 때가 있습니다. break는 반복문을 즉시 완전히 종료합니다. continue는 현재 반복의 나머지 코드를 건너뛰고 다음 반복을 시작합니다.

// break — 반복 완전 종료
for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    console.log("5에서 중단!");
    break;  // 반복문 즉시 종료
  }
  console.log(i);
}
// 1, 2, 3, 4, 5에서 중단!

// 실전 예시: 배열에서 원하는 값 찾기
const numbers = [3, 7, 2, 9, 5, 1];
let found = -1;
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 9) {
    found = i;
    break;  // 찾았으면 더 이상 탐색 불필요
  }
}
console.log(found !== -1 ? `인덱스 ${found}에서 발견` : "없음");
// 인덱스 3에서 발견

// continue — 현재 반복만 건너뜀
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;  // 짝수는 건너뜀
  }
  console.log(i);  // 홀수만 출력
}
// 1, 3, 5, 7, 9

// 실전 예시: 유효하지 않은 값 건너뛰기
const scores = [85, null, 92, undefined, 78, 0];
let total = 0;
let validCount = 0;

for (let i = 0; i < scores.length; i++) {
  if (!scores[i] && scores[i] !== 0) {
    continue;  // null, undefined 건너뜀
  }
  total += scores[i];
  validCount++;
}
console.log(`유효 점수 ${validCount}개, 합계: ${total}`);

🌊 for...of — 배열과 문자열 순회

이 섹션에서는 배열이나 문자열처럼 순회 가능한 자료를 더 간결하게 반복하는 for...of를 살펴보겠습니다.

for...of는 배열, 문자열처럼 이터러블(Iterable)한 자료를 순회할 때 사용합니다. 인덱스 없이 각 요소에 직접 접근할 수 있어 코드가 훨씬 간결합니다.

// 배열 순회
const fruits = ["사과", "바나나", "포도", "딸기"];

// 기존 for문
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...of — 더 간결
for (const fruit of fruits) {
  console.log(fruit);  // 사과, 바나나, 포도, 딸기
}

// 문자열 순회
const name = "자바스크립트";
for (const char of name) {
  console.log(char);  // 자, 바, 스, 크, 립, 트
}

// 인덱스가 필요하면 entries() 사용
for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}
// 0: 사과, 1: 바나나, 2: 포도, 3: 딸기

for...of에서 const를 사용한다는 점이 특이합니다. 매 반복마다 새로운 블록이 생성되어 fruit가 새로 선언되므로 const를 써도 문제가 없습니다. 값을 수정할 필요가 없으면 const를 사용하는 것이 더 안전합니다. 객체의 속성을 순회할 때는 for...in을 사용하지만, 이것은 14강 객체에서 다루겠습니다.

⚠️ 자주 하는 실수와 주의점

이 섹션에서는 반복문 사용 시 입문자들이 자주 겪는 실수와 무한 루프 방지법을 살펴보겠습니다.

무한 루프(Infinite Loop)는 반복문의 종료 조건이 절대 false가 되지 않는 상태입니다. 브라우저 탭이 멈추거나 응답하지 않게 됩니다. Chrome에서는 "페이지가 응답하지 않습니다" 경고가 뜹니다. 발생하면 브라우저 탭을 강제로 닫으면 됩니다.

// 무한 루프 예시 — 절대 실행하지 마세요!
// while (true) {
//   console.log("영원히 실행");
//   // break가 없어서 종료 불가
// }

// 올바른 while 종료 조건 예시
let energy = 100;
while (energy > 0) {
  energy -= 20;
  console.log(`남은 에너지: ${energy}`);
}  // energy가 0이 되면 종료

off-by-one 오류도 매우 흔합니다. i < 5와 i <= 5의 차이로 반복 횟수가 달라집니다. 0부터 시작하면 i < 5는 0, 1, 2, 3, 4로 총 5회, i <= 5는 0~5로 총 6회 반복됩니다. 배열 순회 시에는 i < array.length(마지막 인덱스는 length - 1)를 사용해야 합니다. i <= array.length로 쓰면 마지막 요소 이후에 undefined를 접근하게 됩니다.

반복문 변수를 바깥에서 재사용하지 마세요. let i = 0으로 선언된 i는 for문 블록 안에서만 살아있습니다. 반복문 밖에서 i를 참조하면 오류가 납니다. 필요하다면 반복문 밖에서 따로 변수를 선언하세요.

📝 핵심 요약

8강에서 배운 내용을 정리해 보겠습니다.

구문	용도	주의사항
for (초기화; 조건; 증감)	횟수가 정해진 반복	off-by-one 오류 주의
while (조건)	조건 기반 반복	반드시 종료 조건 확보
do-while	최소 1회 보장 반복	드물게 사용됨
for...of	배열·문자열 순회	인덱스 없이 값에 직접 접근
break	반복 즉시 종료	switch문과도 함께 사용
continue	현재 반복 건너뜀	다음 반복으로 이동

다음 강인 9강 — 함수 기초에서는 반복되는 코드를 묶어 이름을 붙이고 재사용하는 함수를 배웁니다. 함수는 프로그래밍의 핵심 도구로, 지금까지 배운 변수, 조건문, 반복문이 모두 함수 안에서 결합됩니다. 매개변수와 반환값 개념까지 탄탄히 익히면 본격적인 프로그램 작성이 가능해집니다!