정의 및 사용법

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

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

초기식

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

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

코드 블록 실행 조건식

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

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

증감식

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

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

구문의 실행 순서

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

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

활용 예제

for 문은 루프 변수를 통해 특정 횟수만큼 코드를 반복 실행하는 데 사용됩니다.
이 반복문의 큰 장점이라고 할 수 있는 것은 배열(Array), 유사 배열 객체(Array-like Objects), 이터러블(iterable) 객체처럼 구성 요소를 가진 대상도 for 문을 사용해 순회하고 접근할 수 있다는 것입니다.

이 점은 자바스크립트의 다른 반복문과 차별화되는 강력한 특징입니다.
다음은 주요 반복문별 순회 대상을 요약한 표입니다.

주요 반복문별 순회 대상
반복문순회 대상
for 문 특정 횟수 반복하는 코드와, 문자열, 배열, 유사 배열 객체 등 인덱스로 접근 가능한 대상
for...in 문 객체의 열거 가능한 모든 속성 이름(키)
for...of 문 이터러블 객체 전반 (배열, 문자열, Map, Set 등)
forEach() 문 배열, Map, Set에 내장된 전용 순회 메서드

이처럼 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 text = "hello";
const textLength = text.length;

for (let i = 0; i < textLength; i++) {
    console.log(text[i]);
}
// 출력: "h" "e" "l" "l" "o"

배열 순회

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

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

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

유사 배열 객체 순회

HTML 
<ul>
    <li>apple</li>
    <li>banana</li>
    <li>cherry</li>
</ul>

querySelectorAll()로 반환된 NodeList 객체는 유사 배열입니다.

JavaScript 
const listItems = document.querySelectorAll("li"); // NodeList, 유사 배열입니다.
const listItemsLength = listItems.length;

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

구문 예제

다음은 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 문은 실행 중인 현재 문을 즉시 종료하고, 다음 코드로 제어를 이동시키는 명령어입니다.

이럴 경우 무한 반복이 발생하지 않도록 조치를 취해야 합니다. 위 예제에서는 무한 반복이 발생하지 않도록 조건문과 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 fruitsLength = fruits.length; // fruits.length를 한 번만 계산

for (let i = 0; i < fruitsLength; 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

참고문헌

같이 보기