자바스크립트 반복문 for, while, do while 간단한 예제

자바스크립트 반복문은 for 반복문은 초깃값, 조건식, 증감식을 한 줄에 작성합니다. while 반복문은 초깃값이 반복문 밖에 위치하며, 증감식이 반복문 내부에 위치합니다. do while 반복문은 실행문을 강제 1회 실행할 때 사용합니다.

자바스크립트 반복문의 필요성

자바스크립트에서 숫자 1부터 100까지 브라우저에서 출력을 하려면 코드를 100번 입력해야 합니다.

<script>
  document.write( 1, '<br>' );
  document.write( 2, '<br>' );
  document.write( 3, '<br>' );

  //...중략

  document.write( 99, '<br>' );
  document.write( 100, '<br>' );
</script>

반복문을 사용하면, 같은 결과를 5줄 이내의 코드로 작성할 수 있습니다.

<script>
  var num;

  for ( num = 1; num <= 100; num++ )
  {
    document.write( num, '<br>' );
  }
</script>

결과

1
2
3
...중략
99
100

자바스크립트 반복문의 종류

대부분 프로그래밍 언어의 반복문은 종류와 형태가 비슷합니다. 자바스크립트의 반복문도 for문, while문, do while문이 있습니다. 반복문은 서로 전환이 가능합니다.

기호 형태 의미
for for (초깃값; 조건식; 증감문) 조건식이 거짓이 될 때 까지 반복
while while (조건식) 조건식이 거짓이 될 때 까지 반복
do while do {실행문} while (조건식) 실행을 선 1회 하고, 조건식 검사로 반복 체크

자바스크립트 for 반복문

자바스크립트 for 반복문은 for () 사이에 작성된 조건에 따라서 {} 사이에 삽입된 실행문이 계속 반복되거나 중단됨을 결정합니다.

<script>
  var num;

  for ( 초깃값; 조건식; 증감식 )
  {
    실행문;
  }
</script>

초깃값은 반복문의 변수에 삽입될 처음의 데이터를 말합니다. 1부터 100을 출력하는 실행문이라면, 초깃값은 1부터 시작할 것입니다.

조건식은 {} 사이의 코드가 계속 반복될지, 중단될지를 결정하는 참/거짓 식입니다. 이면 실행문이 계속 반복되고, 거짓이면 반복문이 종료됩니다.

증감식은 초깃값 즉 변수의 숫자를 변화시키는 역할을 합니다. 1부터 100까지 출력을 하려면 변수값이 1씩 자동으로 증가되야 할 것입니다.

<script>
  var num;

  for ( num = 1; num <= 100; num++ )
  {
    document.write( num, '<br>' );
  }
</script>

변수 num에 초깃값으로 1을 대입합니다. num 값이 100보다 작거나 같으면, 이므로 { } 사이의 코드를 1회 실행합니다. 이후 num값이 num++ 증감식에 의해서 1 증가하고, 다시 처음으로 돌아옵니다. num값이 100보다 커지는 순간 조건식이 거짓이되므로 반복문이 중단됩니다.

자바스크립트 while 반복문

while 반복문은 for문과 구성요소는 같습니다. 초깃값, 조건식, 증감식으로 구성됩니다. 단지 요소의 배치만 위치가 다릅니다.

<script>
  var num;
  num = 초깃값;

  while ( 조건식 )
  {
    실행문;
    증감식;
  }
</script>

초깃값이 조건식 앞에 위치하고, 증감식이 { } 내부에 위치합니다. while () 괄호 사이에는 조건식만 위치합니다.

<script>
  var num;
  num = 1;                               //초깃값

  while ( num <= 100 )                   //조건식
  {
    document.write( num, '<br>');        //실행문
    num++;                               //증감식
  }
</script>

자바스크립트 do while 반복문

do while 반복문은 조건식의 참/거짓과 무관하게 강제로 1회 실행을 해야할 때 사용합니다. for, while 반복문과 마찬가지로 초깃값, 조건식, 증감식의 같은 요소를 포함합니다.

한 가지 차이점은 보통 for, while 반복문은 조건식이 거짓인 경우 {} 블럭 사이의 실행문이 한 번도 실행되지 않을 수 있습니다. 하지만 do while은 조건식의 참/거짓과 무관하게 최초 1회는 강제로 실행시킬 수 있습니다. do라는 값에 실행문, 증감연산자가 위치하고 조건식이 while() 과 함께 do {} 코드 블록보다 뒤에 위치하기 때문입니다.

<script>
  var num;
  num = 초깃값;

  do
  {
    실행문;        //조건식과 무관하게 1회 강제 실행
    증감식;
  }
  while ( 조건식 )
</script>

while 문과 형태는 비슷하지만, 실행문, 증감 연산자이 do {} 코드 블록 사이에 위치하며, while 문보다 앞으로 나옵니다. 이렇게 배치를 하면, do { } 사이의 코드가 while () 의 조건식 보다 앞에 있어서 조건식을 검사하기 전에 코드가 미리 실행될 수 있을 것입니다.

<script>
  var num;
  num = 1;                           //초깃값

  do
  {
    document.write( num, '<br>');    //실행문
    num++;                           //증감식
  }
  while ( num <= 100 )               //조건식
</script>

조건식의 참/거짓과 무관하게 코드를 1회 강제 실행하고 싶은 경우 do while 반복문을 사용합니다. 그 외에 조건식의 필터링을 정확하게 지키고 싶다면 for 또는 while 반복문을 사용하면 됩니다.

내부 참조