자바스크립트로 프로그래밍 입문 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의 조건이 거짓인 경우에만 다음 코드로 넘어갈 수 있습니다.

예제를 살펴봅시다. 아래 코드는 0에서 9까지의 숫자를 console.log를 이용해서 출력합니다.

var count = 0;

while(count < 10){
  console.log(count);
  count = count+1;
}
  1. count라는 변수를 선언하고 0을 대입하였고, while문은 count가 10보다 작은 경우 반복됩니다. 현재 count가 0이므로 count<10이 true이 참이되고 while문 괄호 안 코드를 실행합니다.
  2. count를 출력합니다. 0이 출력됩니다.
  3. count에 1을 더하여 결과값을 count에 다시 대입합니다. count는 1이됩니다.
  4. {}안의 코드를 모두 실행하였으므로 다시 조건(count<10)을 확인합니다. 현재 count가 1이고 조건이 true이므로 다시 while문 {} 안 코드를 실행합니다.
  5. count를 출력합니다. 1이 출력됩니다.
  6. count에 1을 더하여 결과값을 count에 다시 대입합니다. count는 2이됩니다.
  7. {}안의 코드를 모두 실행하였으므로 다시 조건(count<10)을 확인합니다. 현재 count가 2이고 조건이 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의 값이 증가되기 전 값이 added2에 대입되고, 그 후에 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 증가시킴

댓글

이주찬 2020.06.07
0~9까지 숫자 출력하는 반복문 똑같이 쳐봤는데. 마지막에 10이 생겨요... "←10" 이 생기는데 원래 그런건가요?
I
Ian H 2020.06.08
@이주찬,
제일 마지막에 화살표와 함께 표시되는 값은 전체 스크립트에서 마지막 명령어의 return 값입니다.
만약 1+1;2+2; 이라는 스크립트를 실행하면, 1+1이 실행되고, 2+2이 실행되는데, 이때 마지막 명령어의 return 값인 4가 화살표와 함께 표시됩니다. 이 값의 표시는 작성한 스크립트에 의해서 표시되는 것이 아니고, 브라우저가 표시하는 것으로 신경안쓰셔도 됩니다^^(즉 저 값은 console.log에 의해 표시되는 값이 아닙니다)
이주찬 2020.06.10
@Ian H,
그렇군요 ^^ 감사합니다 ㅎ
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP