[JS🐣] 클로저(Closure)

김다슬·2021년 8월 4일

Java Script 완전 정복

목록 보기

3/5

Introduction

어제 오늘 나를 괴롭혔던 클로저...잠들기 전까지 예제보고 노트에 그려보고 하면서 이해하려고 노력했던 것 같다.
이제 ~~완벽하게~~ 그래도 조금은 설명할 수 있을 정도의 이해가 되어 포스팅을 하고자한다.
이 글을 보기 전에 렉시컬 스코프 이해 필수 !!

클로저(Closure)란 무엇인가?

클로저(Closure)

클로저에 대한 정의를 먼저 보자면 MDN은 이렇게 정의한다.

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다.

정의만 봐서는 사실 이해가 가지 않아서, 간단한 예제를 확인해보자!

위와 같은 코드에서 살펴보면,
makeGreeting 함수는 내부 함수를 반환하면서 종료되어 call stack에서 사라지게 된다. 즉, 변수 greeting에 접근할 수 없게 되었다.

하지만 메모리에서 사라졌음에도 불구하고,
world와 daseul은 greetig 변수를 기억하여 Hello, World!와 Hello, Daseul!을 출력하게 된다.

이처럼, 자신을 포함하고 있는 외부 함수보다 내부 함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근할 수 있는 것이 바로 클로저(Clousre)

클로저(Closure)의 활용

그렇다면, 클로저를 유용하게 사용할 수 있는 방법은 무엇일까?

은닉화

클로저를 이용하여 내부 변수와 함수를 숨길 수 있으며, 이를 은닉화라고 한다. 은닉화를 통해 외부에서 변수에 접근할 수 없도록 한다.
자바스크립트의 모든 객체는 프로퍼티들의 외부 접근이 모두 허용되기 때문에, 클로저 외에는 차단할 방법이 없다.

예시 코드

위의 코드를 보면
외부에서는 privateCounter 변수에 접근할 수 없으며,
내부 함수인 changBy 함수 역시 외부에서 조작할 수 없다.

따라서 반환된 함수에 의해서만, 값의 조작이 가능하다.
결과적으로 private 속성을 만든 것이라 볼 수 있다.

알기 힘든 버그 수정 (반복문)

클로저(Closure)를 잘 안다면 알기 힘든 버그 수정이 가능하다.
아래의 반복문 예시를 살펴보자 !

예시 코드

0, 1, 2, 3, 4가 순차적으로 출력될 것이라 예상했지만,
결과적으로 5가 5번 출력되는 것을 확인할 수 있다.

이는 setTimeout이 호출되어 Web API를 거쳐 Task queue로 이동하는 동안, for loop가 5번 실행되어 이미 i는 5가 되어있기 때문이다.
따라서, 모든 setTimeout의 callback함수가 i를 참조하므로 5가 5번 출력되게 된다.

그렇다면 i를 순차적으로 출력시키고 싶다면 어떻게 해야할까?

해결 방법 1 - IIFE(즉시 실행 함수)

첫번째로는 즉시 실행 함수를 이용하여 루프마다 클로저를 만들어 i를 number값에 각각 저장하는 방식이 있다.
루프마다 number값이 저장되기 때문에 순차적으로 값을 출력할 수 있다.

해결 방법 2 - let 이용

다음으로는, for 루프 내부에 let을 선언하여 매 루프마다 클로저를 생성시키는 방식이다. let은 블록 레벨 스코프이기 때문에 매번 클로저를 새롭게 생성하게 된다.
따라서 setTimeout의 callback 함수가 각각의 i를 참조하여 순차적으로 값을 출력할 수 있다.