프론트엔드/JAVASCRIPT

JavaScript 반복문 정리

CYANREDSKY 2025. 9. 23. 09:54

JavaScript에서 반복문은 코드를 여러 번 실행하거나 배열/객체 데이터를 순회할 때 사용됩니다. 상황에 따라 다양한 반복문이 제공되며, 각각의 특징을 이해하면 효율적인 코드를 작성할 수 있습니다.

1. for 문

가장 기본적인 반복문으로, 초기값 → 조건식 → 증감식 순서로 실행됩니다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 출력: 0 1 2 3 4

2. while 문

조건이 true인 동안 반복 실행합니다.

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

3. do...while 문

조건을 나중에 검사하기 때문에, 최소 한 번은 반드시 실행됩니다.

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

4. for...in 문

객체의 속성(key) 을 순회할 때 사용합니다.

let person = { name: "홍길동", age: 20, city: "서울" };

for (let key in person) {
  console.log(key, person[key]);
}
// name 홍길동
// age 20
// city 서울

⚠️ 배열 순회에는 권장되지 않습니다(순서 보장 X).

5. for...of 문

배열, 문자열, Map, Set 같은 이터러블(iterable) 을 순회할 때 사용합니다.

let fruits = ["사과", "바나나", "포도"];

for (let fruit of fruits) {
  console.log(fruit);
}
// 사과 바나나 포도

6. forEach() 메서드

배열 전용 반복. 콜백 함수를 실행합니다.

let numbers = [1, 2, 3];

numbers.forEach((num, index) => {
  console.log(index, num);
});
// 0 1
// 1 2
// 2 3

7. 반복 제어 키워드

break

반복문을 즉시 종료

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}
// 0 1 2 3 4

continue

현재 반복을 건너뛰고 다음 반복으로 이동

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}
// 0 1 3 4

8. 중첩 반복문

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`i=${i}, j=${j}`);
  }
}

9. 최신 문법 – for await...of

비동기 이터러블(async iterable) 순회할 때 사용합니다.

async function process() {
  let promises = [Promise.resolve(1), Promise.resolve(2)];

  for await (let result of promises) {
    console.log(result);
  }
}
process();
// 출력: 1 2

마무리

JavaScript 반복문은 크게 전통적 반복문(for, while), 객체/배열 전용(for...in, for...of, forEach), 비동기(for await...of) 로 구분됩니다.

  • 조건 제어 중심 → for, while, do...while
  • 데이터 순회 중심 → for...in, for...of, forEach
  • 비동기 데이터 순회 → for await...of

적절한 반복문을 선택하면 코드가 더 간결하고 효율적이 됩니다.

'프론트엔드 > JAVASCRIPT' 카테고리의 다른 글

JavaScript forEach() 정리  (0) 2025.10.23
JavaScript 함수(Function) 정리  (0) 2025.09.23
JavaScript 배열(Array) 정리  (0) 2025.09.23
JavaScript 조건문 정리  (0) 2025.09.23
JavaScript 불리언(Boolean)  (0) 2025.09.23