반복문(for/while)

반복문 — 반복하는 것들을 자동화하기

반복문은 비슷한 작업을 여러 번 수행할 때 사용합니다. 자바스크립트에는 5가지 주요 반복문이 있으며, 각각 적합한 상황이 다릅니다.

for 문 — 횟수가 정해진 반복

// 기본 구조
for (초기식; 조건식; 증감식) {
  // 반복할 코드
}

// 1부터 10까지 합산
let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
}
console.log(sum); // 55

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

// 배열 순회 (인덱스가 필요할 때)
const fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
  // 0 "apple", 1 "banana", 2 "cherry"
}

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

while 문 — 조건이 맞는 동안 반복

// 기본 구조 — 횟수를 미리 모를 때 적합
while (조건식) {
  // 반복할 코드
}

// 숫자 자리수 세기
let num = 123456;
let digits = 0;
while (num > 0) {
  num = Math.floor(num / 10);
  digits++;
}
console.log(digits); // 6

// 사용자 입력 대기 (Node.js 환경 개념 예시)
let attempt = 0;
const maxAttempts = 3;
while (attempt < maxAttempts) {
  const password = getInput(); // 입력 받기
  if (password === "secret") {
    console.log("로그인 성공");
    break;
  }
  attempt++;
  console.log(`남은 시도: ${maxAttempts - attempt}회`);
}

do...while 문 — 최소 한 번은 실행

// 조건 검사 전 최소 1회 실행
let count = 0;
do {
  console.log("실행:", count);
  count++;
} while (count < 3);
// 실행: 0, 실행: 1, 실행: 2

// while과의 차이
let x = 10;
while (x < 5) {
  console.log("while 실행"); // 실행 안 됨
}

do {
  console.log("do...while 실행"); // 1번 실행됨
} while (x < 5);

for...of — 이터러블 순회 (현대적 방법)

배열, 문자열, Set, Map 등 이터러블(iterable) 객체를 순회합니다. 배열을 다룰 때 가장 많이 씁니다.

const colors = ["red", "green", "blue"];

// 값만 필요할 때
for (const color of colors) {
  console.log(color); // "red", "green", "blue"
}

// 인덱스도 필요할 때 — entries() 활용
for (const [index, color] of colors.entries()) {
  console.log(index, color); // 0 "red", 1 "green", 2 "blue"
}

// 문자열 순회
for (const char of "Hello") {
  console.log(char); // H, e, l, l, o
}

// Set 순회
const uniqueNums = new Set([1, 2, 2, 3, 3]);
for (const num of uniqueNums) {
  console.log(num); // 1, 2, 3 (중복 제거됨)
}

// Map 순회
const scores = new Map([["Kim", 90], ["Lee", 85]]);
for (const [name, score] of scores) {
  console.log(`${name}: ${score}`);
}

for...in — 객체의 열거 가능한 키 순회

const person = { name: "Kim", age: 30, city: "Seoul" };

for (const key in person) {
  console.log(key, person[key]);
  // "name" "Kim", "age" 30, "city" "Seoul"
}

// 주의: 배열에 for...in 쓰지 마세요
const arr = [10, 20, 30];
for (const key in arr) {
  console.log(key); // "0", "1", "2" (문자열 인덱스)
}
// 프로토타입 체인의 프로퍼티도 순회될 수 있음

반복문	사용 시나리오
for	횟수가 정해진 반복, 인덱스 필요
while	종료 조건이 동적, 횟수 불명확
do...while	최소 1번 실행 보장
for...of	배열/문자열/Set/Map 값 순회
for...in	객체의 키 열거 (배열에는 사용 금지)

break와 continue

// break — 반복문 즉시 종료
const numbers = [1, 3, 5, 2, 8, 4];
let firstEven = null;
for (const n of numbers) {
  if (n % 2 === 0) {
    firstEven = n;
    break; // 찾으면 즉시 종료
  }
}
console.log(firstEven); // 2

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

무한루프 — 의도적 사용과 탈출

// 의도적 무한루프 패턴 (반드시 break 조건 있어야 함)
let retries = 0;
while (true) {
  const result = tryOperation();
  if (result.success) break;
  if (++retries >= 3) {
    console.error("최대 재시도 초과");
    break;
  }
}

// 자주 하는 실수 — 조건이 절대 false가 되지 않는 경우
// let i = 0;
// while (i < 10) {
//   console.log(i);
//   // i++ 빠뜨림! → 무한루프
// }

배열 순회 — 실무에서 for...of vs forEach

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

// for...of: break/continue 사용 가능, async/await 가능
for (const item of items) {
  if (item === 3) break;
  console.log(item); // 1, 2
}

// forEach: break/continue 불가, 콜백 스타일
items.forEach((item, index) => {
  console.log(index, item);
});
// return으로 continue 흉내는 가능하지만 break는 불가

관련 검색어  ·  자바스크립트 반복문, for of 사용법, for in 차이, while 루프, break continue, 배열 순회 방법