[자바스크립트] - ★중첩 for문

 중첩 for문 

for문 안에 for문 들어있으면 중첩for문이라고 한다. 

자바스크립트가 중첩 for문을 만나면 바깥쪽 for문에 초깃값과 조건식을 먼저 검사한다. 
이후 조건식이 만족되면 안쪽의 for문의 초깃값과 조건식을 검사하고 조건식이 true에서 false가 될 때까지
계속해서 반복한다. 
그 다음 안쪽 for문의 조건식이 false가 되면 바깥쪽 for문의 증감식을 실행하고 다시 조건식을 검사한다. 
바깥쪽 for문의 조건식이 만족하면 또 다시 안쪽 for문의 초깃값과 조건식을 처음부터 다시 검사하고 
또 true에서 false가 될 때까지 계속해서 반복한다.
이 과정을 바깥쪽 for문이 false가 될때까지 반복한다.  

한바퀴돌고 두번째로 두번째 for문을 검사할때는 초기화되어 처음부터 다시 초깃값으로 돌아가서 조건식을 검사하게 된다. 
        
[ 기본형 ]
        
for(초깃값; 조건식; 증감식){
      for(초깃값; 조건식; 증감식){
      자바스크립트 코드;
       }
}

 for(초깃값; 조건식; 증감식){

       

            for(초깃값; 조건식; 증감식){

              자바스크립트 코드;

            }

        }

주황화살표-> 노란화살표

안쪽 for문에서 k가 2를 넘게 되어 다시 바깥 for문으로 돌아갔다가 다시 안쪽 for문으로 오게 되면 다시 k의 값이 초기화 되어 다시 k가 1이 되게 된다. 

---

예제) 3행 2열 표 만들기

 //3행 2열 표 만들기  바깥 for는 표의 행 안쪽 for는 열

 

      for (var i = 1; i <= 3; i++) {

        for (var k = 1; k <= 2; k++) {

          document.write(i + "행" + k + "열");

        }

        document.write("<br>");

      }

 

한바퀴 돌고 두번째로 두번째 for문을 검사할 때는 초기화되어 다시 처음 초깃값으로 돌아가기 때문에

다시 1열이 되어 2행 1열 2행 2열 -- 이렇게 나오게 되는 것이다. 

---

예제) 5행 5열 표 만들기

 

 //5행 5열 표

      var num = 1;

      var t = "<table>";

      //행

      for (var i = 1; i <= 5; i++) {

        t += "<tr>"; //t는 t + "<tr>"이다. t는 "<table>"

        //열

        for (var k = 1; k <= 5; k++) {

          t += "<td>" + num + "</td>";

          num++;

        }

        t += "</tr>";

      }

      t += "</table>";

      document.write(t);

 

num은 밖에 있는 변수라 (k<=5)과 상관없이 계속 해서 증가할 수 있다. 그래서 6789..의 칸이 생기게 된다. 

k가 1이면 아래로 내려가서 td 칸 숫자 1을 출력하게 되고 

그렇게 하다가 k가 6이되면 안쪽 for문이 false라 바깥 for문으로 가게 된다. 

다시 안쪽 for문으로 오게 되면 k는 다시 1이 되는데 num은 6인 상태여서 td 6 /td를 출력하게 되는 것. 

그리고 num++으로 num이 7이 되고 다시 안쪽 for문으로 가서 조건식  k <=5 을 검사

---

예제) for문을 이용하여 구구단 중 5단 출력하기

 

 for (var i = 1; i <= 9; i++) {

        document.write("5X" + i + "=" + i * 5, "<br/>");

       }

 

 

구구단은 9단까지니깐 i는 9까지 반복되야하고

식을 출력해야하니깐 문자로 만들어서 

"5X" + i = 5X1 5X2 ....

"="는 

+ i*5 이렇게 식을 만들어줘야한다.