본문 바로가기
  • 코딩, 허쌤이 떠먹여 줄게
FrontEnd/Javascript

7장. 반복문

by 허쌤 2026. 1. 7.

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
10

2. 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
3

while 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
o

for 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
4

continue 문

현재 반복을 건너뛰고 다음 반복으로 진행합니다.

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        continue;  // 짝수는 건너뛰기
    }
    console.log(i);
}

실행 결과

1
3
5
7
9

7. 중첩 반복문

반복문 안에 또 다른 반복문을 사용할 수 있습니다.

예제 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. 1부터 10까지 출력

    • for 문을 사용하여 1부터 10까지의 숫자를 출력하세요.
  2. 합계 계산

    • 1부터 100까지의 합을 계산하는 프로그램을 작성하세요.
  3. 구구단 출력

    • 2단부터 9단까지 구구단을 출력하세요.
  4. 배열 처리

    • 배열 [10, 20, 30, 40, 50]의 합계와 평균을 계산하세요.
  5. 별 찍기

    • for 문을 사용하여 다음과 같은 별을 출력하세요:
      *
      **
      ***
      ****
      *****
  6. 최대값 찾기

    • 배열 [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