자바스크립트로 프로그래밍 입문 13. 반복문(Loop Statement) 2 - for, continue, break,

이번에는 또다른 반복문인 for 문과, 모든 반복문에서 공통으로 사용되는 continue, break 예약어에 대해서 알아봅니다.

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 는 switch와 반복문 안에서만 사용할 수 있는 예약어로 현재 진행중인 코드블럭({})에서 바로 탈출합니다. 아래 코드를 살펴봅시다.

// 이전에 만들었던 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: 반복문, switch 안에서만 사용할 수 있는 예약어로 현재 진행중인 코드블럭({})을 탈출함
  • continue: 반복문 안에서만 사용할 수 있는 예약어로 현재 진쟁중인 반복을 중단하고 반복문의 시작으로 돌아가 반복문의 조건을 다시 확인하고 조건이 참이면 반복문을 처음부터 다시 진행, 거짓이면 반복문을 탈출함

댓글

-
-충한 2020.11.20
continue 설명에 "조건이 만족되지 않는 다면 반복문이 종료됩니다"에서 반복문 종료라는게 break랑 같은 의미인가요?
I
Ian H 2020.11.20
@-충한,
continue 가 실행되고 조건이 만족되지 않는 경우에는 break랑 정확히 동일하게 작동합니다. 해당 부분의 설명을 좀 더 이해하기 쉽게 수정하였습니다^^
댓글쓰기

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

UP