주요 내용
검토하기: 반복문
이제 반복문에 관한 수업에서 살펴본 내용을 복습해 봅시다.
프로그램을 만들 때 일정한 코드를 여러번 반복해야 하거나 반복하지만 반복할 때마다 특정 부분을 변경해야 할 때가 있습니다. 그러한 모든 코드를 작성하지 않도록 반복문(loop)을 사용할 수 있습니다. JavaScript에는 두 종류의 반복문, while 반복문과 for 반복문이 있습니다.
while문에서는 특정 조건이 거짓이 될 때까지 코드를 반복합니다. 예를 들어, 아래 예문의 while 반복문에서는 y가 400보다 작으면 (30, y)에서의 y 값이 출력됩니다. 실행될 때마다 y에 20이 더해지며 y는 40으로 시작하여 결국 60, 80, 100, 120 등으로 증가됩니다.
var y = 40;
while (y < 400) {
text(y, 30, y);
y += 20;
}어떤 시점에서 괄호 안의 조건이 거짓이 되는 것이 중요합니다. 조건이 거짓이 되지 않으면 무한 반복문(infinite loop) 상태가 됩니다!
y +=20을 없애면 y는 영원히 40이고 400보다 항상 작으므로 무한 반복문 상태가 되고 프로그램은 언제 멈춰야하는지 알지 못합니다.var y = 40;
while (y < 400) {
text(y, 30, y);
}for문은 while문과 비슷하나 좀 더 특화된 문법이 존재합니다. 프로그래머들은 자신들이 항상 동일한 3가지 일(반복문 카운터 변수(위 예제에서 y)를 생성, 카운터 변수를 특정 수만큼 증가, 카운터 변수가 특정 값보다 작은지를 확인)을 한다는 것을 알게되면서 for문을 만들어 냈습니다. for문의 문법에서는 이러한 세 가지 일을 수행하는 위치가 각각 있습니다. 밑에 있는 코드는 위의 while문과 같은 내용을 for문을 이용해 쓴 것입니다.
for (var y = 40; y < 400; y += 20) {
text(y, 30, y);
}반복문도 내포(nested)될 수 있습니다. 특히 2-d 그림에서 for문을 내포하는 것은 실제로 매우 흔한 일입니다. 격자무늬와 같은 모양을 그리기 쉽기 때문입니다. 반복문 안에 반복문을 내포한다는 것은 프로그램에게 "임의의 일 X를 여러 번 수행하고 X를 수행할 때마다 또한 다른 일 Y도 여러 번을 수행하라"라고 지시하는 것과 같습니다. 격자무늬를 그리는 것을 생각해 보도록 하겠습니다. 프로그램에게 "세로줄을 10번 만들고 각 세로줄마다 그 안에 15개 칸도 생성하라"라고 지시하고 싶습니다. 다음은 내포된 반복문을 사용해 이를 구현하는 방법입니다:
for (var col = 0; col < 10; col++) {
for (var row = 0; row < 15; row++) {
rect(col*20, row*20, 20, 20);
}
}언제 for문과 while문을 사용해야 하는 것일까요? 그것은 여러분께 달려 있습니다. 많은 프로그래머는 for문을 선호합니다. for문을 사용할 경우 우연히 무한 반복문을 생성하기가 더 어렵기 때문입니다. (카운터 변수를 증가시키는 것을 하지 않는 경우는 드뭅니다) 그러나 종종 while문이 더 어울릴 수도 있습니다. 둘 다 사용해보세요!