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달전에 답을 찾으셨을수도 있는데요...

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

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

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

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

      -------------------------
      다른 동네를 기웃대다(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 ; 로 종료.
      대화보기
      • 이웃집토토로
        음... 논리적으로 순서따져보셔서 틀린 부분이 없으면

        일단은 맞다고 보시고 넘어가면 어떨까싶어요ㅎㅎ

        제가 좋은 예제만들 정도 실력이 되면 좋았을텐데

        저도 명확히 설명이 불가능해 좀 아쉽네요... 저도 코딩 시작한지는 얼마 안되어서...

        여튼 결론은 '전(후)위 증감 연산자' 사용 시에 이미 i= i+1 인데 여기에 i= 를 또 붙여주고

        이것을 사용하려고 하면 값에 차이가 있다는 것입니다.

        그런데 그 차이라는게 변수가 1개냐 2개냐에 따라서 눈으로 안보일 수도 있고

        반복문을 쓰냐 안쓰냐에 따라서도 달라진다는 것입니다.

        이건 결국 인간의 자연어를 컴퓨터가 이해하는 기계어로 바꾸는 과정에서

        변수와 수식의 정의를 어떻게 내리냐에서 기인하는 문제인데

        일반적으로 인간세계에서 x = x = a + 1 이런 식이 일반적으로 사용되지 않을 뿐더러

        이렇게 사용하는 경우 원래라면 프라임(') 이나 초기값(init아래첨자) 등을 붙여서

        구분해줘야하는데 컴퓨터 프로그래밍에서는 그런 애매한 언어(자연어라고 합니다)를

        이해하고 처리하기가 매우 어렵거든요. 그래서 10 * 10 도 바로 100이라고는 나오지만

        사실은 10을 10번 더하고 있는 사실처럼 ....

        그러다보니 애매한 정의가 나오면 그걸 최대한 단순화해서 인간만 아는 의미를

        쪼개어서 표현하고.... 그래야할 것 같네요 .... 역시나 말빨이 안서는군요.....

        화이팅합시다!
        대화보기
        • 토토로님 친절한 설명 감사합니다^^
          댓글 열어보고 저도 "와 이거뭐야 잠깐만....생각좀..."하면서 한동안 다운이었었네요ㅋ
          설명에서 많은 힌트를 얻었음에도 불구하고, 하지만 제가 아직도 잘 이해를 못하고 있는 부분은
          "i = i + +는 여기서 의미상 i=i=i 가 됩니다.
          프로세스에 집중하면 아실 수 있습니다. " 입니다.

          아래는 제가 설명을 이해하기 위해 끙끙대 본 과정입니다. 혹시나 다른 사람에게라도 참고가 될까 싶어 남겨두지만, 그냥 패스하고 점선 아래로 내려가셔도 됩니다.
          -----------------------------------

          i++ 뜻(제가 이해한 바): 기존의 i값을 i에 넣어서 연산/처리해라. 그리고나면 i값을 1 증가시켜놔라

          var i=1; i=i++; document.write(i); // 1 출력.
          /* 위의 i++ 뜻을 가지고 출력결과를 이해해보자면,
          1을 i에 대입하고 그 i를 다시 i에 대입해라. (1->i-> i. i는 1이 됨)
          그리고나면 i를 1 증가시켜놔라. (이제 i값은 2가 되었으나 출력값이 1인 걸 보면, 처리순서에 따라 i값을 먼저 출력하고, 증가된 i값은 잠정적으로 할당되어 있는 듯함)

          이 생각이 맞다면 한번 더 i가 출력되게 했을 때 i값은 2가 나와야 함 */

          document.write(i); // 1 그대로임.
          /* '='을 써서 i값이 명시되는 과정이 있어야 하나 싶어, 식을 먼저 써주고 한번 더 i가 출력되게 함 */

          var i=1; i=i++; document.write(i);
          i=i++; document.write(i); // 1 그대로임.
          /* i값은 증가된 적이 없는 듯함 */

          /* 변수 2개로 테스트해봄 */

          var i=1; j=i++; document.write('j:'+j+' i:'+i+'</br>'); // j:1 i:2 출력
          /* 1을 i에 대입하고 그 i를 다시 j에 대입해라. (1->i-> j. j와 i는 1이 됨)
          그리고나면 i를 1 증가시켜놔라. (이제 i는 2가 됨)
          이해한 바대로 출력됨. 한번 더 반복해봄 */

          j=i++; document.write('j:'+j+' i:'+i+'</br>'); // j:2 i:3
          /* 순조롭게 증가. 반복문으로 활용 가능. 이제 j자리를 전부 i로 바꿔 봄 */

          var i=1; i=i++; document.write('i:'+i+' i:'+i+'</br>'); // i:1 i:1
          i=i++; document.write('i:'+i+' i:'+i+'</br>'); // i:1 i:1
          /* i를 1 증가시키라는 명령은 무시되는 듯함.*/

          ---------------------------------
          이상을 가지고 제가 정리해보기로는,

          i=i++ 을 쓰게 되면,
          기존의 i값을 i에 대입하고 그 i를 다시 i에 대입하라는 명령(기존i값->i->i)에 이어,
          i값을 1증가시키라는 명령(i+1)이 오는데,
          하나의 변수에 대해 이 두 개 명령이 오게 되면, 그때 그냥 후자는 무시된다(잠정적으로 처리되는 것도, 충돌해 에러를 빚는 것도 아니라).
          따라서 i는 계속 처음값 그대로 유지되며, 그래서 반복문을 종료하는 조건에 이르지 못하고 무한루프가 됨.


          말씀하신 게 이런 의미가 맞을까요?;

          써놓고 보니 참 무용한 질문으로 여러 사람의 시간을 뺏고 있는 것 같아 민망합니다;
          마지막에 덧붙여주신 조언도 잘 새겨들을게요. 감사합니다.
          대화보기
          • 이웃집토토로
            제가 여기저기서 얻어온 교훈에 따르면

            스킬에 익숙해지실거면 이러한 내용의 이해없이 그 차이를 감각적으로 이해하셔도 됩니다.
            문제가 생겼을 때 디버깅 과정에서 예제문을 비교해보니 값이 차이가 나더라...
            앞으로 이렇게 쓰자 정도만 알면 되니까요
            쉽게 프로그래밍하나 어렵게 프로그래밍하나 퍼포먼스는 비슷한데 시간이 차이나면
            쉽게 프로그래밍 하는 것이 좋다고 합니다. 문제를 빠르게 해결하고 넘기는 능력,
            이것도 프로그래머로의 뛰어난 자질과 능력이니까요

            반면 원리를 이해하는데 익숙해지실거면 차이를 분석하고 다른 것에 적용할 줄 알아야 합니다.
            프로그래머가 해결하지 못한 문제를 원리로 접근해 해결하거나
            설계상에서 보다 더 좋은 방식을 제시할 수 있습니다.

            둘의 차이는 영역의 차이이지 실력의 차이가 아닙니다.
            실력은 개개인마다 다른거니까요. 참고로 대부분 첫번째 유형의 프로그래머가 많이 필요합니다.
            설계하고 제시하는건 적은 수로도 되니까요. 아예 전문적으로 이런 알고리즘만 연구하는
            컴퓨터 과학자들도 있으니 , 현업에서는 쉽게 코딩하고 쉽게 이해시기고 하는게 중요하다고합니다.

            ......... 근데 저는 왜 이런것에 관심이 있는지 참........
          • 이웃집토토로
            정작 궁금해하신 표기법에 대해 설명이 부족한 듯 하여 추가해봅니다.

            i = i++ 나 i = ++i 가 안되고 차이가 나는 이유는
            우선 아래를 계산시켜보면 컴퓨터가 계산한 결과를 보고 역으로 유추하면 됩니다.
            그런데 결론에 적었 듯 이러한 프로그래밍을 안하시는게 정신건강 상 좋습니다.

            -----------------------------------------------------------------------
            ■ 변수가 하나인 비반복문 i=i++ 만 결과가 달라지는 이유
            -----------------------------------------------------------------------
            var i=1; + + i; document.write(i+'</br>'); // 2 출력
            var i=1; i = + + i; document.write(i+'</br>'); // 2 출력
            var i=1; i + +; document.write(i+'</br>'); // 2출력
            var i=1; i = i + +; document.write(i+'</br>'); // 1출력

            먼저 i = i + + 가 1이 출력된 이유입니다.
            i = i + +는 여기서 의미상 i=i=i 가 됩니다.
            프로세스에 집중하면 아실 수 있습니다.

            여기서는 단 한번만 시행하기 떄문에 루프가 없습니다.
            다만 i=i++ 자체가 무의미해서 i를 출력하는 것입니다.
            그러나 반복문에서는 네가지 경우가 차이가 생깁니다.

            -----------------------------------------------------------------------
            ■ 변수가 2개인 비반복문 i=i++ 만 결과가 달라지는 이유
            -----------------------------------------------------------------------
            var i=1;++i;var j=i; document.write(j+'</br>'); // 2출력
            var i=1;i=++i;var j=i; document.write(j+'</br>'); // 2출력
            var i=1;i++;var j=i; document.write(j+'</br>'); // 2출력
            var i=1;i=i++;var j=i; document.write(j+'</br>'); // 1출력

            비반복문에서 차이가 발생하는 이유는 변수와 상관 없이 같습니다.


            -----------------------------------------------------------------------
            ■ 변수가 1개 인 반복문
            -----------------------------------------------------------------------
            변수가 1개일 때 i=i++는 반복문에서 차이가 있습니다.

            for (var i=1; i<5; i=i++){document.write(i+'</br>');}
            이렇게 써버리면 컴퓨터는 "와 이거뭐야 잠깐만....생각좀..."하면서 무한루프때립니다.

            변수가 1개뿐이기에 i=++i는 나머지 i++ , ++i와 결과가 같습니다.
            i=++i 는 for (var i=1; i<5; i=i++){document.write(i+'</br>');} 라고 쓸 때 잘만 돌아갑니다.
            컴퓨터가 보기에 i=i++ 는 i=i=i+1... 즉 i=i+1 이기 떄문입니다.
            때문에 i++ , ++i 와도 결과가 1,2,3,4로 같습니다.

            이 셋이 같은 이유는 변수가 i 하나만 있기 때문입니다.


            -----------------------------------------------------------------------
            ■ 변수가 2개 인 반복문
            -----------------------------------------------------------------------
            그렇다면 그 차이를 알기 위해 변수 j를 하나 더 추가하고 i에 대해서가 아닌
            j에 대해서 출력 해봅시다.

            var i = 1; var j=i++;
            while(i < 5){
            document.write('j값:'+j+'<br />'+i+'</br>');
            i++;
            }

            여기서 j = i++ 를 하던 j = ++i 를 하던 i 값은 차이가 없습니다.
            j값은 원래 전위연산자 후위연산자의 정의대로 당연히 차이납니다.
            여기서 j = i = i ++ 나 j = i = ++ i 를 넣으면 또 다시 차이가 납니다.
            위에 변수가 1개인 조건문과 달리 변수가 2개인 반복문이니 차이가 날 수 밖에 없지요.

            -----------------------------------------------------------------------
            ■ 결론
            -----------------------------------------------------------------------
            차근차근 그림을 그리면서 따라오시면 이해가 가실겁니다.
            근데 그냥 i=i++ 같은식은 쓰지 마시기 바랍니다.
            암유발할 수 있습니다.
          • 이웃집토토로
            둘을 전위연산자(++i) / 후위연산자(i++)라고 부르더군요.
            강의의 예제처럼 변수를 1개로만하면 둘의 구분이 어렵고요.
            변수를 하나더 추가한 예제 알려드릴게요
            -----------------------------------------------------------------------
            전위연산자[ i = 1; j= ++i ] 결과값은 [ i = 2 , j = 2]
            후위연산자[ i = 1; j= i++ ] 결과값은 [ i = 2 , j = 1]
            -----------------------------------------------------------------------
            i값이 차이 나는 이유는 전위연산자는 i를 초기값이 아닌 연산 후 값을 표기하는 것이고
            후위연산자는 i값은 초기의 i값을 표기 하는 것입니다.
            연산방식을 순서대로 표현해보면 훨씬 이해가 쉽습니다.
            이건 말로 들으면 더 헷갈리니 직접 해보세요
            -----------------------------------------------------------------------

            [전위연산자++i 는 한마디로 계산된 i값으로 j에 집어넣는 것]
            1. i값에 1을 더해라 (i=2가 됨)
            2.더해진 i값으로 j를 정의해라 (j=2가 됨)


            [후위연산자i++ 는 한마디로 i값 더하기 전에 j를 정의해서 출력]

            1. j 값을 먼저 첫번째 i 값으로 정의하라(i=j=1이 됨)
            2. i값에 1을 더해라 (i=2가 됨)

            -----------------------------------------------------------------------
            보통 연산 시에 초기변수값을 바꿔버릴 필요는 없으니까
            둘 다 써도 되는 상황에서는 전위연산자가 프로그래밍 상 효율적이라고 합니다.
            대화보기
            • 설명이 큰 도움이 되었습니다. 감사합니다^^
              다만 제가 연산논리에 익숙하지 않아서인지, ' i에 i를 대입한 뒤 i를 1 증가시킨다(i = i++) '라고 했을 때, 'i에 i를 대입한 뒤 (좌변의 i든 우변의 i든) 변수 i를 전부 1 증가시킨다'라고는 해석되지 않는건가 살짝 궁금함이 남네요;
              대화보기
              • 행인
                이부분은 저도 내부적으로 어떻게 연산되는지 몰라서 확답은 못드리겠습니다만, i++ 자체가 i = i + 1이라는 연산을 단항연산자로 줄여놓은것입니다. 더 깊이들어가보면 i++은 어떤 연산을 할때 i값을 사용하고, 연산이 종료되면 i를 하나 증가시키는 연산자구요, 이와 비슷한 ++i는 해당 줄을 연산하기 전에 i를 하나 증가시키고 연산을 수행합니다.
                예를 들어 i = 3; j = 2 * i++; 일경우 i = 4, j = 2 * 3 = 6이 되구요, i = 3; j = 2 * ++i; 의 경우 i = 4, j = 2 * 4 = 8이 됩니다.
                여기서부터는 제 생각입니다만 i = i++를 했을경우에 풀어보자면 'i에 i를 대입한뒤 i를 1증가시킨다'인데, 둘다 i이기 때문에 i를 1.대입한 값으로 인식하느냐 아니면 2.증가한 값으로 인식하느냐에 문제에 걸리게됩니다. 이와 다르게 i = ++i의 경우 i를 1증가시킨 뒤, i에 대입한다이기 때문에 i가 증가되는 하나의 결과를 얻게되죠.
                결론적으로 말씀드리면 i=i++가 아니라 i++(이것이 i = i +1이므로) 형태로 입력하셔야 합니다
                대화보기
                • upstairGirl
                  알음알음 알고 있어서 헷갈린 부분이 많았는데 확실히 이해됬어요!
                  마지막 부분은 댓글로 확실히 알았네요 ㅎㅎ 헤헤
                  고맙습니다~
                • i++의 뜻이 i값에 1을 더하는 것이라고 해서 for문 안에 i = i+1 대신 i = i++ 라고 써봤는데요,
                  for (var i = 0; i < 10; i = i++) { ~
                  에러가 뜨는 것도 아니고 창이 계속 실행중 상태에 있다가 다운되어 버리네요.
                  그런데 신기하게도 i = i++이 아닌 i = ++i를 넣으면 제대로 작동합니다.
                  둘의 차이를 잘 몰라서 그런지 이유를 도무지 모르겠네요;
                • 리치
                  감사합니다
                • 엔트
                  감사합니다!!
                • 안광현
                  말로만 설명하면 이해하기 어려웠을 텐데 디버깅 과정을 보며 명령문의 처리과정을 눈으로 볼 수 있으니 이해가 한결 쉽네요!
                • 히믈내요
                  기본 형태가 for ( ~~ ) { 여기 반복 } 인 거잖아요!
                  그렇기때문에 i가 0일때 첫 번째 { 반복 구간 } 에 있는게 실행되는 거죠!

                  그런데 그 첫번째 반복구간에 있는걸 실행한다고 할 때

                  다시 for (~~) {반복} 이 나오는 거니까 여기서 반복할 수 있을 만큼 다 하고..!
                  두번째 for 밖으로 나가 다시 첫번째 for 의 조건을 적용시키고 나서 두번째 for 로 들어오는거죠
                  대화보기
                  • 간단한거노
                    마 별거 아입니다. J가 I의 구문 안에 들어가있기 땜시로 딱! I가 실행된 후에 안의 J가 실행되믄서 J < 10 이게 계속 돌아가부리는것이죠. 하하하! 쉽지요?
                    대화보기
                    • 다시 차근 차근 공부하는 중이에요... 재밌어요~ 활용은 잘 할 수 있을진 모르겠네요... ㅋㅋㅋㅋ
                    • 윤석진
                      어려워용 그치만 한편으로는 재미있네요 ^^ 감사합니다~!!
                    • ㅠㅠㅠㅠㅠㅠ
                      감사합니다 ㅠㅠㅠㅠㅠㅠ
                      대화보기
                      • vaporize93@gmail.com
                        네네, 이해하신게 맞아요. 처음에 (i (jjjjjjj..) i (jjjjj....) i (jjjjj..) ...) 이런 모습이라고 생각하시면 될 거에요.
                        대화보기
                        • ㅠㅠㅠㅠㅠㅠ
                          그럼 일단 j 로 들어가서 j가 다 반복되기 전엔 j에서 나오지 못하고 계속 반복되다가 반복이 끝나면 빠져나와서 i가 증가하고 또 j가 반복되는 그런식이라는건가요??ㅠㅠ답변감사합니다 8ㅅ8
                          대화보기
                          • Harvey
                            i 의 for문은 0부터 10번 실행되는데요, 그 중 첫번째 실행에서 새로운 for문을 만나게 됩니다. 이 for문은 j의 for문인데, j가 10번 실행되는거죠, i가 0 일때 j가 10번 실행되는 반복문을 만나서, 9까지 반복하게 됩니다. 반복이 완료되서 나왔는데, 이젠 i가 1이 증가한 상태로 맨 위에부터 다시 시작되요, 그래서 아까처럼 j가 10번 실행되죠,

                            예를 들면 엄마가 저한테, "동생한테 방 두번 쓸라고 해라" 하면 동생이 방을 두번 쓸겠죠, 그런데 엄마가 그말을 두번하면 동생은 두번씩, 두번인 4번쓸어야 합니다.
                            대화보기
                            • ㅠㅠㅠㅠㅠㅠ
                              마지막은 도저히 이해가 안되네요 ㅠㅠㅠ
                              for(var i = 0; i < 10; i++)
                              for(var j = 0; j < 10; j++)
                              증가하는건 둘다 0부터 증가되는데 왜 j가 9까지 반복이 되어야지 i가 1씩 증가하는지 이해가 안되네요 ㅠㅠㅠㅠㅠㅠ
                            • moongyu
                              "+i+" 는 스트링이 되어버려요.

                              예제에서 보는 문장은

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

                              이거죠~

                              앞에 스트링 따로 + i라는 변수 + 뒤에 태그 따로

                              기대하시는 효과를 얻으시려면
                              " " + i + " "

                              이렇게 하시면 i가 0 1 2 3 4 로 출력될거구요

                              ++, -- 는 +와 -두 개가 연속해서 붙어있는

                              연산에 필요한 항이 하나라는 뜻인 단항연산자입니다.

                              만약 '," 로 감싸져있지 않은 부분에서 +i+ 같이 사용하면 구문 에러를 일으킬 것입니다.

                              답변이 됐을지 모르겠네요.

                              열공합시다 ^.~
                              대화보기
                              • 뒤에스타트
                                정말 좋아요 감사합니다.
                              • pupu
                                잘보고 갑니다.
                              • egoing
                                alert(i) ^^
                                대화보기
                                • kush
                                  한가지 질문 더, 염치없이 남겨봅니다.

                                  for 반복문에서 응용해서,

                                  for(var i=0; i<5; i++){
                                  alert("+i+");
                                  }

                                  라고 써봤는데,
                                  제가 기대하던 것은, alert창이 뜨는 문구가 0,1,2,3,4 이렇게 뜨길 바랬는데,
                                  alert창은 그냥 +i+이렇게 뜨네요.
                                  혹시 이유와 해결방안이 있을까요?
                                • kush
                                  역시 강의의 퀄리티가 최고네요..
                                  질문 하나 남겨봅니다ㅠ
                                  제 생각에는, 반복문이든 조건문이든, javascript를 사용하는 것이지만, 어쨌든 밖으로 표현되는 것은 텍스트이기 때문에, 이 텍스트도 그냥 <body>블라블라</body>적은 것 처럼, 수정이 될 수 있다고 생각이 되는데요.

                                  그래서 해본게,
                                  <body>
                                  <font color="red">
                                  <script>
                                  ~~~~
                                  </script>
                                  </font>
                                  </body>
                                  로 실험을 해봤는데, 실제로 스크립트로 구현한 텍스트들이 빨갛게 바뀌더라구요.
                                  혹시나 싶어서, <script>안에서 텍스트 색을 바꿔보려했는데 안되던데, 특별한 이유(?)나, 아니면 혹시 제가 한 방법이 맞는지 궁금합니다.
                                • 강구임돠
                                  감사합니다
                                • YellowBall
                                  잘 들었습니다.
                                • 늘생릭코네
                                  감사합니다. ^^
                                • 박태우
                                  잘보고 갑니다 :)
                                • 민팀장
                                  동영상.. 넘 감사합니다...
                                • 조신부리
                                  감사합니다
                                • 나무마루
                                  감사합니다.
                                • ShotgunBlues
                                  전 클라쪽이예요. ^^; 지금은 확실히 정하시고 공부하신다니 다행이네요. 해보면 아시겠지만 서버쪽 일하다 클라쪽 일 할 경우 거의거의! 없어요. 스킬업을 위해서도 스스로의 장래를 위해서도 하나만 신경쓰시면 됩니다. 경력 좀 쌓이시면 그때가서 여흥삼아...곁다리로... 상식 수준으로 보셔도 금방 배워요. 프로그래밍이란게 얼추 비슷한데가 서로 많거든요. 무엇보다 원리와 개념이 바로 서면 쉽게 쉽게 봐집니다. 하지만 프로그래밍쪽이 워낙 새로운게 빨리, 많이 나오다 보니 공부할게 많아요. 결국 jsp면 jsp관련된 공부에 매진하시는게 훨씬 본인에게 좋을거예요. 필요나 강요에 의해서라면 모를까 한 우물만 파시는게 좋아요. 그리고 인터넷으로만 공부하지 마시고, 관련 책을 자주보세요. 인터넷에 올라온건 본인 정리용이나 단편 지식 혹은 검증 안된 오류들 투성이예요. "생활코딩"같은 곳은 정말 없죠. 여길 찾아오셔서 강의들으신 분들은 복받은 겁니다. 이고잉님 이분처럼 지식 공유하기 정말정말 힘들어요. 아무튼 관련 책, 전공 책들에 시간과 돈을 투자하시는게 가장 좋다고 생각해요. 대부분 제가 조언들은 것들과 제 경험 약간을 섞어 말씀드렸는데, 조금이나마 도움이 되시길 빕니다. 영어공부야말로 틈틈히 하시구요. 좋은 글들이 거의 영어권이거든요. 영어 잘하는게 프로그래밍 잘하는데도 확실히 도움도 되구요.
                                  대화보기
                                  • hehypapa
                                    혹시 php쪽으로 서버개발하시나요?
                                    java jsp공부하는데 혹시 취업^^에 도움이 될만한 조언해주실수 있나요?
                                    학원도 7월부터 개강이라 지금은 이고잉님 자바강좌로 선행학습중이거든요..
                                    작년에 비슷한고민을했다고 하니 맘에 와닿고 먼가 더뽑아(?)내야 ㅎㅎㅎ 할거 같아서요..
                                    해주실 말씀있으시면 좀 부탁드려요~~!!
                                    대화보기
                                    버전 관리
                                    egoing
                                    현재 버전
                                    선택 버전
                                    graphittie 자세히 보기