Loop는 지정된 조건이 참(true)인 한 코드 블록을 실행할 수 있습니다.
while
loop는 지정된 조건이 참(true)인 한 코드 블록을 반복(loop through)합니다.
while (condition) { // code block to be executed }
다음 예제에서 Loop의 코드는 변수 (i)가 10 미만인 한 계속해서 실행됩니다.
<body> <h2>JavaScript While Loop</h2> <p id="demo"></p> <script> var text = ""; var i = 0; while (i < 10) { text += "<br>The number is " + i; i++; } document.getElementById("demo").innerHTML = text; </script> <!-- The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 --> </body>
조건에 사용된 변수를 증가시키는 것을 잊으면 loop가 끝나지 않습니다. 브라우저가 작동하지 않습니다.
do/while
루프는 while loop의 변형입니다. 이 loop는 조건이 참(true)인지 확인하기 전에, 코드 블록을 한 번 실행한 다음, 조건이 참(true)인 한 loop를 반복합니다.
do { // code block to be executed } while (condition);
아래 예제는 do/while
loop를 사용합니다. 조건이 테스트 되기 전에 코드 블록이 실행되기 때문에, 조건이 거짓(false)인 경우에도 loop는 항상 최소 한 번 이상 실행됩니다:
<body> <h2>JavaScript Do/While Loop</h2> <p id="demo"></p> <script> var text = ""; var i = 0; console.log(typeof text); // string console.log(text); console.log(typeof i); // number console.log(i); // 0 do { text += "<br>The number is " + i; i++; } while (i < 10); document.getElementById("demo").innerHTML = text; /* The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 */ </script> </body>
조건에 사용된 변수를 증가시키는 것을 잊지마세요. 그렇지 않으면, loop는 결코 끝나지 않습니다>
for loop에 대해 이전 챕터를 읽었다면, while loop가 for loop와 거의 같고, 스테이트먼트 1과 스테이트먼트 3이 생략되어 있음을 알게 될 것입니다.
다음 예제의 loop는 for
loop를 사용하여 cars 배열에서 자동차 이름을 수집합니다:
<body> <p id="demo"></p> <script> var cars = ["BMW", "Volvo", "Saab", "Ford"]; var i = 0; var text = ""; for (; cars[i];) { text += cars[i] + "<br>"; i++; } document.getElementById("demo").innerHTML = text; /* BMW Volvo Saab Ford */ </script> </body>
다음 예제의 loop는 while
loop를 사용하여, cars 배열에서 car names를 수집합니다.
<body> <p id="demo"></p> <script> var cars = ["BMW", "Volvo", "Saab", "Ford"]; var i = 0; var text = ""; while (cars[i]) { text += cars[i] + "<br>"; i++; } document.getElementById("demo").innerHTML = text; /* BMW Volvo Saab Ford */ </script> </body>