for문의 동작순서

목적 : for문의 동작 순서 이해 및 자바스크립트에서 키워드 스코프 이해

 

다양한 프로그래밍 언어에서 반복 문의 종류에 for 문이 있습니다.

아래와 같은 코드가 존재한다고 가정하면, 동작 순서는

 

for(let i = 0; i < 3; i++){
	console.log(i);
})

let i = 0 // 선언 및 초기화문 (이하ㄱ)
i < 3 // 조건문 (이하ㄴ)
i++ // 증감연산자( 이하ㄷ)
console.log(i) // 반복할 로직 (이하ㄹ)

 

최초 let i = 0 (ㄱ) 선언 및 초기화 부분은 1번만 실행되며,

다음, i<3이라는 조건문(ㄴ) 영역에서 체크를 한 뒤(0 <3 true)

 

아래로 내려와 console.log(i) (ㄹ)를 실행, 0 출력

증감 연산자(ㄷ)를 활용하여 i++을 시키고

 

다시 조건문 영역(ㄴ)으로 와서 1 <3 (true)

실행문 실행(ㄹ) 1 출력

 

증감 연산자(ㄷ)를 활용하여 i++을 시키고(2)

 

다시 조건문 영역(ㄴ)으로 와서 2 <3 (true)

실행문 실행(ㄹ) 2 출력

증감 연산자(ㄷ)를 활용하여 i++을 시키고(3)

 

다시 조건문(ㄴ) 영역으로 와서 3 <3 (false)

실행문을 실행하지 않고 for 문 종료 루틴으로 돌아가게 됩니다.

결국 초기 화문 1번에 조건문, 실행문, 증감 연산자 부분이 반복되는 로직입니다.

 

순서 : ㄱ -> ㄴ -> ㄹ -> ㄷ -> ㄴ -> ㄹ -> ㄷ -> ㄴ -> ㄹ -> ㄷ -> ㄴ -> (종료)

i는 3전까지만 된다고 생각할 수 있는데, i가 3까지 증가하나, 조건문에서 false가 되어 실행 문의 실행되지 않을 뿐입니다.

추가적으로 var와 let의 차이를 알아보는 코드, setTimeout의 비동기 함수 내용까지 합치게 되면 아래와 같은 코드를 작성할 수 있습니다.

 

for (var i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

...

for (let i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

 

위 for 문과 아래 for 문의 차이는 초기화 자리에 var 키워드와 let 키워드를 사용하였고, setTimeout을 사용하여

비동기 로직이 들어가게 됩니다.



for 문이 먼저 동작해서 실행문 차례가 되었을 때, setTimeout 안에 함수를 1초 후에 실행하게 되는데, 이는 call stack이 아닌 이벤트 큐에 들어가서 for 문이 모두 종료된 후에 console.log가 출력되게 됩니다. (자바스크립트의 내부 동작)



다만 var 키워드와 let 키워드의 차이인 블록 레벨 스코프와 함수 레벨 스코프의 차이가 발생하고 선언된 환경 레코드를 기억하냐 못하냐 차이가 발생하기 때문에

위의 for 문은 모두 종료된 후의 i 값인 3,3,3이 출력되고 아래 for 문의 i는 0,1,2가 출력됩니다.

 

3,3,3이 아닌 2,2,2가 출력되어야 된다고 생각하시는 분을 위해 처음에 for 문에 대한 설명 하였습니다.

(for문 동작 후에 i값은 3인 상태)

 

결론 : for문의 동작 이해와 var , let 키워드의 (블록 레벨 vs 함수 레벨) 스코프