변수 질문입니다.

[Parker]

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

위 예제에서  var 를 사용한 i가 전역으로 5가되어서 5만 찍히는 거고 let으로 바꾸면 해결된다고 설명해 주셨는데..

그런데 var 사용시에 왜5초마다 5가찍히는 것이 아니라  1초마다 5가 찍히나요?   

[codingapple]

settimeout, addeventlistener 같은 함수들은 web api라는 임시보관함을 거치는 특이한 함수들입니다

브라우저는 settimeout을 만나자마자

1. web api라는 공간에 settimeout내부의 콜백함수를 잠깐 보관하고 

2. 그 콜백함수가 실행할때가 되면 실행하라고 내보내줍니다

 

그래서 위의 코드를 컴퓨터입장에서 해석해보면 

- 반복문으로 내부 코드를 5번 복붙하기 시작합니다 

- settimeout을 만났기 때문에 걔를 web api로 보냅니다. 이걸 x5번합니다.

- 반복문이 끝납니다. 여기서 var i는 이미 5가 되어있습니다.

- 1초가 흐릅니다. 1초가 지나면 web api 안에 보관되었던 settimeout 함수 내부 console.log(i) 가 동작합니다. 

- console.log를 실행하려고 봤더니 근처에 i는 var i 밖에 없고 그건 5입니다. 그래서 5를 출력해줍니다.

- 2초가 흐르고 또 settimeout내부 코드를 실행해주는데 위와 같습니다

- 3초가 흐르고 .. 역시 위와 같습니다

 

 

[Parker]

답변 감사드립니다. 그런데 아직도 조금 이해가 잘 안되는데요... 

 { setTimeout(function() { console.log(i); }, i*1000 ); }

var i 가 이미 5가 되어있으면 console.log(i)도 5가되고, i*1000의 i도 5인데 그러면 5초마다 반복실행이 되는것 같은데 i*1000은 왜 정상적으로 반복문 0*1000, 1*1000, 2*1000, 3*1000... 으로 되는 건가요? 참조하는 변수 i가 5라면 5초마다 반복되는 것으로 되어야 할텐데.. 콜백함수의 i만 5가되고, 두번째 파라미터 i*1000은 정상적으로 반복문의 i를 순서대로 참조 한다고 이해하면 될까요? web api라는 공간에는 콜백함수만 보내지는 거고, i*1000은 보내지지 않는 것으로 이해하면 되나요?    

[codingapple]

i*1000은 web api로 보내지 않습니다. 그래서 i*1000은 반복문이랑 함께 실행되므로 0~4값이 잘 할당됩니다. 

function() { console.log(i) } 여기 부분만 web api로 보냅니다

 

 

[Parker]

감사합니다. 이해 했습니다~

[글쓴이]

글