JavaScript for 문

정의와 사용법

for 문은 조건이 참이면 루프를 실행합니다.

조건이 참이면 루프가 계속 실행됩니다. 조건이 거짓이 되면 멈춥니다.

JavaScript는 다양한 형태의 루프를 지원합니다：

  • for - 여러 번 반복하는 코드 블록
  • for/in - 객체의 속성을 순회
  • for/of - 循环遍历可迭代对象的值
  • while - 在指定条件为真时循环代码块
  • do/while - 循环一次代码块，然后在指定条件为真时重复循环

提示：请使用 break 语句跳出循环，使用 continue 语句跳过循环中的某个值。

예제

루프 코드 블록을 다섯 번 실행:

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

자신이 직접 시도해보세요

페이지 아래에 더 많은 TIY 예제가 있습니다.

문법

for (statement 1; statement 2; statement 3) {
  실행될 코드 블록
}

매개변수 값

매개변수 설명
statement1

선택 사항. 루프(코드 블록)가 시작하기 전에 실행됩니다. 일반적으로 이 문장은 계산기 변수를 초기화하는 데 사용됩니다. 여러 값을 초기화하려면 각 값을 콤마로 구분하세요.

비고:이 매개변수는 생략할 수 있습니다. 그러나, 세미콜론 ";"를 생략하지 마세요.
statement2

선택 사항. 루프(코드 블록)를 실행하는 조건을 정의합니다. 일반적으로 이 문장은 계산기 변수의 조건을 평가하는 데 사용됩니다. true를 반환하면 루프가 다시 시작되고, false를 반환하면 루프가 끝납니다.

비고:이 매개변수는 생략할 수 있습니다. 그러나, 세미콜론 ";"를 생략하지 마세요. 또한, 이 매개변수를 생략하면 break를 루프 내에서 제공해야 합니다. 그렇지 않으면 루프가 결코 끝나지 않으며, 이는 브라우저가 고장날 수 있습니다.
statement3

선택 사항. 루프(코드 블록)가 실행된 후에 실행됩니다. 일반적으로 이 문장은 계산기 변수를 증가하거나 감소시키기 위해 사용됩니다.

비고:이 매개변수는 생략할 수 있습니다 (예: 루프 내의 값을 증가/감소).

기술 세부 사항

JavaScript 버전: ECMAScript 1

더 많은 예제

예제

루프가 배열의 인덱스를 순회하며 cars 배열에서 자동차 이름을 수집:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

자신이 직접 시도해보세요

예시 설명:

  • 먼저, 루프 시작 전에 변수를 설정합니다 (var i = 0;)
  • 그런 다음, 루프가 실행되는 조건을 정의합니다. 변수가 배열의 길이보다 작을 때만 루프가 계속됩니다
  • 루프가 실행될 때마다 변수가 하나 증가 (i++)
  • 변수가 4보다 작지 않으면 (배열의 길이), 조건이 거짓이 되어 루프가 끝납니다

예제

첫 번째 매개변수에서 여러 값을 초기화:

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

자신이 직접 시도해보세요

예제

첫 번째 매개변수를 생략 (루프 시작 전에 값을 설정):

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

자신이 직접 시도해보세요

예제

continue 문장 사용 - 루프 코드 블록을 사용하지만 "3" 값을 건너뜀:

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "The number is " + i + "<br>";
}

자신이 직접 시도해보세요

예제

break 문을 사용하여 - 반복문 내의 코드를 실행하지만 변수 i가 "3"에 도달할 때까지 나갑니다：

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "The number is " + i + "<br>";
}

자신이 직접 시도해보세요

예제

두 번째 매개변수를 생략합니다. 이 예제에서는 또한 i가 "3"에 도달할 때까지 break 문을 사용하여 반복문을 종료합니다（두 번째 매개변수를 생략하면 반복문 내에 break를 제공해야 합니다. 그렇지 않으면 반복문이 끝나지 않고 브라우저가 고장날 수 있습니다）：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

자신이 직접 시도해보세요

예제

인덱스를 내림차순으로 순회합니다（음수 감소）：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

자신이 직접 시도해보세요

예제

마지막 매개변수를 생략하고 반복문 내에서 증가시킵니다：

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

자신이 직접 시도해보세요

예제

NodeList 객체의 노드를 순회하며 목록에 있는 모든 <p> 요소의 배경색을 변경합니다：

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

자신이 직접 시도해보세요

예제

나누어져 있는 반복문 예제（반복문 내의 반복문）：

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

자신이 직접 시도해보세요

브라우저 지원

문장 Chrome IE Firefox Safari Opera
for 지원 지원 지원 지원 지원

관련 페이지

JavaScript 강의:JavaScript For 루프

JavaScript 참조 설명서:JavaScript for ... in 문

JavaScript 참조 설명서:JavaScript break 문

JavaScript 참조 설명서:JavaScript continue 문

JavaScript 참조 설명서:JavaScript while 문