들어가기 전에

프로그래밍을 하다 보면 같은 코드를 여러 번 반복해야 하는 경우가 생기게 됩니다. 그리고 이 때 필요한 것이 반복문이라는 것을 배웠습니다. 그렇다면 어떤 방식으로 프로그램은 코드를 반복해야할지, 혹은 멈춰야할지 알 수 있을까요? 이 때 사용하는 것이 바로 while 반복문입니다.

학습 목표

while 반복문의 작동 방식을 이해하고 적절히 사용할 수 있습니다.

핵심 단어

• while문
• 조건문
  

강의 듣기

반복문이 필요한 이유

다음과 같은 코드를 살펴봅시다.

document.write('<li>1</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>4</li>');

이 코드를 실행하면 화면에 1,2,3,4가 순서대로 뜰 겁니다. 각 줄의 코드가 순서대로 실행되는 것이죠. 그런데 이 때 2번과 3번이 반복적으로 여러 번 실행되어야 한다고 생각해봅시다. 그러면 2번과 3번 코드를 여러번 복사, 붙여넣기를 하면 되겠죠. 하지만 반복 횟수가 아주 커진다면 붙여넣기도 힘들고 코드를 수정하기도 힘들 것입니다. 이 때 사용하는 것이 바로 반복문입니다.

반복문

지금부터 while 반복문에 대해서 알아봅시다. while 반복문은 다음과 같이 사용합니다.

while (???) {
  document.write('<li>2</li>');
  document.write('<li>3</li>');
}

이 때 ???에는 if 문에서 살펴본 것과 같이 불리언 데이터 타입이 들어갑니다. 그리고 이 조건이 true라면 중괄호 안의 코드를 실행합니다. 이 코드를 다 실행하고 나면 다시 처음으로 돌아가서 ???에 들어간 불리언을 살펴봅니다. 이 불리언이 false가 될 때까지 반복해서 코드를 실행하는 것이죠.

즉 반복문과 조건문은 순서대로 실행되는 프로그램의 실행 흐름을 제어하는 제어문입니다.

그렇다면 이제 while문을 사용해서 아까 살펴본 코드에서 2~3번째 줄을 3번 반복한다고 해 봅시다. 이를 위해서 3번 반복했을 때 조건이 false로 바뀌도록 ??? 안을 채워봅시다. 다음과 같이 나타낼 수 있습니다.

document.write('<li>1</li>');
var i = 0;
while (i < 3) {
  document.write('<li>2</li>');
  document.write('<li>3</li>');
  i = i + 1;
}
document.write('<li>4</li>');

초기 상태에서 i는 0입니다. 따라서 while 뒤의 괄호 안에 들어있는 i<3은 true가 됩니다. 그러면 코드가 한 번 실행되겠죠. 코드가 실행되면 i = i + 1에 의해서 i의 값은 1이 됩니다. 이 과정을 3번 반복하면 i는 3이 됩니다. 그렇게 되면 i<3이 false가 되고, 반복문이 끝나고 마지막 8번째 줄이 실행되게 됩니다.

생각해보기

1) 다음 코드의 실행 결과는 무엇일까요?

var i = 0;
while (i < 3) {
  i = i + 2;
}
document.write(i);