[ js ] CB function, closure, IIFE, scope

IIFE와 비동기

var i
for (i=5; i>=0; i--) {
	setTimeout(()=> {
		console.log(i===0 ? "go!": i)
	}, (5-i)*1000)
}

위 함수는 5 4 3 2 1 go! 라고 출력될 것처럼 보이지만 -1 이 5번 출력된다.

위의 콜백함수가 루프안에서 실행되는 것이 아니라, 루프가 종료된 뒤에 실행됐기 때문이다. 만약 함수를 더 사용하여 스코프를 새로 만든다면 각 단계의 i가 클로저에 캡쳐되기 때문에 처음에 예상했던 대로 만들 수 있다.

function loopBack(i) {
	setTimeout(()=> {
		console.log(i===0?"go!":i);
	}, (5-i)*1000)
}

var i
for(i=5; i>=0; i--) {
	loopBody(i)
}

위의 예제를 IIFE를 사용하여 익명함수를 즉시 호출할 수 도 있다.

var i
for (i=5; i>=0; i--) {
	(function(i) {
		setTimeout(()=> {
			console.log(i===0 ? "go!": i)
		}, (5-i)*1000)
	})(i)
}

만약 아래와 같이 블록 스코프 변수를 사용하면 새로 함수를 만들지 않아도 된다.

for(let i=5; i>0; i--) {
		setTimeout(()=> {
		console.log(i===0 ? "go!": i)
	}, (5-i)*1000)
}