JavaScript 반복문

JavaScript에서 반복문은 배열 순회, 조건 반복, DOM 제어 등 다양한 곳에서 사용됩니다. 이 글에서는 기본적인 반복문 외에도, 잘 알려지지 않았지만 강력한 반복 방식들과 사용 시 주의할 점들을 함께 정리합니다.

---

1. 기본 반복문 구조 복습

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

j = 0;
do {
  console.log(j);
  j++;
} while (j < 5);

---

2. for...of 문 - 이터러블 객체 순회

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value);
}

• 배열, 문자열, Map, Set 등 이터러블 객체를 순회할 수 있습니다.
• index가 필요 없는 경우 간결하고 읽기 쉬움

---

3. for...in 문 - 객체의 속성 순회

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]);
}

• 객체의 열거 가능한 속성을 순회합니다.
• 배열에도 사용할 수 있지만, index 순서를 보장하지 않음에 주의해야 합니다.

---

4. Array.prototype.forEach

[1, 2, 3].forEach((item, index) => {
  console.log(index, item);
});

• 함수형 스타일의 순회
• break나 continue는 사용할 수 없습니다 → 조건 분기에는 부적합

---

5. break, continue의 활용

for (let i = 0; i < 10; i++) {
  if (i === 5) continue; // 5는 건너뜀
  if (i === 8) break;    // 8에서 반복 종료
  console.log(i);
}

---

6. 중첩 반복문의 레이블 (label) 사용

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === j) continue outer;
    console.log(i, j);
  }
}

• label:을 붙이면 특정 반복문을 대상으로 break 또는 continue 가능
• 과도한 사용은 가독성 저하 주의

---

7. 비동기 반복문 - for await...of

const asyncIterable = {
  async *[Symbol.asyncIterator]() {
    yield 'A';
    yield 'B';
  }
};

(async () => {
  for await (const val of asyncIterable) {
    console.log(val);
  }
})();

• Promise를 반환하는 이터러블에 대해 순차적으로 await하며 반복
• API 응답 등 비동기 처리에서 유용

---

8. 배열 변형을 위한 map / filter / reduce

const arr = [1, 2, 3];

const doubled = arr.map(x => x * 2); // [2, 4, 6]
const even = arr.filter(x => x % 2 === 0); // [2]
const sum = arr.reduce((acc, cur) => acc + cur, 0); // 6

• 반복과 동시에 배열을 가공해야 할 때 강력한 도구
• for보다 선언적이고 명확한 코드 작성 가능

---

마무리

반복문은 단순히 루프를 도는 도구가 아니라, 상황에 맞게 선택하면 가독성과 성능 모두를 잡을 수 있습니다. 조건 제어, 비동기 작업, 배열 가공 등 다양한 문법을 적절히 조합하여 더 나은 코드를 작성해 보세요.