이중for문, 반복문의 중첩

debugger를 통해 코드 동작을 눈으로 확인할 수 있다. 

샐활코딩에 자세히 설명이 되어있다.

영상 5:24분 

 

이중 for문에서 i 의 코드진행 흐름부터 설명

①>②>④>⑤>⑦>⑥>⑤>⑦>⑥>⑤(에서 조건식이 false면 그 j인덱스 값을 들고)

>③>②>④>⑤>⑦>⑥>⑤(에서 조건식이 fasle면 그 j인덱스 값을 들고)

>③>②(에서 조건식이 false면 i인덱스 값을 들고 for문을 빠져나간다.

 

//   초기화구문;        조건식;      업데이트구문;
for( ①var i = 0;        ② i < 10;       ③ i++){
    for( ④var j = 0;    ⑤ j < 10;       ⑥ j++){

         //반복실행될코드
        ⑦document.write('coding everybody' +i+j+'<br />');
    }
}

 

//   초기화구문;        조건식;      업데이트구문;	
for(var i = 0;        i < 10;       i++){
    for(var j = 0;    j < 10;       j++){
        document.write('coding everybody' +i+j+'<br />');
    }
}

 

1. ①초기화구문을 만나 i: 0 값, ②조건식을 만나 9번줄 j로 내려감 

아직 j: undefined 실행되지 않음

9번 라인 ④j의 초기화구문이 실행되어 j: 0 변하고 ⑤j의 조건문 참이면 실행되어 ⑦반복실행될코드를 만나고

coding everybody00이 찍힘.  다시 j포문들어가서 

다음 ⑥j의 업데이트문이 실행되어 j: 1 이됨

다음 1값을 들고 9번 라인 ⑤j의 조건 확인 후 true면 조건문이 실행되어    

10번줄 j의 for문안에 진입해 ⑦반복실행될코드를 만나

coding everybody01 이라는 값이 찍힘.  

다시 9번줄 j포문 들어와서  ⑥업데이트문을 만나 j의 값이 2가 되고 ⑤j의 조건문으로 넘어가 2와 10을 비교한 다음

10번줄 ⑦반복실행될코드로 넘어가 

coding everybody02 가 출력된다.

콘솔에 값이 찍힌 다음에는 j포문 ⑥>⑤>⑦>⑥>⑤>⑦>⑥이 반복 되고 

⑥업데이트된 값(10)을 들고 ⑤조건으로가 false가 되면

 

[영상 10:02]

j포문이 끝나고  j포문 잠깐 나갔다가  

바깥쪽 i포문으로 들어가 ③i업데이트를 만나 i: 1이 되고 1값을 들고 ②i조건문에서 1과10을 비교한다.

9번줄 j포문으로 들어와서 

④j초기화구문을 만나 0인상태로 ⑤>⑦>⑥>⑤>⑦>⑥또 반복하게 된다. 

 

 

 

 

 

 

 

 

 

 

 

참고

*생활코딩유툽

JavaScript - 반복 (6/6) : 반복문의중첩 - YouTube

생활코딩 홈피

반복문 - JavaScript (opentutorials.org)