7장. 반복문
반복문이란?
반복문(Loop)은 특정 코드를 여러 번 실행하도록 하는 제어 구조입니다. 같은 작업을 반복해야 할 때 사용합니다.
1. for 문
가장 많이 사용하는 반복문입니다. 반복 횟수를 정확히 알고 있을 때 사용합니다.
기본 형식
for (초기화; 조건; 증감) {
// 반복 실행할 코드
}
예제 1: 1부터 5까지 출력
for (let i = 1; i <= 5; i++) {
console.log(i);
}
실행 결과
1
2
3
4
5예제 2: 5부터 1까지 역순 출력
for (let i = 5; i >= 1; i--) {
console.log(i);
}
실행 결과
5
4
3
2
1예제 3: 2씩 증가
for (let i = 0; i <= 10; i += 2) {
console.log(i);
}
실행 결과
0
2
4
6
8
102. while 문
조건이 true인 동안 계속 반복합니다. 반복 횟수를 정확히 모를 때 사용합니다.
기본 형식
while (조건) {
// 반복 실행할 코드
}
예제 1: 1부터 3까지 출력
let i = 1;
while (i <= 3) {
console.log(i);
i++;
}
실행 결과
1
2
3예제 2: 사용자 입력 대기
let answer = '';
while (answer !== 'yes') {
answer = prompt('계속하시겠습니까? (yes/no)');
}
console.log('계속합니다');
예제 3: 카운터
let count = 0;
while (count < 5) {
console.log(`카운트: ${count}`);
count++;
}
3. do-while 문
조건을 확인하기 전에 최소 한 번은 코드를 실행합니다.
기본 형식
do {
// 반복 실행할 코드
} while (조건);
예제
let i = 1;
do {
console.log(i);
i++;
} while (i <= 3);
실행 결과
1
2
3while vs do-while
// while: 조건이 false면 실행 안 됨
let x = 10;
while (x < 5) {
console.log('실행 안 됨');
}
// do-while: 최소 한 번은 실행
let y = 10;
do {
console.log('한 번 실행됨'); // 실행됨!
} while (y < 5);
4. for...in 문
객체의 속성을 순회할 때 사용합니다.
기본 형식
for (변수 in 객체) {
// 반복 실행할 코드
}
예제
let person = {
name: '홍길동',
age: 25,
city: '서울'
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
실행 결과
name: 홍길동
age: 25
city: 서울5. for...of 문 (ES6+)
배열이나 반복 가능한 객체의 값을 순회할 때 사용합니다.
기본 형식
for (변수 of 배열) {
// 반복 실행할 코드
}
예제 1: 배열 순회
let fruits = ['사과', '바나나', '포도'];
for (let fruit of fruits) {
console.log(fruit);
}
실행 결과
사과
바나나
포도예제 2: 문자열 순회
let text = 'Hello';
for (let char of text) {
console.log(char);
}
실행 결과
H
e
l
l
ofor vs for...of
let arr = ['a', 'b', 'c'];
// for 문 (인덱스 사용)
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
// for...of (값만 사용)
for (let value of arr) {
console.log(value);
}
6. 반복문 제어
break 문
반복문을 즉시 종료합니다.
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break; // 반복문 종료
}
console.log(i);
}
실행 결과
1
2
3
4continue 문
현재 반복을 건너뛰고 다음 반복으로 진행합니다.
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue; // 짝수는 건너뛰기
}
console.log(i);
}
실행 결과
1
3
5
7
97. 중첩 반복문
반복문 안에 또 다른 반복문을 사용할 수 있습니다.
예제 1: 구구단
for (let i = 2; i <= 9; i++) {
console.log(`=== ${i}단 ===`);
for (let j = 1; j <= 9; j++) {
console.log(`${i} × ${j} = ${i * j}`);
}
}
예제 2: 별 찍기
// 직각삼각형
for (let i = 1; i <= 5; i++) {
let stars = '';
for (let j = 1; j <= i; j++) {
stars += '*';
}
console.log(stars);
}
실행 결과
*
**
***
****
*****예제 3: 2차원 배열 순회
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
console.log(matrix[i][j]);
}
}
8. 실전 예제
예제 1: 합계 계산
let sum = 0;
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log(`1부터 100까지의 합: ${sum}`); // 5050
예제 2: 배열 요소 처리
let numbers = [10, 20, 30, 40, 50];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log(`합계: ${sum}`); // 150
console.log(`평균: ${sum / numbers.length}`); // 30
예제 3: 최대값 찾기
let numbers = [5, 12, 8, 130, 44];
let max = numbers[0];
for (let i = 1; i < numbers.length; i++) {
if (numbers[i] > max) {
max = numbers[i];
}
}
console.log(`최대값: ${max}`); // 130
예제 4: 배열 필터링
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = [];
for (let num of numbers) {
if (num % 2 === 0) {
evenNumbers.push(num);
}
}
console.log(evenNumbers); // [2, 4, 6, 8, 10]
예제 5: 팩토리얼 계산
let n = 5;
let factorial = 1;
for (let i = 1; i <= n; i++) {
factorial *= i;
}
console.log(`${n}! = ${factorial}`); // 5! = 120
9. 반복문 선택 가이드
for 문 사용 시기
- 반복 횟수를 정확히 알고 있을 때
- 배열을 인덱스로 순회할 때
- 초기화, 조건, 증감이 명확할 때
while 문 사용 시기
- 반복 횟수를 정확히 모를 때
- 조건이 만족될 때까지 반복할 때
- 사용자 입력을 기다릴 때
for...of 사용 시기
- 배열의 값을 순회할 때 (인덱스 불필요)
- 간결한 코드를 원할 때
for...in 사용 시기
- 객체의 속성을 순회할 때
주의사항
1. 무한 루프
// ❌ 무한 루프 (주의!)
let i = 0;
while (i < 5) {
console.log(i);
// i++를 빼먹으면 무한 루프!
}
// ✅ 올바른 코드
let i = 0;
while (i < 5) {
console.log(i);
i++; // 반드시 증감 필요
}
2. 배열 길이 캐싱
let arr = [1, 2, 3, 4, 5];
// ❌ 매번 길이 계산
for (let i = 0; i < arr.length; i++) {
// ...
}
// ✅ 길이를 변수에 저장 (성능 향상)
for (let i = 0, len = arr.length; i < len; i++) {
// ...
}
3. 배열 수정 시 주의
let arr = [1, 2, 3, 4, 5];
// ❌ 반복 중 배열 수정 (예상치 못한 결과)
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 3) {
arr.splice(i, 1); // 배열이 변경되면 인덱스 문제 발생
}
}
// ✅ 역순으로 순회하거나 새 배열 생성
연습 문제
1부터 10까지 출력
- for 문을 사용하여 1부터 10까지의 숫자를 출력하세요.
합계 계산
- 1부터 100까지의 합을 계산하는 프로그램을 작성하세요.
구구단 출력
- 2단부터 9단까지 구구단을 출력하세요.
배열 처리
- 배열
[10, 20, 30, 40, 50]의 합계와 평균을 계산하세요.
- 배열
별 찍기
- for 문을 사용하여 다음과 같은 별을 출력하세요:
* ** *** **** *****
- for 문을 사용하여 다음과 같은 별을 출력하세요:
최대값 찾기
- 배열
[5, 12, 8, 130, 44]에서 최대값을 찾는 프로그램을 작성하세요.
- 배열
다음 장 예고
다음 장에서는 함수(Function)에 대해 학습합니다.
'FrontEnd > Javascript' 카테고리의 다른 글
| 9. 배열 (0) | 2026.01.09 |
|---|---|
| 8장. 함수 (0) | 2026.01.08 |
| 6장. 조건문 (0) | 2026.01.06 |
| 5장. 연산자 (0) | 2026.01.06 |
| 3장. 변수와 상수 (0) | 2026.01.05 |