JavaScript 반복문 한 번에 정리하기

반복문은 "조건에 따라 코드를 여러 번 실행"하게 해주는 기본 도구! 🧑‍💻

코드를 짜다 보면 자연스럽게 반복이 생긴다.

• 댓글 목록 돌기
• API 응답 배열 순회하기
• 사용자 입력이 끝날 때까지 계속 받기

이럴 때 쓰는 게 바로 반복문(loops)

근데 막상 정리하려고 하면

• for, while, do...while, for...in, for...of…
• “대체 뭐가 어떻게 다른 거냐”

이렇게 헷갈리기 쉽다.

이번 글에서는 주니어 기준으로, 실무에서 자주 쓰는 반복문만 골라서 정리해보려고 한다.

---

결론 먼저

• 반복문은 조건에 따라 코드를 반복 실행하는 문법
• 상황에 맞게 for, while, for...of, for...in 중에서 골라 쓰는 게 중요
• 특히 배열 / 객체 순회에서 어떤 반복문을 쓰느냐가 가독성과 성능에 영향을 준다

아주 짧게 요약하면 이렇게 쓴다

• 정확한 횟수 / 인덱스 기반 → for
• 언제 끝날지 모름 / 조건 기반 → while, do...while
• 배열/문자열 값 순회 → for...of
• 객체 프로퍼티 순회 → for...in

---

반복문 종류 한눈에 보기

문법 역할 언제 쓰나? 메모

for	지정된 횟수 / 인덱스 기반 반복	배열 인덱스 순회, 명확한 반복 횟수 있을 때	✅ 가장 직관적이고 빠른 편
while	조건이 참일 동안 반복	반복 횟수를 미리 알 수 없을 때	조건 잘못 걸면 무한 루프 위험
do...while	최소 1회 실행 보장	사용자 입력처럼 무조건 한 번은 해야 하는 작업	조건 확인 위치만 다름
for...in	객체의 key 순회	객체 속성 탐색용	❌ 배열에 쓰면 비효율적
for...of	이터러블 값 순회	배열, 문자열 등 "값"만 깔끔하게 돌고 싶을 때	✅ 가독성 좋고 쓰기 편함

 

---

1. for 문 – 인덱스 / 횟수 기반

가장 기본적인 반복문.

for (let i = 0; i < 3; i++) {
  console.log(`번호: ${i}`);
}
// 번호: 0
// 번호: 1
// 번호: 2

기본 구조는

for (초기식; 조건식; 증감식) {
  // 반복해서 실행할 코드
}

• 초기식: 반복을 시작할 때 한 번 실행 (let i = 0)
• 조건식: 이게 true인 동안 반복 (i < 3)
• 증감식: 한 번 돌고 나서 실행 (i++)

언제 쓰나?

• 배열을 인덱스로 접근해서 쓸 일이 많을 때
• 반복 횟수가 명확하게 정해져 있을 때 (예: 10번 반복)

const arr = ['a', 'b', 'c'];

for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

---

2. while 문 – 조건 기반 반복

while은 조건이 참이면 계속 도는 반복문이다.

let count = 0;

while (count < 3) {
  console.log(`카운트: ${count}`);
  count++;
}
// 카운트: 0
// 카운트: 1
// 카운트: 2

특징

• 반복 시작 전에 조건을 체크한다
• 조건을 잘못 걸면 그대로 무한 루프로 빠질 수 있다

언제 쓰나?

• 반복 횟수를 미리 알 수 없는 상황
  • 예: 사용자가 특정 값을 입력할 때까지 반복

let value;

while (value !== 'exit') {
  // value를 입력 받는다고 가정
  // value = prompt('입력 (exit 입력 시 종료)');
}

---

3. do...while – 최소 한 번은 실행

do...while은 while과 거의 비슷한데, 조건 검사 전에 한 번 실행한다.

let i = 0;

do {
  console.log(`실행: ${i}`);
  i++;
} while (i < 3);

// 실행: 0
// 실행: 1
// 실행: 2

심지어 처음부터 조건이 거짓이어도 한 번은 무조건 실행된다.

let num = 10;

do {
  console.log('한 번은 출력');
} while (num < 5);

// 한 번은 출력

언제 쓰나?

• 사용자 입력 받기, 메뉴 선택 같은 경우처럼
• "어쨌든 최소 한 번은 실행해야 하는 작업"에 잘 어울린다.

---

4. for...in – 객체 프로퍼티(key) 순회

for...in은 객체의 key를 순회할 때 쓰는 문법이다.

const user = { name: 'Lee', age: 28 };

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// name: Lee
// age: 28

여기서 주의할 점

• for...in은 프로토타입 체인 상의 상속된 속성까지 순회할 수 있다
• 그래서 보통은 hasOwnProperty로 필터링하는 패턴을 쓰기도 한다

for (const key in user) {
  if (!user.hasOwnProperty(key)) continue;
  console.log(key, user[key]);
}

그리고 배열에는 쓰지 않는 게 좋다.

• 인덱스 순서를 보장하지 않고
• 성능도 일반 for나 for...of보다 비효율적이다

배열에는 아래에서 설명할 for...of 나 forEach를 쓰는 걸 추천

---

5. for...of – 배열/문자열 값 순회

for...of는 값 위주로 깔끔하게 돌고 싶을 때 쓰기 좋다.

const arr = ['a', 'b', 'c'];

for (const value of arr) {
  console.log(value);
}
// a
// b
// c

문자열에도 사용할 수 있다.

const str = 'hi';

for (const ch of str) {
  console.log(ch);
}
// h
// i

주의할 점

• for...of는 이터러블에만 쓸 수 있다
• 객체 리터럴 {}에는 직접 사용할 수 없다 (에러)

객체를 for...of로 돌고 싶다면
Object.keys, Object.values, Object.entries로 먼저 배열로 바꾼 뒤 사용하는 패턴을 쓴다.

const user = { name: 'Lee', age: 28 };

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// name Lee
// age 28

---

어떤 반복문을 언제 쓸까? (체크리스트)

실제 코드 짤 때는 대충 이렇게 고른다.

• 반복 횟수가 명확하다?
  • → for
• 언제 끝날지 애매한 조건 기반이다?
  • → while 또는 do...while
  • 단, 무한 루프 방지용 조건/증감 로직 꼭 확인
• 객체 프로퍼티를 돌고 싶다?
  • → for...in + hasOwnProperty 고려
  • 또는 Object.keys/values/entries + for...of
• 배열/문자열 값을 깔끔하게 순회하고 싶다?
  • → for...of
• 배열 + 콜백 기반 처리(map, filter 등)와 섞어 쓰고 싶다?
  • → forEach, map, filter, reduce도 함께 고려

---

오늘 내용 한 줄씩 다시 정리

• 반복문은 조건에 따라 코드를 여러 번 실행하게 해주는 문법이다.
• for: 인덱스/횟수 기반 반복에 가장 기본이 되는 문법
• while / do...while: 조건 기반 반복 + 최소 1회 실행 보장
• for...in: 객체의 key 순회용, 배열에는 지양
• for...of: 배열/문자열 등 이터러블의 값을 깔끔하게 순회
• 실무에서는 배열은 for, for...of, forEach 조합으로,
  객체는 for...in 또는 Object.entries + for...of 조합으로 다루면 웬만한 상황은 다 커버된다.