
안녕하세요. 오늘은 자바스크립트 제어문의 두 번째 시간으로 반복문(Loop)에 대해 알아볼게요.
자바스크립트의 반복문 (Loop)
자바스크립트의 반복문은 같은 코드 블록을 여러 번 반복 실행할 때 사용하는 제어문이에요.
예를 들어, 숫자를 1부터 10까지를 출력하거나, 배열의 모든 요소를 하나씩 확인할 때 등 사용해요.
반복문 종류
1. for 반복문
for 문은 정해진 횟수만큼 반복할 때 사용해요.
for (초기화식; 조건식; 증감식) {
// 반복해서 실행할 코드
}
// 초기화식: 반복을 시작하기 전에 한 번 실행 (반복 변수 선언)
// 조건식: 반복을 계속할지 결정 (true일 동안 실행)
// 증감식: 반복이 한 번 끝날 때마다 실행 (변수 값 변경)
// 예제 1
/*
i = 0부터 시작
i < 5일 때까지 반복
i++로 1씩 증가
*/
console.log('=== for 반복문 ===');
for (let i = 0; i < 5; i++) {
console.log(i);
}
2. while 반복문
while 문은 조건을 먼저 검사하고, 조건이 참이면 코드 블록을 실행해요.
조건이 처음부터 false라면 한 번도 실행되지 않을 수 있어요.
while (조건식) {
// 조건이 true인 동안 반복 실행
}
// 예제
console.log('while 반복문');
let b = 0;
while (b < 5) {
console.log(b);
b++; // 증감식은 반드시 내부에 작성해야 함!
}
// 출력 결과
0
1
2
3
4
3. do-while 반복문
do-while 문은 조건을 나중에 검사해요. while문과 다르게 최소 한 번은 무조건 실행해요.
do {
// 실행할 코드
} while (조건식);
// 예제
console.log('do while 반복문');
let c = 0;
do {
console.log(c);
c++;
} while (c < 5);
// 출력 결과
0
1
2
3
4
4. for...in 반복문 (객체용)
for...in 은 객체의 속성(key)을 반복할 때 사용해요.
const user = { name: 'Tom', age: 25, city: 'Seoul' };
for (let key in user) {
console.log(key, user[key]);
}
// 출력 결과
name Tom
age 25
city Seoul
key 값이 자동으로 순회되고, user[key]를 통해 해당 값에 접근할 수 있어요.
5. for...of 반복문 (배열 / 문자열용)
for... of는 반복 가능한(iterable) 객체를 순회하고,
배열, 문자열, Map, Set 등에 사용돼요.
let fruits = ['apple', 'banana', 'mango'];
for (let fruit of fruits) {
console.log(fruit);
}
// 출력 결과
apple
banana
mango
for... of는 객체({})에는 사용할 수 없어요.
객체는 key-value 형태라 for...in으로 순회해야 해요.
다음은 위의 내용을 정리한 표예요.
| 반복문 종류 | 실행 순서 / 특징 | 주 사용처 |
| for | 초기화 → 조건 검사 → 실행 → 증감 반복 | 반복 횟수가 정해진 경우 |
| while | 조건 검사 → 실행 반복 | 조건이 만족될 때까지 반복 |
| do...while | 한 번 실행 후 조건 검사 | 조건과 상관없이 최소 1회 실행 |
| for...in | 객체의 key 반복 | 객체 속성 순회 |
| for...of | 배열, 문자열 등 요소 반복 | 리스트 형태 데이터 순회 |

여기까지 자바스크립트의 반복문에 대해 알아봤는데요.
자바스크립트의 반복문은 코드를 여러 번 실행해 효율적이고 간결한 프로그램을 만들 수 있게 해 줘요.
조건문과 반복문을 잘 활용한다면 효율성이 높아질 것 같아요.
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript Function (0) | 2025.11.14 |
|---|---|
| JavaScript Array (0) | 2025.11.13 |
| JavaScript control(1) (0) | 2025.11.11 |
| JavaScript Data Type (2) (0) | 2025.11.10 |
| JavaScript Data Type (1) (0) | 2025.11.09 |