▶ JavaScript Tutorial

JavaScript Loop For

JavaScript Loop For: `for` 반복문의 이해와 활용

JavaScript에서 for 반복문은 특정 코드를 지정된 횟수만큼 반복 실행하는 데 사용됩니다. 반복문은 데이터 처리, 배열 순회, 조건 기반 작업 등을 반복적으로 수행할 때 매우 유용한 제어 구조입니다. 이 가이드는 JavaScript에서 for 반복문의 구조와 다양한 사용 예시를 설명합니다.

1. `for` 반복문의 기본 구조

for 반복문은 세 가지 구성 요소로 이루어집니다: 초기값, 조건식, 증감식. 이 세 가지 요소를 사용해 반복문의 흐름을 제어합니다.

1.1. 기본 구문

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

초기값: 반복을 시작할 때 처음 실행되는 코드입니다. 주로 반복 횟수를 세는 변수를 선언하고 초기화합니다.
조건식: 각 반복이 실행될 때마다 평가되는 표현식입니다. 조건식이 **참(true)**이면 코드 블록이 실행되고, **거짓(false)**이면 반복이 종료됩니다.
증감식: 각 반복이 끝난 후 실행되며, 주로 반복 변수를 증가 또는 감소시키는 데 사용됩니다.

2. `for` 반복문의 예시

2.1. 간단한 카운팅 반복문

1부터 5까지의 숫자를 출력하는 간단한 예시입니다.

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

2.2. 짝수 출력하기

0부터 10까지의 짝수만 출력하는 반복문입니다.

for (let i = 0; i <= 10; i += 2) {
    console.log(i);
}
// 출력:
// 0
// 2
// 4
// 6
// 8
// 10

3. 배열과 함께 사용하기

for 반복문은 배열의 요소를 순회하고 처리할 때 자주 사용됩니다. 배열의 인덱스를 기반으로 각 요소에 접근할 수 있습니다.

3.1. 배열 요소 출력

배열의 모든 요소를 출력하는 예시입니다.

const fruits = ["apple", "banana", "cherry"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// 출력:
// apple
// banana
// cherry

3.2. 배열의 합 구하기

숫자로 이루어진 배열의 모든 요소를 더하는 예시입니다.

const numbers = [10, 20, 30, 40, 50];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log("총합:", sum);  // 출력: 총합: 150

4. 중첩 `for` 반복문

중첩 for 반복문은 반복문 안에 또 다른 반복문을 포함하는 형태로, 주로 이차원 배열(또는 행렬)을 처리하거나, 여러 차원의 데이터를 처리할 때 사용됩니다.

4.1. 구구단 출력하기

for (let i = 2; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
        console.log(`${i} x ${j} = ${i * j}`);
    }
}
// 출력 예시:
// 2 x 1 = 2
// 2 x 2 = 4
// ...
// 9 x 9 = 81

5. `for` 반복문 제어

5.1. `break`

break 문은 반복문을 즉시 종료하고, 반복문 밖의 코드를 실행하도록 합니다.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;  // i가 5일 때 반복문 종료
    }
    console.log(i);
}
// 출력:
// 0
// 1
// 2
// 3
// 4

5.2. `continue`

continue 문은 현재 반복을 건너뛰고, 다음 반복을 계속 실행하도록 합니다.

for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue;  // i가 2일 때 건너뜀
    }
    console.log(i);
}
// 출력:
// 0
// 1
// 3
// 4

6. `for` 반복문 활용 예시

6.1. 팩토리얼 계산

팩토리얼(n!)을 계산하는 반복문입니다.

const number = 5;
let factorial = 1;

for (let i = 1; i <= number; i++) {
    factorial *= i;
}

console.log(`${number}! = ${factorial}`);  // 출력: 5! = 120

6.2. 역순으로 출력하기

1부터 5까지 숫자를 역순으로 출력하는 예시입니다.

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

7. `for...of` 반복문 (ES6+)

JavaScript는 **ES6(ECMAScript 2015)**부터 배열, 문자열, 객체와 같은 이터러블 객체를 순회할 수 있는 for...of 반복문을 지원합니다. for...of는 배열을 순회할 때 더욱 간결한 구문을 제공합니다.

7.1. 배열 순회 예시

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
}
// 출력:
// apple
// banana
// cherry

7.2. 문자열 순회 예시

const str = "hello";

for (const char of str) {
    console.log(char);
}
// 출력:
// h
// e
// l
// l
// o

8. 무한 반복문

무한 반복문은 종료 조건을 주지 않으면 끝없이 반복됩니다. 보통 **while(true)**와 함께 사용되며, 조건이 충족되면 **break**로 반복을 종료합니다.

for (;;) {
    console.log("무한 반복 중...");
    break;  // 이 코드는 무한 반복을 방지하기 위해 사용
}

9. 주의사항

무한 반복에 주의: 종료 조건을 명확하게 설정하지 않으면 무한 반복이 발생할 수 있습니다.
배열의 길이 확인: 배열을 순회할 때 i < array.length와 같은 조건을 정확히 설정하여 배열 범위를 벗어나지 않도록 주의해야 합니다.

요약

for 반복문: 지정된 횟수만큼 코드를 반복 실행하는 기본적인 반복문입니다.
초기값, 조건식, 증감식을 통해 반복문을 제어할 수 있습니다.
배열 및 이차원 배열을 순회하거나 조건에 따라 제어(break, continue)할 수 있습니다.
for...of 반복문은 배열 및 문자열과 같은 이터러블 객체를 순회하는 더 간결한 구문을 제공합니다.

JavaScript의 for 반복문을 효과적으로 활용하면, 데이터 처리와 조건 기반의 반복 작업을 유연하게 제어할 수 있습니다.

코딩 스쿨 JavaScript