JavaScript

반복문

반복문

인간은 반복적인 작업을 잘하지 못한다. 실수하고, 지루해한다. 컴퓨터는 이런 반복적인 작업을 대행하기 위해서 만들어진 기계다. 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다.

반복문의 문법

반복문의 문법은 몇가지가 있다. 각각의 구문은 서로 대체 가능하기 때문에 상황과 취향에 따라서 선택해서 사용하면 된다.

while

형식은 아래와 같다.

while (조건){
    반복해서 실행할 코드
}

아래의 예제를 실행해보자.

다음 예제는 무한반복을 발생시킨다. 저장되지 않은 작업이 있다면 모두 정리한 후에 이 명령을 실행하자. 웹브라우저는 무한반복을 허용하지 않기 때문에 어느 정도 시간이 흐르면 스크립트를 종료할 것인지 물어볼 것이다.

document.write는 자바스크립트를 이용해서 웹페이지에 텍스트를 출력한다. 이것은 웹브라우저에서만 동작할 것이다. node.js 콘솔과 같은 환경에서 실습을 한다면 console.log와 같은 메소드를 대신 사용한다.
while(true){
    document.write('coding everybody <br />');
}

이번에는 true를 false로 바꾼 아래의 예제를 실행해보자. 아무런 결과도 출력하지 않을 것이다.

while(false){
    document.write('coding everybody <br />');
}

while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다. 조건이 false면 반복문이 실행되지 않는다. 여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다. 반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.

이번 수업의 초입에서 살펴본 반복문의 문법을 해석해보자. 아래의 반복문은 i의 값을 1씩 순차적으로 증가시킴으로서 반복의 지속 여부를 결정하고 있다. 주석으로 첨부한 설명을 주의깊게 살펴보자.

var i = 0;
// 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.
while(i < 10){
    // 반복이 실행될 때마다 coding everybody <br />이 출력된다. <br /> 줄바꿈을 의미하는 HTML 태그
    document.write('coding everybody <br />');
    // i의 값이 1씩 증가한다.
    i++
}

for

형식은 아래와 같다.

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

다음 예제를 보자.

for(var i = 0; i < 10; i++){
    document.write('coding everybody'+i+'<br />');
}

for문은 제일 먼저 '초기화'를 한다. 위의 예제에서 초기화는 var i = 0;이다. 즉 변수 i의 값을 0으로 설정한 것이다. 그 다음에는 '반복조건'인 i < 10이 실행된다. 현재 i의 값은 0이다. 그렇기 때문에 이 조건은 참이다. 반복조건이 참이면 중괄호 안의 내용이 실행된다. i의 값이 0이기 때문에 'coding everybody0<br />'이라는 텍스트가 출력된다. '반복해서 실행될 코드'의 실행이 끝나면 '반복이 될 때마다 실행되는 코드'가 실행된다. i++는 현재 i의 값에 1을 더하라는 의미다. 현재 i의 값은 0이다. 따라서 i++의 결과로 i는 1이 되었다. 그리고 '반복조건'이 실행된다. 현재 i의 값은 1이기 때문에 i < 10은 참이다. 다시 '반복해서 실행될 코드'가 실행된다. 그렇게 반복해서 작업이 실행된다. 이 과정에서 i의 값은 반복 할 때마다 1씩 증가한다. 결국 i의 값이 10이 되는 순간 i < 10을 충족시키지 못하게 되고 반복문은 종료된다.

반복문이 없다면

coding everybody를 10번 반복해서 출력하고 싶다고 한다면 아래와 같이 코드를 작성하면 된다.

document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');

이 정도의 작업은 복사&붙여넣기를 이용해서도 할만하다. 하지만 좀 더 큰 규모의 데이터를 다뤄야 한다면 반복문의 효용이 부각되기 시작한다. 예를들어서 'coding everybody'를 1천번 출력해야 한다면 위의 예제와 아래 예제의 코드 분량에 큰 차이가 생길 것이다.

var i = 0;
while(i < 10){
    document.write('coding everybody <br />');
    i++;
}

만약 반복문 없이 coding everybody 뒤에 숫자를 1부터 10까지 붙이고 싶다면 아래와 같이 코드를 작성해야 할 것이다. 행마다 숫자를 바꿔야 하기 때문에 Copy & Paste도 할 수 없다.

document.write('coding everybody 1<br />')
document.write('coding everybody 2<br />')
//중략
document.write('coding everybody 9<br />')
document.write('coding everybody 10<br />')

반복문에서는 아래와 같이 하면 된다.

var i = 0;
while(i < 10){
    document.write('coding everybody '+i+'<br />');
    i++;
}

coding everybody 뒤에 붙는 숫자를 2의 배수하고 싶다면 어떻게 해야할까? 반복문이 없다면 한줄 한줄 수정해야 할 것이다. 반복문에서는 아래와 같이 내용을 조금만 변경하면 된다.

var i = 0;
while(i < 10){
    document.write('coding everybody '+(i*2)+'<br />');
    i++;
}

반복문의 제어

break

반복작업을 중간에 중단시키고 싶다면 어떻게 해야할까?  break를 사용하면 된다. 아래의 예제는 위에서 살펴본 예제를 일부 변형한 것이다.

for(var i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    document.write('coding everybody'+i+'<br />');
}

위 코드의 결과는 아래와 같다.

coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4

종료조건에 따르면 10행이 출력돼야 하는데 5행만 출력되었다. 2행의 if(i === 5) 에 의해서 i의 값이 5일 때 break 문이 실행되면서 반복문이 완전히 종료된 것이다. 반복문 안에서 break가 실행되면 반복문을 즉시 종료시키는 것이다.

continue

그럼 실행을 즉시 중단 하면서 반복은 지속돼게 하려면 어떻게 해야 할까? 설명이 어렵다면 예제를 보자. 이전 예제의 break를 continue로 변경했을 뿐이지만 결과는 전혀 다르다.

for(var i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    document.write('coding everybody'+i+'<br />');
}

결과는 아래와 같다. 숫자 5가 보이지 않는다. 왜 그럴까? i의 값이 5가 되었을 때 실행이 중단 됐기 때문에 continue 이후의 구문이 실행되지 않은 것이다. 하지만 반복문은 중단되지 않았기 때문에 나머지 결과가 출력된 것이다.

coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4
coding everybody 6
coding everybody 7
coding everybody 8
coding everybody 9

반복문의 중첩

반복문 안에는 다시 반복문이 나타날 수 있다. 다음 예제를 보자. 다음 예제는 00, 01, 02....99 까지를 화면에 출력한다.

// 0부터 9까지 변수 i에 순차적으로 값을 할당        
for(var i = 0; i < 10; i++){
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for(var j = 0; j < 10; j++){    
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i)+String(j)+'<br />');
    }
}

단순히 글자를 반복적으로 출력하기 위해서 반복문을 사용한다고 생각 할 수도 있다. 하지만 반복문의 진가는 배열과 결합했을 때 나타난다. 다음 토픽인 배열에서 반복문의 진가를 살펴보자.

 

 

댓글

댓글 본문
작성자
비밀번호
  1. Pneuma
    3중 for문 돌리는게 훨씬 간략하고 편합니다.

    for(var i=0; i<10; i++){
    for(var j=0; j<10; j++){
    for(var k=0; k<10; k++){
    document.write(String(i)+String(j)+String(k)+'<br />');
    }
    }
    }

    c++에선 1중으로 앞의 0까지 출력할수 있는데 자스는 아직 초보라 모르겠네요
    대화보기
    • Coder
      빨리끝내고 다시 반복하고싶어요
      언제쯤이면 저도 스피드하게 코드를 칠수있는날이ㅋㅋ
    • 3going
      for (var i = 0; i < 10; i++){

      for (var j = 0; j < 10; j++){
      document.write ('coding everybody' + i + j + '<br />');
      }




      }
    • 3going
      var i = 0;

      while (i < 20) {
      document.write('coding everybody'+i+'</br />');
      i++

      }

      for(var k = 0; k <10; k++){
      document.write('coding everybidy'+k+'<br />');
      }
      대화보기
      • 3going
        어째서
        for(var i = 0; i < 10; i++){
        document.write('coding everybody'+i+'<br />');
        }
        이렇게하던
        for(var i = 0; i < 10; ++i){
        document.write('coding everybody'+i+'<br />');
        }
        이렇게 하던 상관이 없는 맥락 인가요??

        첫번째 꺼는 i 가 0 ~ 9 까지 실행 되서 10 개의 'coding everybody' 문장이 출력되고,
        두번째 꺼는 i 가 1 ~ 9 까지 실행 되서 9 개의 'coding everybody' 문장이 출력되서 결과가 달라지는 것 아닌가요??
        ㅇㅏ니면 출력되는 i 의 수 만달라지나요>>??
      • 지나가는 사람
        for(var i = 0; i < 100; i++){
        for(var j = 0; j < 10; j++){
        if(i<10){
        document.write('0'+String(i)+String(j)+'<br ></10>');
        } else{
        document.write(String(i)+String(j)+'<br />');
        }
        }
        }
        대화보기
        • 코딩초보 디자이너
          정밀 감사합니다.
        • 오~~ 이제 슬슬 원리가 하나둘씩 보입니다!
          잘 배우고 가요~ 감사합니다:)
        • 유하
          2019.04.14 완료
        • 취미로 배우는 코딩
          너무 감사합니다.
          마우스를 클릭하면 그림들이 여러가지 모양으로 나타나는 것을 표현하고 싶었는데
          여기에 답이 있었네요
          var sprite_variable = randomIntInRange(1, 3);
          body.render.sprite.texture = "img/dot"+sprite_variable+ ".png";
          막힐때마다 들어와서 보고
          다시 들어보고 하니 답이 나와 너무 좋습니다.
        • Youngnam Ko
          돌파중
        • 크리스티아누 호날두
          Thank you
        • 김현준
          굿굿
        • 도토리묵
          완료
        • 호두
          nested loop
        • 초밥왕
          잘 보고 가요
        • 미완성
          20190108
        • 선시아
          음.. 굳이 01 부터 100까지 숫자로 표현을 하기 위해 i + j 를 사용할 필요가 있을까 싶긴 하지만...

          for (i = 0; i <= 10; i++) {
          for (j = 0; j <= 10; j++) {
          if (i === 0 && j === 0) {
          continue;
          } else if (j === 10) {
          continue;
          } else if ( i === 10 && j > 0 ) {
          break;
          }
          document.write("" + i + j + '</br>');
          }
          }

          이렇게 다시 수정 해봤어요.
          저도 지금 코딩을 배우는 입장이라 ^^;
          제대로 된 건 진 모르겠지만.


          일단 반복문 조건 중간에 'i < 10' 부분을 'i <= 10'으로 바꿨습니다.

          하지만 이렇게 바꾸게 되면.
          09 010 10 , 19 110 20 ... 이런 식으로 n9와 n0 사이에 010 110 210 이렇게 출력이 되어버려요.
          그래서 j === 10 일 때 continue 로 건너 뛰게 해서 출력을 안 하게 만들었어요.

          그리고 i 와 j가 10까지라서.
          100 이후에도 101, 102, 103, 104, 105, 106, 107, 108, 109, 1010 이렇게 출력이 됩니다.
          그래서 i === 10 이면서 j > 0 일 때 break; 써줘서 중단을 시킵니다.

          아, 그리고 else if가 너무 들어간다 싶으면
          if (i === 0 && j === 0 || j === 10 ) { continue; }
          이렇게 || (or)연산자로 합쳐버려도 돼요.
          대화보기
          • 프밥이
            아 00을 맨 처음 제외하고 코딩하는 방법이 있었겠네요!!
            답변 너무 감사합니다.
            01 02 03 04 05 .... 100까지 나오는 것이 만들고 싶은 코드였기에 알려주신 내용을 바탕으로
            좀 더 고민해보겠습니다!
            대화보기
            • 선시아
              for (i = 0; i < 10; i++) {
              for (j = 0; j < 10; j++) {
              if ( i === 0 && j === 0 ) {
              continue;
              }
              document.write("" + i + j + '</br>');
              }
              }


              일단 이렇게 해봤습니다.
              i 와 j 둘 다 0 일 때. ( && 연산자 이용 )
              continue 명령어로 건너 뛰게 만드는 거에요.
              대화보기
              • 프밥이
                for(var i = 0; i < 10; i++){
                for(var j = 0; j < 10; j++){
                if(j === 9){
                //i++;
                //j = 0;
                continue;
                }
                document.write("" + i + (j+1) + "</br>");
                }

                배웠던 코드를 활용해서
                01 02 03 04 05 06 07 08 09 10 ... 이런식으로 진행되는 코드를 만들고 싶습니다.
                if문을 가지고활용하면 될 것 같았는데, 생각처럼 안되네요...
                조금 다르게 생각을 해야한다면 어떤 방법으로 생각해보면 좋을까요?

                }
              • 감사합니다.
              • 스탐
                감사합니다.
              • 내가 이거 다 때고 만다
                위에 10의 자리를 만든것 처럼 k를 하나 더 만들어 gyu 님처럼 그냥 하나만 더 추가하면 되요
                대화보기
                • 간땡이
                  +i+ 하면 0부터 시작하지 않나요?
                • for 문을 3개 쓰는게 어떨까요??

                  이고잉님께서는 i와 j로 변수를 두개 써서 00 ~ 99 까지 만드셨는데

                  for(var i = 0; i < 10; i++)
                  for(var j=0; j<10; j++)
                  for(var k=0; k<10; j++)

                  이렇게 반복문 3개 써서 i는 100의 자리, j는 십의자리, k 는 1의 자리를 표현할 수 있을거같습니다.
                  대화보기
                  • 라라라
                    000
                    001
                    002
                    ......
                    999
                    이런식으로 출력되게 하고 싶어요.
                    조건을 i가 9, j가 9가 됐을 때 맨 앞을 break 해줘야 할 것 같은데 어떻게 해주어야할까요?
                    for보다 while이 맞을 것 같기도 하고 이것저것 해보았지만 다 실패했어요.ㅠㅠ
                  • 최고에요!! 정말 이해가 안갔던 부분을 콕 찝어서 알려주셨어요. 속이 다 시원합니다! 디버깅 방법도 직접 해보니까 너무 재밌어요~
                  • 김다빈
                    따라하면서 하니까 이해가 잘 돼요!
                  • kyleon
                    수요일
                  • Ra Yo
                    감사합니다
                  • 공상철
                    굿 입니다.
                  • 김영민
                    완료
                  • 김정은과문재인이만났다
                    배가고프네요
                  • 올리브
                    20180411
                  • 권규형
                    180403
                  • 안장호
                    감사합니다~! ^^
                  • 듀티프리
                    좋아요. 감사합니다.
                  • nomad코딩
                    <script type="text/javascript">
                    for(var i = 0; i < 10; i++ ){
                    for(var j = 0; j < 10; j++){
                    document.write('coding'+i+j+"<br/>");
                    }
                    }
                    </script>
                    여기에서 'coding'빼고 숫자만 00 01 02 이런식으로 나오게 할 수는 없나요?
                  • 지나가던컴공
                    i++ 은 i = i+1 을 줄여 쓴것입니다. (이렇게 줄여 쓰기로 약속)
                    i+1 은 결과는 +1 되어 나오겠지만 i 값 자체는 변화가 없습니다.
                    즉 아무리 반복해도 0 + 1 입니다.
                    대화보기
                    • 야부키죠
                      왜 i++라고 쓰죠 i+1이라고 안쓰고요
                    • 오수연
                      동영상 너무 감사히 잘 보고 있습니다.
                    • stone
                      응용해봤습니다.

                      var i = 0, sum = 0;

                      while(i < 10){
                      i++
                      sum = sum + i
                      }
                      document.write('1부터 10까지의 합계는 ', sum, '입니다.');
                    • 김진홍
                      감사합니다~~~
                    • Jupi
                      -정리-
                      - 반복문(Loops and iteration)
                      반복 조건이 true면 실행하고, false일때 멈춘다.

                      - while과 for의 차이점
                      while문은 [ ①초기화 ②반복조건 ③반복이 될 때마다 실행되는 코드 ] 의 기입장소가 서로 멀어질 수 있는데,
                      for문 같은 경우,
                      for( ① ; ② ; ③ ) { ~ } 이런 형식으로, while문의 반복조건을 넣는곳에 전부 기입할 수 있다.
                      그러므로, 더 보기 편하고 오류도 줄일 수 있다.

                      - 반복문을 실행 도중에 제어하고 싶을때
                      break 반복문 도중에 만나면 완전히 정지시키고 빠져나간다
                      continue 반복문 도중에 만나면 다시 반복문을 재 실행 시킨다(변수의 초기화는 하지 않음).

                      - 반복문 안에 또 다시 반복문(조건문)이 들어갈수 있다(반대로 조건문 안에 반복문 ok).

                      * ("hello"+i) 이렇게 문자열 hello 와 숫자 i를 결합시킬때, javascript는 숫자를 문자열로 만든다.
                      ** i++ i 를 리턴하고 값을 더한다 | ++i i 의 값을 더하고 리턴한다. /// 밑 코드 참조

                      var x = 3;
                      y = x++; // y = 3, x = 4

                      var a = 2;
                      b = ++a; // a = 3, b = 3
                    • 박인호
                      12-07
                      수강완료.
                      항상 친절한 설명 감사합니다.
                    • 단이
                      -
                    • 코봉
                      쏙쏙 들어와요..
                    • 시니치123
                      강의 잘 봤습니다. 감사합니다~
                    • 고스트프리
                      완료했습니다.
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기