Javascript execution context, scope, closure, event loop, web Apis…

• visualizer
• https://ui.dev/javascript-visualizer/?code=var%20count%20%3D%200%0A%0Afunction%20makeAdder%28x%29%20%7B%0A%20%20return%20function%20inner%20%28y%29%20%7B%0A%20%20%20%20return%20x%20%2B%20y%3B%0A%20%20%7D%3B%0A%7D%0A%0Avar%20add5%20%3D%20makeAdder%285%29%3B%0Acount%20%2B%3D%20add5%282%29
• call stack visualizer
• http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D
• The process of execution context
• https://poiemaweb.com/js-execution-context

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

• 결과는 3이 1초마다 출력
• 실행 컨텍스트에서 setTimeout은 queue에 대기하여 있다가 for 문이 끝나면 그때 stack으로 이동하여 실행되는데 이때 변수를 for문이 끝난 시점의 변수인 3을 출력한다.

for(var i=0; i<5; i++){
function timer(j){
setTimeout(function(){
console.log(j)
}, j * 1000)
}
timer(i)
}
- 결과는 0 부터 4 까지 1초마다 출력 .

• 함수와 함수를 관계시킨 클로저 사용
• timer 가 실행되면 j 값과 함께 scope가 생성된다.
• setTimeout은 j를 참조하게 된다.

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

• let 을 사용해도 된다.