📆 날짜

2023/12/19(화)

📚 챕터

클로저를 다룰 때 주의할 사항

---

👨🏻‍💻학습 내용

🎯클로저 사용 할 때 주의할 점

클로저는 다루기 쉽지 않은 개념이라고 한다.
따라서 클로저를 사용할 때는 주의를 해야한다고 한다.

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

위 코드의 의도는 0부터 시작해 1초 간격으로 console.log로 0,1,2,3,4를 차례대로 출력하는 것이다.
그러나 실제로 위 코드를 실행하면 0,1,2,3,4초 뒤에 5만 출력된다.
setTimeout의 익명 함수가 클로저로 i를 잘 따라갈 것 같은데,모두 5가 되는 이유는 무엇일까?
그 이유는 i가 전역변수로 작동하기 때문이다.
자바스크립트는 기본적으로 함수 레벨 스코프를 따르고 있기 때문에 var는 for문의 존재와 상관없이 해당 구문이 선언된 함수 레벨 스코프를 바라보고 있으므로 함수 내부 실행이 아니라면 전역 스코프에 var i가 등록돼 있을 것이다.
for문을 다 순회한 이후, 태스크 큐에 있는 setTimeout을 실행하려고 했을 때, 이미 전역 레벨에 있는 i는 5로 업데이트가 완료돼 있다.

이를 올바르게 수정하는 방법은 함수레벨 스코프가 아닌 블록 레벨 스코프를 갖는 let으로 수정하는 것이다.
let은 기본적으로 블록 레벨 스코프를 가지게 되므로 let i가 for문을 순회하면서 각각의 스코프를 갖게 된다.

📌 var 키워드를 사용했을 때

📌 let 키워드를 사용했을 때

클로저는 사용하는 데는 비용이 든다.
클로저는 생성될때마다 그 선언적 환경을 기억해야 하므로 추가 비용이 발생한다.
클로저가 선언된 순간 내부 함수는 외부 함수의 선언적인 환경을 기억하고 있어야 하므로 이를 어디에서 사용하는지 여부에 관계없이 저장해 둔다.

클로저의 개념,즉 외부 함수를 기억하고 이를 내부 함수에서 가져다 쓰는 메커니즘은 성능에 영향을 미친다.
클로저에 꼭 필요한 작업만 남겨두지 않는다면 메모리를 불필요하게 잡아먹는 결과가 생긴다.클로저 사용을 적절한 스코프로 가둬두지 않는다면 성능에 악영향을 미친다. 클로저를 사용할 때 꼭 주의가 필요하다.

➡️ 다음 글에서는 이벤트 루프와 비동기 통신의 이해에 대해 살펴보자.