for

3개의 선택식으로 구성되어있는 for문은 루프를 생성하고, 그 식 은 괄호로 묶어 세미콜론으로 구분되어 있다.루프 안에는 구문또는 일련의 식이 뒤따르고 있다

문법

for ([initialization]; [condition]; [final-expression])
   statement

initialization

(지정된 식 포함)식 또는 변수 선언. 일반적으로 카운터변수를 초기화 하는데 사용됩니다. 이 식은 선택적으로 var와 키워드와 새로운 변수를 선언 할 수 있습니다. 
이 변수는 루프내의 값이 아닌, 즉 루프와 동일선상에 있습니다. 이 루프가 끝이나면 이 식의 결과는 폐기됩니다.

condition

이 식은 루프가 반복하기 이전에 참 거짓을 평가 합니다.
이 식이 참일경우 for문이 실행됩니다.이 조건테스트는 선택사항입니다. 생략하게되면 조건이 항상 참이 되고 거짓이면 for문의 다음 처음 식으로 건너 뜁니다.

final-expression

이 식은 루프의 반복 끝에서 실행이 된다.
이 식은 다음의 반복하기 직전에 실행된다, 일반적으로 initialization을 업데이트 하거나 카운터 변수를 증가시키는데에 사용된다.

statement

조건이 참일 때 실행되는 문. 루프네에서 여러번의 구문을 실행하려면 ({...})블럭문을 사용하여 그룹화해야합니다. 루프 내에서 문을 실행하지 않으려면 빈문()을 사용하면 됩니다.

예시

for 사용시

다음 for문은 변수 i를 선언하고 0으로 초기화하여 시작합니다.
i가 9보다 작은지를 확인하고 맞으면 명령문을 수행후에 i의값을 1증가 시킵니다.

for (var i = 0; i < 9; i++) {
   console.log(i);
   // more statements
}

표현식의 위치 선택

3개의 식들을 루프의 위에 쓸것인지는 선택사항입니다.

예를들어, initialization에서 변수를 초기화 할 필요가 없습니다:

var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}

initialization부분처럼 condition부분도 선택할수 있습니다. 만약 이 condition부분을 생략하는 경우에는 무한루프를 중단 할 수 있는지를 확인해야합니다.

for (var i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
   // more statements
}

당신은 세가지 모두 생략할 수도 있습니다.
그러기 위해서는 루프를 종료할 수 있도록 하기위해 condition부분의 break문이 참이 될 수 있게 break문과 (증가)변수를 수정해야합니다.

var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

for 에서 빈 구문 사용하기

다음 for 사이클의 [final-expression]섹션에서 노드의 오프셋 위치를 계산하고,
그에 따라 구문 또는 블럭구문 섹션을 요구하지 않고, 빈구문이 대신 사용된다.

function showOffsetPos (sId) {
  var nLeft = 0, nTop = 0;

  for (var oItNode = document.getElementById(sId); // initialization
       oItNode; // condition
       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression
       /* empty statement */ ;
  
  console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
}

// Example call:

showOffsetPos("content");

// Output:
// "Offset position of "content" element:
// left: 0px;
// top: 153px;"

Specifications

Browser compatibility

참조

• break
• continue
• empty
• while
• do...while
• for...in
• for...of