자바스크립트로 프로그래밍 입문 12. 반복문(Loop Statement) 1 - while, 증감연산자

Hello World를 3번 출력하는 코드를 만들어 봅시다.

console.log("Hello World");
console.log("Hello World");
console.log("Hello World");

Hello World를 100번 출력하는 코드를 만들려면? console.log("Hello World");를 100번 작성할 수도 있지만 반복문을 사용하면 console.log("Hello World");를 단 한번만 써서 만들 수 있습니다.

이번 강의에서는 while 반복문을 사용해서 코드를 반복시키는 법에 대해 알아봅니다.

while 문

while(조건){
  조건이 참인 경우 이곳의 코드가 반복 실행 됨
}

조건이 참인 경우 괄호({}) 안의 코드를 실행합니다. 여기까지만 보면 if와 똑같지만 while은 {} 코드를 실행한 후 다음코드로 넘어가기 전에 while 문을 다시 반복합니다. while의 조건이 거짓인 경우에만 다음 코드로 넘어갈 수 있습니다.

예제를 살펴봅시다.

var count = 0;

while(count < 10){
  console.log(count);
  count = count+1;
}

1. count라는 변수를 선언하고 0을 대입하였고, while문은 count가 10보다 작은 경우 반복됩니다. count<10이 true이므로 while문 괄호 안 코드를 실행합니다.
2. count를 출력합니다. 0이 출력됩니다.
3. count에 1을 더하여 결과값을 count에 다시 대입합니다. count는 1이됩니다.
4. {}안의 코드를 모두 실행하였으므로 다시 조건(count<10)을 확인합니다. 조건이 true이므로 다시 while문 {} 안 코드를 실행합니다.
5. count를 출력합니다. 1이 출력됩니다.
6. count에 1을 더하여 결과값을 count에 다시 대입합니다. count는 2이됩니다.
7. {}안의 코드를 모두 실행하였으므로 다시 조건(count<10)을 확인합니다. 조건이 true이므로 다시 while문 {} 안 코드를 실행합니다.
8. ...

이런 식으로 count가 10이 될 때까지 진행된 후 count가 10이되면 조건(count<10)이 이 false 되므로 {} 안 코드를 건너뛰고 while 문이 종료됩니다.

즉 0부터 9까지 숫자가 출력되게 됩니다.

증감연산자

위 강의에서 count = count +1;은 count++;로 바꿔 쓸 수 있습니다. ++는 증가연산자로 숫자인 변수의 값을 1 증가 시키는 역할을 하고, 반대로 --는 감소연산자 숫자인 변수의 값을 1 감소시키는 역할을 합니다 이를 둘을 증감연산자라고 합니다. ++나 --를 앞에 붙이느냐 뒤에 붙이느냐에 따라 약간의 차이가 있습니다. ++, --를 앞에 붙이면(이것을 '전치'라고 합니다) 해당값이 먼저 증가된 후 증가된 값을 반환하고, 뒤에 붙이면(이것을 '후치'라고 합니다.) 먼저 값을 반환한 후에 증가됩니다.

연산자	이름	위치	형태	설명
++	증가연산자	전치	++number	number의 값을 1 증가시키고 그 값을 반환함
		후치	number++	number의 값을 반환하고 number의 값을 1 증가시킴
--	감소연산자	전치	--number	number의 값을 1 감소시키고 그 값을 반환함
		후치	number--	number의 값을 반환하고 number의 값을 1 증가시킴

var num1 = 10;
var added1 = ++num1;

console.log(num1, added1);

위 코드를 실행하면 11, 11이 출력됩니다. 최초 num1은 10이였고, ++num1를 통해 num1의 값이 1 증가된 후 이 값이 added1에 대입된 것이죠.

반면,

var num2 = 10;
var added2 = num2++;

console.log(num2, added2);

위 코드를 실행하면 11, 10이 출력됩니다. 최초 num2는 10이였고, num2++를 통해 num2의 값이 증가되기 전 값이 added1에 대입되고, 그 후에 num2의 값이 증가된 것입니다

-- 역시 같은 식으로 숫자를 1 감소시킬 수 있습니다.

아래는 첫번째 예제를 증감연산자를 사용하여 표현한 코드입니다.

var count = 0;

while(count < 10){
  console.log(count);
  count++;
}

사실 이 경우 ++count;로 쓰든 count++; 이 예제는 변화가 없습니다. 어떻게 쓰든 간에 값이 증가된 후에 다시 while문 조건 확인으로 돌아가기 때문이죠. 

무한반복

만약 while문의 조건이 계속하여 참이라면 이 반복문은 무한히 반복됩니다. 이 경우 프로그램이 멈추고 시스템이 다운 될 수도 있으므로 무한반복이 되는 코드는 작성하지 않도록 해야 합니다. 실수로 코드가 무한반복된 경우 빨리 tab을 종료하도록 합시다.

정리 및 요약

• while 문:

  while(조건){
    조건이 참인 경우 이곳의 코드가 반복 실행 됨
  }

• 증감연산자:

  연산자	이름	위치	형태	설명
  ++	증가연산자	전치	++number	number의 값을 1 증가시키고 그 값을 반환함
  		후치	number++	number의 값을 반환하고 number의 값을 1 증가시킴
  --	감소연산자	전치	--number	number의 값을 1 감소시키고 그 값을 반환함
  		후치	number--	number의 값을 반환하고 number의 값을 1 증가시킴