[🐱 자바스크립트] Closure(클로저)

자바스크립트 Closure

---

🍎 Closure(클로저)란?

함수와 렉시컬 환경의 조합

함수가 생성될 당시의 외부 변수를 기억

생성 이후에도 계속 접근 가능

클로저 는 함수를 중첩으로 사용함으로써 변수의 렉시컬 환경(어휘적 범위)을 지정해주는 것을 의미한다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다.

---

🍎 Lexical Environment (렉시컬 환경, 어휘적 환경) :

함수 선언으로 인해 스코프가 발생하게 되고, 각각 생성된 스코프에 따라서 다른 렉시컬 환경(Lexical Environment)을 갖는다.

렉시컬 환경을 크게 분류해보면 다음과 같다.

전역 Lexical 환경 > 외부 함수 Lexical 환경 > 내부 함수(익명함수) Lexical 환경

다음의 mdn 예제를 살펴보자.

   function init() {
     var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
     function displayName() { // displayName() 은 내부 함수이며, 클로저다.
       alert(name); // 부모 함수에서 선언된 변수를 사용한다.
     }
     displayName();
   }
   init();

위 예제는 init 함수와 그 내부의 함수 displayName 함수가 중첩된 구조이다. 이 때 init 함수는 displayName 함수를 품은 외부 함수에 해당하고, displayName 함수는 내부 함수에 해당한다.

그렇다면 이제 렉시컬 환경을 파악할 수 있다. init 함수의 코드블럭 범위는 외부 lexical 환경이다. init 함수 내부에 선언된 var name = "Mozilla"는 외부 렉시컬 환경에 선언된 변수임을 알 수 있다. 마찬가지로 displayName 함수 내부의 코드 블럭 범위는 내부 lexical 환경 범위라고 볼 수 있다.

위 클로저의 설명에서 함수와 렉시컬 환경의 조합이라고 한 이유도 이와 같다. 함수를 생성함과 동시에 렉시컬 환경이 정의된다. 클로저는 렉시컬 환경의 개념을 이용하여 완성한 개념이기 때문이다.

---

🍎 클로저 예제

클로저는 개념을 설명하는 것보다 예제로 이해하는 것이 더 이해하기 쉽다.
마찬가지로 mdn의 예제를 살펴보자

function makeFunc() {
      var name = "Mozilla";
      function displayName() {
        alert(name);
      }
      return displayName;
    }

var myFunc = makeFunc();
    //myFunc변수에 displayName을 리턴함
    //유효범위의 어휘적 환경을 유지
myFunc();
    //리턴된 displayName 함수를 실행(name 변수에 접근)
	//"Mozilla" 창이 띄워진다.  

위의 렉시컬 환경에서 사용된 예제와 비슷하다. 새로 추가된 myFunc 변수에 주목하자. myFunc 변수에는 makeFunc 함수를 실행한 리턴값, 즉 함수를 담고있다. displayName 함수는 내부 스코프이므로 외부 스코프의 name = "Mozilla" 값을 참조할 수 있다.

여기서 클로저의 개념이 명확해진다. 맨 아래 줄에 myFunc( )를 호출하면 Mozilla가 창에 뜨는 것을 확인할 수 있다. 클로저는 함수가 생성될 당시의 외부 변수를 기억한다고 했고, 생성 이후에도 계속 접근 가능하다고 했다.

즉시실행함수가 반환한 함수는 자신이 생성됐을 때의 렉시컬 환경(Lexical environment)에 속한 변수 myFunc 를 기억하는 클로저다.

즉, myFunc에 저장한 displayName의 리턴값은 외부 함수 makeFunc에 저장된 name = "Mozilla"값을 저장하고 사용하는 것이다.
이는 displayName 함수가 클로저를 형성하여 가능한 일이다.
일반적인 함수의 경우 함수 종료 시 함수 내부 변수에 더 이상 접근할 수 없게 된다.

---

🍎 클로저를 사용하면 좋은 경우

그렇다면 어떤 경우에 클로저를 사용하면 좋을까?

상태 유지

클로저가 가장 유용하게 사용되는 상황은 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것이다.

만약 자바스크립트에 클로저라는 기능이 없다면 상태를 유지하기 위해 전역 변수를 사용할 수 밖에 없다. 전역 변수는 언제든지 누구나 접근할 수 있고 변경할 수 있기 때문에 많은 부작용을 유발해 오류의 원인이 되므로 사용을 억제해야 한다.

전역 변수의 사용 억제

전역 변수는 언제든지 누구나 접근할 수 있고 변경할 수 있다. 이는 의도치 않게 값이 변경될 수 있다는 것을 의미한다. 만약 누군가에 의해 의도치 않게 전역 변수의 값이 변경됐다면 이는 오류로 이어진다.

출처: https://poiemaweb.com/js-closure

---

🍎 클로저의 장점

클로저를 통해 함수 내부에 리턴된 값을 변수에 저장하면 외부 함수의 변수를 계속 사용할 수 있었다. 이는 이제 어떠한 방식으로도 외부 스코프에서는 변수의 직접적인 참조가 불가능하다는 의미이기도 하다.

이러한 과정에서 오는 클로저의 장점은 다음과 같다.

캡슐화 (정보의 접근 제한)

• 소스코드를 작성하는 과정에서 변수의 직접적인 접근을 완전히 차단함으로써 side effect(의도되지 않은 변경)를 최소화 한다.

함수 모듈화에 유리

• 모듈화 : 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것.
• 클로저를 통해 데이터와 메서드를 묶으면 함수 재사용성이 극대화 되어 모듈화에 유리하다.