반복 횟수가 알려진 블록의 코드를 반복하는 방법입니다.
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은 변수 x를 20에 고정시키므로, 이는 항상 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 < 100; x += 10) {// Loop from top to bottom. for (let y = 10; y < 100; y += 10) { point(x, y); }
}
for 반복문은 또한 배열의 요소를 반복하는 데 도움이 됩니다. 예를 들어, 그리기 위한 위치나 내용을 담고 있는 배열을 반복하는 것이 일반적입니다:
// Create an array of x-coordinates. let xCoordinates = [20, 40, 60];for (let i = 0; i < xCoordinates.length; i += 1) { // Update the element. xCoordinates[i] += random(-1, 1);
// Draw a circle. circle(xCoordinates[i], 50, 20); }
배열의 값이 수정되지 않는 경우, for...of문은 코드를 단순화할 수 있습니다. 이 구문은 파이썬(Python)의 for 반복문과 C++ 및 자바(Java)의 for-each 반복문과 유사합니다. 다음 반복문은 동일한 효과를 냅니다:
// Draw circles with a for loop. let xCoordinates = [20, 40, 60];for (let i = 0; i < xCoordinates.length; i += 1) { circle(xCoordinates[i], 50, 20); }
// Draw circles with a for...of statement. let xCoordinates = [20, 40, 60]; <p>for (let x of xCoordinates) { circle(x, 50, 20); } </p>위의 코드 스니펫(snippet)에서 변수 i와 x는 다른 역할을 합니다.
첫번째 코드 스니펫에서, i는 0에서 시작하여 xCoordinates.length보다 하나 작은 2까지 계산합니다. i는 xCoordinates상의 인덱스 i에 있는 요소에 접근하는 데 사용됩니다.
두 번째 코드 스니펫에서, x는 반복문의 진행 상황이나 인덱스를 추적하지 않습니다. 각 반복 동안, x는 xCoordinates의 시작 부분인 20에서 시작하여 다음 반복 동안 그 값을 40, 그리고 60으로 업데이트합니다.