[JS] 클로저(closure) 분석

세나정·2023년 6월 6일
0

클로저?

함수와 함수 외부 변수와의 관계
모든 함수는 바깥 변수와 클로저 관계라고 생각하면 됨

예를 들어 다음과 같은 상황도 클로저 관계라고 할 수 있음

클로저 문제

클로저 문제 -> 스코프, 비동기, var(쓰레기)
클로저가 문제다 X
클로저를 사용해서 해결하는 문제
for문(반복문)과 비동기를 함께 사용하면 종종 발생

대표 예제

이러한 문제가 있을 때 실행 결과는 다음과 같이 나오는 걸 볼 수 있다.

분명 i는 4까지인데 인데 왜 5는 어디서 나온 걸까?
여기서의 문제는 var와 for의 비동기 환상 콜라보이다.

우선 해결법은 다음과 같다 var가 아닌 let을 사용하면 됨.
(var를 유지할 땐 즉시실행함수(IIFE) 를 사용해도 됨)

5가 나오는 이유

var은 블록 스코프가 아니라 함수 스코프를 따르기 때문에 a에 속한다고 보면 됨
그 상황에서 setTimeout을 백그라운드에 보낼려고 (i값 계산은 0, 1000, 2000, 3000으로 잘 됨) i를 모두 계산 한 후,
마지막 i++이 한 번 더 돌아서 i는 5가 되어버리는 것

콜백함수는 클로저이기 때문에 상위 스코프인 a()에게 i의 값을 물어보고 a의 입장에선 i의 값이 5이기때문

let 사용 해결

var

function a의 스코프는 1개고 for문의 스코프는 각각 생기기 때문에 5개
a 스코프에서 i는 0-> 5로 되는 거고, for문의 스코프는 5개에서 i는 각각 0, 1, 2, 3, 4

결론적으로 var는 a의 스코프 한 개만을 사용하지만

let은 함수 스코프가 아니라 블록 스코프이기 때문에 let을 사용하면 for문의 5가지 스코프를 전부 활용하기 때문이다.

profile
압도적인 인풋을 넣는다면 불가능한 것은 없다. 🔥

0개의 댓글