for 문의 정의 및 사용법

for 문은 특정 횟수나 범위만큼 반복하는 문입니다.
해당 루프에 연계된 초깃값이 있는 루프 변수가 존재하며,
루프 변수의 비교와 증감을 통해 특정 횟수나 범위만큼 코드 블록을 반복해서 실행할 수 있는 반복문입니다.

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

루프 변수란
반복문에서 반복 횟수를 제어하는 데 사용되는 변수입니다.
위 예제에서는 i가 루프 변수입니다. i는 1로 초기화되고, i <= 5 조건이 만족될 때까지 반복됩니다. 각 반복마다 i는 1씩 증가하며, 반복이 종료됩니다.

for 문은 특정 횟수나 정해져 있는 범위만큼 코드를 반복 실행할 때 매우 유용합니다.

구문

for 문은 괄호로 묶이고 세미콜론으로 구분된 세 개의 옵션 표현식과 코드 블록으로 구성되어 있습니다.

JavaScript 
for (초기식; 코드 블록 실행 조건식; 증감식) {
    // 실행할 코드 블록
}

초기식

초기화 구문입니다. 루프 변수의 초깃값을 설정합니다.
이 값은 루프가 시작될 때 한 번만 실행됩니다. 생략 가능합니다.

let 키워드로 선언한 변수는 반복문의 블록 스코프(지역 변수)를 가집니다.

코드 블록 실행 조건식

루프 변수와 비교해서 코드 블록을 실행할 조건식입니다. 생략 가능합니다.

  • 이 조건식이 참(true)이면 코드 블록을 실행합니다.
  • 이 조건식이 거짓(false)이면 for 문은 더 이상 실행되지 않고 종료됩니다.
  • 이 조건식이 생략된다면, 조건식이 참(true)이라고 간주됩니다. 이럴 경우 무한 반복이 발생합니다. 따라서 조건식을 생략하는 것은 주의해야 합니다. 무한 루프를 의도적으로 생성해야 하는 경우가 아니라면, 일반적으로 조건식을 생략하지 않는 것이 좋습니다.

증감식

코드 블록이 실행된 후, 증감식으로 루프 변수의 값을 변경합니다. 특정 횟수나 정해져 있는 범위만큼 코드를 반복할 수 있도록 루프 변수를 증가시키거나 감소시키는 연산을 사용합니다. 생략 가능합니다.

주의하세요!
(초기식; 코드 블록 실행 조건식; 증감식) 여기에서 쓰인 세 개의 옵션 표현식은 선택적으로 사용할 수 있어서 생략 가능하지만, 세미콜론(;)는 생략할 수 없습니다.

구문의 실행 순서

for 문이 실행될 때, 다음의 순서대로 실행됩니다.

  1. 초기화 구문인 초기식이 생략되지 않았다면 초기식이 실행됩니다.
  2. 코드 블록 실행 조건식으로 검사합니다. 이때, 이 조건식이 참(true)이면 코드 블록을 실행합니다. 하지만, 거짓(false)이면 for 문은 더 이상 실행되지 않고 종료됩니다. 이 조건식이 생략된다면, 조건식이 참(true)이라고 간주됩니다.
  3. 코드 블록 실행 조건식이 참(true)으로 검사되었다면 코드 블록이 실행됩니다.
  4. 코드 블록이 실행된 후, 증감식이 생략되지 않았다면 증감식으로 루프 변수의 값을 변경합니다.
  5. 코드 블록 실행 조건식으로 검사하는 두 번째 단계로 되돌아갑니다. 이 후의 단계가 반복됩니다.

예제

for 문을 사용하는 예제를 몇 가지 살펴보겠습니다.

특정 횟수만큼 반복

JavaScript 
/* 1부터 10까지 숫자 출력 */
for (let i = 1; i <= 10; i++) {
    console.log(i);
}
// 1 2 3 4 5 6 7 8 9 10
JavaScript 
/* 10부터 1까지 숫자 출력 */
for (let i = 10; i >= 1; i--) {
    console.log(i);
}
// 10 9 8 7 6 5 4 3 2 1

특정 범위만큼 반복

배열의 길이 범위 내에서 각 요소를 순회하는 경우에 가장 많이 사용됩니다.

JavaScript 
const fruits = ["apple", "banana", "cherry"];
const fruitsLength = fruits.length;

for (let i = 0; i < fruitsLength; i++) {
    console.log(fruits[i]);
}
// "apple", "banana", "cherry"
자바스크립트 length 속성

배열을 순회해서 반복할 때

위 예제처럼 배열의 경우 for 문을 사용하는 경우가 많지만, 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 forEach() 함수를 사용할 경우 가독성이 높고 코드가 간결해지는 장점이 있습니다.

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

fruits.forEach(fruit => {
    console.log(fruit);
});
// "apple", "banana", "cherry"

단순히 배열의 모든 요소를 순회하는 경우에는 for 문보다 forEach() 함수를 사용하는 것이 더 좋습니다. forEach() 함수는 내부적으로 반복을 처리하므로 인덱스를 관리할 필요가 없고, 코드가 더 읽기 쉬워집니다.

자바스크립트 forEach() 함수

그러나 인덱스를 사용해야 하거나 반복을 중간에 멈춰야 하는 경우에는 for 문을 사용하는 것이 더 적합할 수 있습니다.

초기식 없는 for 문

초기화 구문인 초기식은 생략할 수 있습니다. 다음의 예제를 통해 살펴보겠습니다.

JavaScript 
let i = 0;
for (; i < 4; i++) {
    console.log(i);
}
// 0 1 2 3

코드 블록 실행 조건식 없는 for 문

코드 블록 실행 조건식도 생략할 수 있습니다. 다음의 예제를 통해 살펴보겠습니다.

JavaScript 
for (i = 0; ; i++) {
    if (i > 3) {
        break;
    }

    console.log(i);
}
// 0 1 2 3

이럴 경우 무한 반복이 발생하지 않도록 조치를 취해야 합니다. 위 예제에서는 무한 반복이 발생하지 않도록 조건문과 break 문을 사용했습니다.

주의할 점

for 문을 사용할 때 몇 가지 주의할 점이 있습니다.

무한 반복 방지

예를 들어, for 문에서 코드 블록 실행 조건식이 항상 참(true)이면 무한 반복이 될 수 있습니다.
무한 반복이 되면 종료되지 않는 루프로 인해 프로그램이 먹통이 되는 상황을 초래할 수 있습니다.

다음은 무한 반복을 일으키는 for 문의 몇 가지 예시입니다.

조건식이 항상 참인 경우

JavaScript 
for (let i = 0; i >= 0; i++) {
    console.log(i); // 0부터 무한히 증가하며 출력
}

루프 변수가 변경되지 않는 경우

JavaScript 
for (let i = 1; i = 1; i++) {
    console.log(i); // 1만 계속 출력
}

코드 블록 실행 조건식이 생략되고 추가 조치가 없을 경우

JavaScript 
for (let i = 0; ; i++) {
    console.log(i); // 조건 없이 무한 반복
}

잘못된 코드 블록 실행 조건식

JavaScript 
for (let i = 0; i != 10; i--) {
    console.log(i);
}

반복문에서 배열의 길이를 반복적으로 계산하는 코드 블록 실행 조건식

반복문에서 배열의 길이를 반복적으로 계산하는 것은 효율적이지 않습니다. 배열의 길이는 변하지 않으므로 반복문 진입 전에 길이를 변수에 저장하여 사용하면 반복마다 불필요한 연산을 피할 수 있습니다. 이렇게 하면 성능을 향상시킬 수 있습니다.

예를 들어, 다음은 잘못된 예입니다.

JavaScript 
const fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) { // fruits.length를 반복적으로 계산
    console.log(fruits[i]);
}

다음의 예처럼 사용합니다.

JavaScript 
const fruits = ['apple', 'banana', 'cherry'];
const length = fruits.length; // fruits.length를 한 번만 계산

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

이렇게 하면 fruits.length를 한 번만 계산하므로 리소스를 절약할 수 있습니다.

명세서

for 문의 명세서 사양
명세서 사양
for ECMAScript Language Specification
#sec-for-statement

브라우저 호환성

for 문의 브라우저 호환성
문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
for 1 12 1 1

참고문헌

같이 보기