반복 횟수가 알려진 블록의 코드를 반복하는 방법입니다.

for 반복문은 특정 횟수만큼 문장을 반복하는 데 유용합니다. 예를 들어, for 반복문은 "다섯 줄 그리기"라는 아이디어를 다음과 같이 쉽게 표한할 수 있습니다:

for (let x = 10; x < 100; x += 20) { line(x, 25, x, 75); }

반복문의 도입부는 키워드 for로 시작합니다. 일반적으로 반복문은 반복할 때마다 증가하거나 감소합니다. 괄호 안의 문장 let x = 10; x < 100; x += 20은 해당 반복문이 어떻게 반복될지를 알려줍니다:

  • let x = 10 은 반복문이 10에서 시작하여 변수 x를 사용하여 반복을 추적하라고 알려줍니다.
  • x < 100 은 반복문이 100에 도달하지 않을 때까지 반복되어야 한다고 알려줍니다.
  • x += 20 은 각 반복의 끝에서 20씩 증가하라고 알려줍니다.

{} 사이의 코드는 반복문의 본문입니다. 이 본문의 문장들은 반복문이 매번 재실행되는 동안 반복됩니다.

종종 실수로 인해, 반복문이 무한 반복을 생성하는 경우가 발생합니다. 그 경우, 스케치가 반응하지 않게 되고 웹 브라우저는 경고를 표시할 수 있습니다. 예를 들어, 다음 반복문은 증가하지 않기 때문에 결코 반복을 멈추지 않습니다:

for (let x = 10; x < 100; x = 20) { line(x, 25, x, 75); }

선언문 x = 20은 변수 x20에 고정시키므로, 이는 항상 100보다 작습니다.

또한 for 반복문은 감소할 수도 있습니다:

for (let d = 100; d > 0; d -= 10) { circle(50, 50, d); }

for 반복문은 다른 반복문을 포함할 수도 있습니다. 다음 중첩 반복문은 점들의 그리드를 그립니다:

// Loop from left to right. for (let x = 10; x &lt; 100; x += 10) { <p> // Loop from top to bottom. for (let y = 10; y &lt; 100; y += 10) { point(x, y); }</p> <p>} </p>

for 반복문은 또한 배열의 요소를 반복하는 데 도움이 됩니다. 예를 들어, 그리기 위한 위치나 내용을 담고 있는 배열을 반복하는 것이 일반적입니다:

// Create an array of x-coordinates. let xCoordinates = [20, 40, 60]; <p>for (let i = 0; i &lt; xCoordinates.length; i += 1) { // Update the element. xCoordinates[i] += random(-1, 1);</p> <p> // Draw a circle. circle(xCoordinates[i], 50, 20); } </p>

배열의 값이 수정되지 않는 경우, for...of문은 코드를 단순화할 수 있습니다. 이 구문은 파이썬(Python)의 for 반복문과 C++ 및 자바(Java)의 for-each 반복문과 유사합니다. 다음 반복문은 동일한 효과를 냅니다:

// Draw circles with a for loop. let xCoordinates = [20, 40, 60]; <p>for (let i = 0; i &lt; xCoordinates.length; i += 1) { circle(xCoordinates[i], 50, 20); } </p> // Draw circles with a for...of statement. let xCoordinates = [20, 40, 60]; <p>for (let x of xCoordinates) { circle(x, 50, 20); } </p>

위의 코드 스니펫(snippet)에서 변수 ix는 다른 역할을 합니다.

첫번째 코드 스니펫에서, i0에서 시작하여 xCoordinates.length보다 하나 작은 2까지 계산합니다. ixCoordinates상의 인덱스 i에 있는 요소에 접근하는 데 사용됩니다.

두 번째 코드 스니펫에서, x는 반복문의 진행 상황이나 인덱스를 추적하지 않습니다. 각 반복 동안, xxCoordinates의 시작 부분인 20에서 시작하여 다음 반복 동안 그 값을 40, 그리고 60으로 업데이트합니다.

예제

Notice any errors or typos? Please let us know. Please feel free to edit src/core/reference.js and open a pull request!

관련 레퍼런스