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. 이성준
    엄청 도움이 되었습니다
    감사합니다
  2. Jeong Min Lee
    강의 잘 봤습니다. 감사합니다. ^^
  3. ES6이 발표되면서 interpolation (보간법) 문법이 보다 쉬어졌습니다!

    ES5까지는
    ==> Console.log('Coding everybody' + i + 'everyone');

    이런 식으로 작은 따옴표와 + 를 사용하였는데,

    ES6부터는 ` 키(grave accent 키 - 숫자 1 키 왼쪽의 물결표시 밑) 와 ${ } 의 사용으로 가능합니다.
    ==> Console.log(`Coding everybody ${i} everyone`);

    참고하시길 바랍니다...^^
  4. 은하수
    잘듣고 잘봤습니다. 감사합니다~
  5. 아이노바
    가슴으로 말합니다. 너무 감사합니다.
  6. 고재영
    정말 감사합니다. 큰 도움이 되었습니다.
    대화보기
    • 데헷
      function sumFrom1ToN(n){ //함수 정의
      var count = 1;
      var sum=0;
      while( count<=n ){ // count 변수가 n보다 작거나 같을동안 실행
      sum = sum + count; // sum변수에 count변수를 더해줌.
      count++; // count변수를 1씩 증가
      } // 위로 올라가 while문의 조건이 틀릴때 까지 실행
      return sum; //연산이 끝난 sum을 반환
      } 이정도 인거같습니다
      대화보기
      • 고재영
        function sumFrom1ToN(n){
        var count = 1;
        var sum=0;
        while( count<=n ){
        sum = sum + count;
        count++;
        }
        return sum;
        }

        이코드에 대해서 해설을 부탁드립니다. 공부하면서 조건식이 이해가 되지 않아서요 . 항상 감사드립니다.
      • 공부하자
        정말 쉽게 가르쳐 주세요ㅎㅎ
        항상 감사합니다.
      • 신시내티
        와 디버거 완전 신세계네요. 이고잉님 덕분에 너무 재밌게 배우고 있어요!!
      • 신시내티
        for loop과 while loop의 차이를 확실하고 쉽게 알려주셔서 감사합니다!!!!
      • function
        i값을 0으로 지정해놓고 i++라는것은 i값을 읽을수 없기떄문이구요
        ++i 는 전치연산이기때문에 읽습니다.
        전치와 후치연산의 차이라고나 할까요?
        대화보기
        • vegaplanet
          이 내용을 이보다 더 이해하기 쉽게 알려줄 수 있는 사람이 이고잉님 말고 또 있을까요? 넘나 감사합니다!
        • 이고잉님 수업 정말 최고입니다!!!! 감사합니다~~~
        • 클라라악
          2017/07/03완료
        • Seo Yun Seok Tudoistube
          자바스크립트에서 배열을 사용한 반복문의 진가가 궁금해집니다. 감사합니다^_____^!!!
        • HICHAN
          ㅋㅋㅋ재밌네요. 저도 이렇게 응용해봐야겠어요!
          대화보기
          • 5/22 완료!
          • 장석규
            2017/05/17 완료
          • 우탄
            매일 감사기도 드리는 중
          • 고베베
            조건문~ 반복문~~ 제어문 공부 완료!!!
            정말 감사합니다. 책에서 나오지 않는 이고잉님의 프로그래밍에 대한 깊은 이해와 통찰력이 공부하는데 많은 도움이 되고 있습니다.
          • 도장쾅
            이고잉님 진짜 짱짱맨이세요.... 너무 자상하시고 섬세하시고 명쾌하시고 난리 ㅜㅠㅠㅠ 진짜 밥 고봉으로다가 두 그릇 씩 드세요 ㅠㅠㅠㅠ
          • 이고잉님 정말 짱이에요 감사합니다 엉엉 ㅜㅜ
          • 이 리 ㄴr
            감사합니더~
          • 김소희
            정말 감사합니다!!
            이렇게 좋은일을 하시다니ㅜㅜ
            학원에서 배우고 복습용으로 보는데
            훨씬 머리에 잘들어오네요 ㅎㅎ
            매일 구독하고 있습니다..
            앞으로도 더 좋은정보 기대하겠습니다!!
            화이팅하세요!!
          • 최규선
            20170419 완료! 감사합니다.
          • funlife
            감사합니다.
          • 이승우
            20170330완료
          • SangHyeok Kim
            2017/03/24 수강완료
          • 김세창
            수강완료~~ ㅎㅎ
          • Jin Mi Kim
            break : 중단
            continue : 중단 반복
          • 연금이
            2017.01.12 수강완료
            반복문,제어문,중첩문은 프로그래밍 기본 구성 문법이므로
            여러가지 방법으로 익히기
          • 으노
            break와 contine

            break는 정지
            continue는 건너뛰기

            로 해석하면 쉽겠네요.
          • 임지호
            반복문 : 코드를 반복적으로 실행하게 하는 기술.
            while과 for문이 있다.
            while(반복조건) {실행코드} 이런 문법적 형태를 띄는데 무한루프에 빠지지 않도록 하는 초기화변수와 변수를 증가시키는 코드, 반복조건 코드가 필요하다.
            이것을 한눈에 보기 좋게 표현한 것이 for문이다.
            for(var i=0; i<10; i++) {실행코드}의 형태를 띈다. 반복문은 반복문끼리 그리고 조건문과도 중첩이 가능하다.
            * i++과 ++i의 차이 : i++은 i를 실행하고 i에 1을 더하고 ++i는 1을 더하고 i를 실행한다.
          • 배터지겠여
            반복문 (3/6) for문 강의를 보고, 코드를 아래와 같이 작성해 보았습니다. 혹시나 해서 재미로 다음과 같이 응용해 보았습니다.

            <!DOCTYPE html>
            <html>
            <head>
            <title></title>
            </head>
            <body>
            <script type="text/javascript">
            for (var i = 0; i < 10; i++) {
            document.write("밥주세요~ " + i + " 그릇"+ "<br/>");
            }

            for (var i =9; i <10; i++) {
            document.write("9그릇 다 먹었어요." + "<br />");
            }
            </script>
            </body>
            </html>


            결과는 아래와 같이 나오네요. 지금 배터져 죽을 지경이네여. ㅎㅎ

            밥주세요~ 0 그릇
            밥주세요~ 1 그릇
            밥주세요~ 2 그릇
            밥주세요~ 3 그릇
            밥주세요~ 4 그릇
            밥주세요~ 5 그릇
            밥주세요~ 6 그릇
            밥주세요~ 7 그릇
            밥주세요~ 8 그릇
            밥주세요~ 9 그릇
            9그릇 다 먹었어요.
          • Nosense
            감사합니다.
          • 2달전에 답을 찾으셨을수도 있는데요...

            10으로 나누어서 몫이 0인경우 출력앞에 0을 더 출력하도록 if문을 작성하시면 될것같습니다.
            대화보기
            • 완료!
              완료! 감사합니다~
            • 솔군
              2016.10.06 강의 시청
            • Neal
              항상 강의 잘 보고 있습니다.
              마지막 예제에서 for문을 중첩해서 10의 자리와 1의 자리를 각각 제어하는걸 보여주셨는데,

              단순히 0~99까지의 반복을 실행하되, 그 결과를 처음부터 두 자리로 보여주는 방법(즉 코드의 결과를 출력할때 그 양식을 지정하는 방법)이 혹시 있을까요?

              엑셀이 그나마 가장 익숙한 프로그램이라 엑셀을 예로 들자면, 서식을 변경하여 빈 자릿수를 0으로 채우면 되지 않을까 문득 생각해보다가 드리는 질문입니다.
            • ㄷㅉ
              감사합니다
            • cicada
              감사합니다!
            • yihsang
              감사합니다.
            • kimhomework
              감사합니다
            • CHAMME
              디자인을 전공하고 독학으로 HTML CSS까지 공부하고 있는 취준생입니다.
              HTML CSS 까지는 혼자서 어쩌어찌해서 어느정도 하게되었는데
              JavaScript는 아무리 책보고 해도 이해가 잘 안가더라구요!!
              근데 이렇게 동영상으로 차근차근 이해 잘 되게 설명해주시니까
              훨씬 부담을 덜었습니다!!

              감사합니다!!
            • JustStudy
              고맙습니다
            • 코딩초보
              이고잉님 덕분에 매일매일 배워나가고 조금씩 발전하고 있는 것 같아 기쁘고 항상 감사드립니다.
            • Kyung Ryu
              우와아아.. 정말 너무 감사드립니다.
              웹프로그래밍 3년 전공하고 퍼블리셔로 4년차인데
              아직도 반복문이 이해가 가지 않아서 계속 놓고 있었는데
              이고잉 선생님의 강의로 왜 반복문을 사용하며
              반복문을 어떻게 사용하는지 제대로 정확히 알게 되었습니다.
              정말 최고에요!!!!!
              반복문이 늘 어려워서 개발도 포기하고 퍼블리셔로 하고 있었는데
              퍼블리셔도 반복문을 피해갈수는 없더라구요... 진짜 넘넘 감사합니다ㅠㅠ
              올해는 포기하지 않고 도전해보려고 이 수업을 들었는데
              답답했던 게 확 풀렸다고 할까요... 이고잉 선생님은 은인이십니다 ㅠㅠ
            • Byeong Koo Kang
              좋은 정보 감사합니다.
            • nadia
              네ㅎㅎ
              감사합니다. 화이팅요!

              -------------------------
              다른 동네를 기웃대다(JAVA - 반복문), 저와 같은 질문과 그에 관한 답글을 보고, 나중에 덧붙여둡니다.

              var i = 0;
              i = i++; // 기존의 i 값을 반환하고 i 값을 1 증가시킴. i = i = 0. 그 다음 i 값은 1 증가하지만 i = 0 에 의해 무효화됨.
              i = i++; // 다시 i 를 불러와봐도 증가한 값이 오지 않음. 이미 위에서 i = 0 ; 으로 종료되었으므로.
              i = i++ + i++; // i = 0(i++) + 1(i++) =1. i++에서 0 을 반환하고 1 증가한 i 값이, 뒤이어 i++로 불려올 때는 1 을 반환하고 2 로 증가함. 그러나 i = 1 에 의해 무효화되고 i = 1 ; 로 종료.
              대화보기
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기