JavaScript For 루프

루프는 코드 블록을 여러 번 실행할 수 있습니다。

JavaScript 루프

코드를 여러 번 실행해야 하고, 각 번째에 다른 값을 사용할 때는 루프(loop)가 매우 편리합니다。

일반적으로 배열을 사용하는 예제를 만나게 됩니다：

이렇게 쓰지 않아야 합니다：

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

이렇게 쓸 수 있습니다:

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

실제로 시도해보세요

다양한 유형의 루프

JavaScript는 다양한 유형의 루프를 지원합니다:

  • for - 코드 블록을 여러 번 반복합니다
  • for/in - 객체 속성을 탐색합니다
  • while - 지정된 조건이 true일 때 코드 블록을 반복합니다
  • do/while - 지정된 조건이 true일 때 코드 블록을 반복합니다

For 루프

for 루프는 루프를 생성하고자 할 때 자주 사용하는 도구입니다.

for 루프의 문법은 다음과 같습니다:

for (문장 1; 문장 2; 문장 3) {
     실행할 코드 블록
}

문장 1은 루프(코드 블록)이 시작하기 전에 실행됩니다.

문장 2는 루프(코드 블록)이 실행되는 조건을 정의합니다.

문장 3은 루프(코드 블록)이 각 번째 실행 후 실행됩니다.

예제

for (i = 0; i < 5; i++) {
     text += "숫자는 " + i + "<br>";
}

실제로 시도해보세요

위의 코드에서 알 수 있습니다:

문장 1은 루프가 시작하기 전에 변수를 설정합니다. (var i = 0).

문장 2는 루프가 실행되는 조건을 정의합니다. (i는 5보다 작아야 합니다).

문장 3은 코드 블록이 각 번째 실행 후 값을 증가시킵니다. (i++).

문장 1

일반적으로, 문장 1은 루프에서 사용할 변수를 초기화하는 데 사용됩니다. (i = 0).

하지만 이렇지 않은 경우도 있으며, JavaScript는 그렇지 않습니다. 문장 1은 선택 사항입니다.

문장 1에서 여러 값을 초기화할 수 있습니다. (콤마로 구분):

예제

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

실제로 시도해보세요

또한 문장 1을 생략할 수 있습니다. (예를 들어, 루프 시작 전에 값을 설정한 경우):

예제

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

실제로 시도해보세요

문장 2

일반적으로 문장 2는 초기 변수의 조건을 계산하는 데 사용됩니다.

하지만 이렇지 않은 경우도 있으며, JavaScript는 그렇지 않습니다. 문장 2도 선택 사항입니다.

문장 2가 true를 반환하면 루프가 다시 시작되고, false를 반환하면 루프가 끝납니다.

문장 2를 생략하면, 루프에서 반드시 제공해야 합니다. break그렇지 않으면 루프는 결코 끝나지 않습니다. 다음 장에서 break에 대해 더 알아보세요.

문장 3

일반적으로 문장 3은 초기 변수의 값을 증가시킵니다.

하지만 이렇지 않은 경우도 있으며, JavaScript는 그렇지 않습니다. 문장 3은 선택 사항입니다.

문장 3은 어떤 작업을 할 수 있습니다. 예를 들어, 음수 증가(i--), 양수 증가(i = i + 15), 또는 다른 어떤 작업도 가능합니다.

문장 3도 생략할 수 있습니다(예를 들어, 루프 내에서 증가 값을 사용할 때)：

예제

var i = 0;
var len = cars.length;
for (; i < len; ) { 
    text += cars[i] + "<br>";
      i++;
}

실제로 시도해보세요

For/In 루프

JavaScript for/in 문장이 객체의 속성을 순회합니다：

예제

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

실제로 시도해보세요

While 루프

다음 장에서 while 루프와 do/while 루프를 학습할 것입니다.

课外书

더 많은 정보를 원하시면 JavaScript for 문더 많은 정보를 원하시면, JavaScript 고급 강의에서 관련 내용을 읽어보세요:

ECMAScript 반복 문장
반복 문장 또는 루프 문장이라고도 합니다. 이 절에서는 ECMAScript가 제공하는 네 가지 반복 문장을 소개합니다.