이중 for문 흐름 이해하기

-  코드가 복잡해질수록 이중 for문의 개념이 헷갈려 다시 한번 정리하였습니다.

- 종이에 써가며 차근차근 i와 j를 증감해보시면 더 빨리 이해 할 수 있습니다

for(let i = 1;i<=3;i++){
    for(let j = 1; j<=3; j++){
        console.log(`[${i},${j}]`)}} // [1,1] [1,2] [1,3] [2,1] [2,2] [2,3] [3,1] [3,2] [3,3] 

 

1. [외부] let i = 1 변수 선언문은 단 한번 실행됨. 현재 i = 1
2. [외부] i<=3 현재 i는 1이니깐 true, 내부 for문 실행
3. [내부] let j = 1 변수 선언문은 단 한번 실행됨. 현재 j = 1
4. [내부] i<=3 현재 j는 1이니깐 true, 코드 블록 실행
5. [내부] 코드 블록 : 현재 i = 1,j = 1 임으로 [1,1] 콘솔함.
   ! 내부에서 false일때 까지 반복
6. [내부] j++ 로 인해 i는 +1을 해주어 현재 j = 2
7. [내부] i<=3 현재 j는 2이니깐 true, 코드 블록 실행
8. [내부] 코드 블록 : 현재 i = 1,j = 2 임으로 [1,2] 콘솔함.
9. [내부] j++ 로 인해 i는 +1을 해주어 현재 j = 3
10. [내부] i<=3 현재 j는 3이니깐 true, 코드 블록 실행
11. [내부] 코드 블록 : 현재 i = 1,j = 3 임으로 [1,3] 콘솔함.
12. [내부] j++ 로 인해 j = 4가 되고 조건문에 의해 false가 됨. 내부 반복 종료.

 

1. [외부] i++ 현재 i +1를 해주어 현재 i = 2
2. [외부] i<=3 현재 i는 2이니깐 true, 내부 for문 실행
   [내부] let j = 1 변수 선언문은 단 한번 실행됨. 현재 j = 1
3. [내부] i<=3 현재 j는 1이니깐 true, 코드 블록 실행
4. [내부] 코드 블록 : 현재 i = 1,j = 1 임으로 [1,1] 콘솔함.
   ! 내부에서 false일때 까지 반복
5. [내부] j++ 로 인해 i는 +1을 해주어 현재 j = 2
6. [내부] i<=3 현재 j는 2이니깐 true, 코드 블록 실행
7. [내부] 코드 블록 : 현재 i = 1,j = 2 임으로 [1,2] 콘솔함.
8. [내부] j++ 로 인해 i는 +1을 해주어 현재 j = 3
9. [내부] i<=3 현재 j는 3이니깐 true, 코드 블록 실행
10. [내부] 코드 블록 : 현재 i = 1,j = 3 임으로 [1,3] 콘솔함.
11. [내부] j++ 로 인해 j = 4가 되고 조건문에 의해 false가 됨. 내부 반복 종료.

 

1. [외부] i++ 현재 i +1를 해주어 현재 i = 3
2. [외부] i<=3 현재 i는 3이니깐 true, 내부 for문 실행
   [내부] let j = 1 변수 선언문은 단 한번 실행됨. 현재 j = 1
3. [내부] i<=3 현재 j는 1이니깐 true, 코드 블록 실행
4. [내부] 코드 블록 : 현재 i = 1,j = 1 임으로 [1,1] 콘솔함.
   ! 내부에서 false일때 까지 반복
5. [내부] j++ 로 인해 i는 +1을 해주어 현재 j = 2
6. [내부] i<=3 현재 j는 2이니깐 true, 코드 블록 실행
7. [내부] 코드 블록 : 현재 i = 1,j = 2 임으로 [1,2] 콘솔함.
8. [내부] j++ 로 인해 i는 +1을 해주어 현재 j = 3
9. [내부] i<=3 현재 j는 3이니깐 true, 코드 블록 실행
10. [내부] 코드 블록 : 현재 i = 1,j = 3 임으로 [1,3] 콘솔함.
11. [내부] j++ 로 인해 j = 4가 되고 조건문에 의해 false가 됨. 내부 반복 종료.
12. [외부] i++ 현재 i +1를 해주어 현재 i = 4
13. [외부] i<=3 현재 i는 4임으로 false 외부 반복문도 종료