var로 선언 시 호이스팅으로 인해 문제가 발생한다.

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

// 5 5 5 5 5

해결책

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

// 0 1 2 3 4
for (var i=0; i<5; i++) {
	(function(index) {
		setTimeout(() => console.log(index), 1000);
	})(i);
}

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

setTimeout 동작원리


console.log('call A');

setTimeout(() => {
	console.log('call B');
}, 1000);

console.log('call C');
  1. JS Call Stack에 console.log('call A'); 가 쌓임.
  2. console.log('call A') 실행
  3. JS Call Stack에 setTimeout이 쌓임