목차

JavaScript While Loop

  • description : JavaScript While Loop
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-05-31


the source of this article

JavaScript While Loop

The For/Of Loop

Loop는 지정된 조건이 참(true)인 한 코드 블록을 실행할 수 있습니다.

The While Loop

while loop는 지정된 조건이 참(true)인 한 코드 블록을 반복(loop through)합니다.

Syntax

while (condition) {
  // code block to be executed
}

Example

다음 예제에서 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가 끝나지 않습니다. 브라우저가 작동하지 않습니다.

The Do/While Loop

do/while 루프는 while loop의 변형입니다. 이 loop는 조건이 참(true)인지 확인하기 전에, 코드 블록을 한 번 실행한 다음, 조건이 참(true)인 한 loop를 반복합니다.

Syntax

do {
  // code block to be executed
}
while (condition);

Example

아래 예제는 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는 결코 끝나지 않습니다>

Comparing For and While

for loop에 대해 이전 챕터를 읽었다면, while loop가 for loop와 거의 같고, 스테이트먼트 1과 스테이트먼트 3이 생략되어 있음을 알게 될 것입니다.

다음 예제의 loop는 for loop를 사용하여 cars 배열에서 자동차 이름을 수집합니다:

Example

<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를 수집합니다.

Example

<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>
, , ,