Ian H Blog

for 문

for(초기값;조건;후처리){
  조건 만족시 이곳의 코드가 반복됨
}

for문은 ()안에 ;로 구분된 세가지 부분을 가집니다.

• 첫번째 부분 - 초기값: for 문이 처음 실행될 때 단 한번만 실행되는 코드로, 반복에 관련된 변수들의 초기값을 지정합니다.
• 두번째 부분 - 조건: 이 부분의 결과값이 true면 {}안의 코드가 실행됩니다.
• 세번째 부분 - 후처리: {}안의 코드를 실행하고 이곳의 코드가 실행됩니다. 이곳에서 조건에 관련된 값을 조절한 후 다시 조건을 확인합니다.

아래 코드는 hello world를 3번 출력하는 코드를 for 문으로 작성한 예제입니다.

for(var i=0; i<3; i++){
  console.log("Hello World");
}

초기값 부분에서 I라는 변수를 선언하여 0을 대입하였습니다.(여기서 i는 index의 첫글짜로 for 문에서 관용적으로 사용됩니다.) 조건은 i가 3보다 작을 때이며, 각 반복이 끝날때마다 ++증가연산자로 i의 값을 1 증가시킵니다.

이 코드를 while 문으로 바꾸면 아래와 같습니다.

var i=0
while(i<3){
  console.log("Hello World");
  i++;
}

while 문과 비교했을 때 for 문은 반복문을 작동시키는 변수와 규칙들이 한 곳에 모여있어 코드의 이해가 쉽습니다. 이 때문에 정해진 수만큼 반복하는 경우 보통 for문이 사용되고, 지정되지 않은 수만큼 반복하는 경우 while 문이 주로 사용됩니다.

지정되지 않은 수만큼 반복하는 반복문에 대해서는 다음 항목에서 알아보겠습니다.

break

break 는 반복문 안에서만 사용할 수 있는 예약어로 현재 진행중인 반복을 끝내고 반복문을 탈출합니다. 아래 코드를 살펴봅시다.

// 이전에 만들었던 dice함수를 재사용합니다.
function dice(num){
  return Math.floor(Math.random()*num)+1;
}

// 무한반복문
while(true){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number>4) break;

  console.log("주사위의 값이 4보다 크지 않습니다. 주사위를 다시 굴립니다");
}

while 문의 조건으로 true가 들어갔으므로 while문은 무한히 반복되게 됩니다. 하지만 dice 함수로 생성된 값이 4보다 큰 경우 break문을 통해서 반복문을 멈추게 됩니다.

break 코드가 실행되면 현재 작동중인 반복문이 바로 중단됩니다. 즉, 반복문안 break 이후의 코드들은 실행되지 않습니다.

continue

continue 역시 반복문 안에서만 사용할 수 있는 예약어로, 현재 진쟁중인 반복을 끝내고 후 반복문의 조건을 확인다시 확인합니다. 조건이 만족된다면 다시 반복문을 실행하고, 조건이 만족되지 않는 다면 반복문이 종료됩니다. for문의 경우 continue가 호출되더라도 후처리 과정을 거칩니다.

for(var i=0; i<5; i++){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number>4) continue;

  console.log("주사위의 값이 4보다 크면 이 텍스트가 표시되지 않습니다.");
}

위 코드를 실행시키면 주사위 값이 4보다 크든 적든 무조건 5번 주사위를 굴리지만, 주사위값이 4보다 크면 continue에 의해 나머지 코드가 실행되지 않고 바로 다음 반복으로 넘어갑니다.

혹시 위 코드를 보고,

for(var i=0; i<5; i++){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number<=4){
    console.log("주사위의 값이 4보다 크면 이 텍스트가 표시되지 않습니다.");
  }
}

랑 같은데 왜 continue를 쓰는 건지? 하시는 분도 있으실 텐데, 위 예제는 continue 다음 코드가 1줄 밖에 안되서 continue가 크게 차이가 없습니다. 하지만 continue 다음에 굉장히 긴 여러줄의 코드가 있다고 한다면,

for(var i=0; i<5; i++){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number<=4){
    //굉장히 긴 여러줄의 코드
  }
}

가 되어 코드를 읽을 때 number가 4와 같거나 작지 않은 경우 뒤에 다른 할 일이 있는지 if문 다음 코드를 확인해야 합니다.

for(var i=0; i<5; i++){
  var number = dice(6);
  console.log("주사위 눈금: "+number);

  if(number>4) continue;

  //굉장히 긴 여러줄의 코드
}

로 되어 있다면 continue가 나온 지점에서 나머지 코드는 확인할 필요도 없이 바로 다음 반복으로 넘어갈 수 있습니다. 즉, continue는 가독성을 높히기 위해 사용한다고 할 수 있겠습니다.

i=0? i=1?

for 문으로 5번 반복하는 코드를 작성할 때 for(var i=0; i<5; i++){ ... }와 같이 작성했는데, 혹시 for(var i=1; i<=5; i++){ ... } 이렇게 작성하는 게 더 쉽지 않나? 하고 생각하실 수도 있습니다. 첫번째 처럼 작성하면 i는 0부터 4까지 변화하면서 5번 반복되고, 두번째 처럼 작성하면 i는 1부터 5까지 변화하면서 5번 반복하게 됩니다.

일반적으로 수를 셀 때 1부터 세기 때문에 두번째가 더 맞는 것 같지만, 프로그래머들은 숫자를 0부터 세는 것이 더 익숙합니다.

나중에 배울 '배열'이라는 개념때문인데요, 배열에서 순서가 0번부터 시작합니다. 배열과 반복문은 같이 쓰이는 일이 많으므로 보통 반복문을 만들 때 0부터 시작하도록 만드는 것이 편리합니다. 이부분은 배열에서 다시 살펴보도록 하고, 일단은 반복문을 만들 때 0부터 시작하도록 연습합시다.

물론 반복문 내에서 쓰이는 수가 1부터 시작하는 경우에는 i=1로 하셔도 됩니다. (연습문제 12의 Fizz Buzz같은 경우)

정리 및 요약

• for 문:

  for(초기값;조건;후처리){
    조건 만족시 이곳의 코드가 반복됨
  }

• break: 반복문 안에서만 사용할 수 있는 예약어로 현재 진행중인 반복을 끝내고 반복문을 탈출함
• continue: 반복문 안에서만 사용할 수 있는 예약어로 현재 진쟁중인 반복을 끝내고 후 반복문의 조건을 확인다시 확인하여 반복문을 처음부터 다시 진행함

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 = count +1;은 count++;로 바꿔 쓸 수 있습니다. ++는 증가연산자로 숫자인 변수의 값을 1 증가 시키는 역할을 하고, 반대로 --는 감소연산자 숫자인 변수의 값을 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 증가시킴