이중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)