Lexical scope and Closure

클로저

📚 클로저에 대해 알아봅시다.

은연중에 사용했을 클로저. 제대로 정리해봅시다.

자바스크립트에서는 내부함수와 외부함수가 존재합니다. 내부함수는 외부함수의 지역변수에 접근할 수 있습니다.
그리고 외부함수가 소멸한 후에도 외부함수의 지역변수에 접근 가능합니다.
이 특성을 이용한 것이 closure 입니다.

말로는 전부 이해하기 힘들죠? 😭

그럼 예시를 보겠습니다.

function outer(outerValue) {
  return function inner(innerValue) {
    console.log(`outer value : ${outerValue}`);
    console.log(`inner value : ${innerValue}`);
  }
}

const inner = outer("겉은 바삭");

inner("속은 촉촉");

// outer value : 겉은 바삭
// inner value : 속은 촉촉

결과는 ?

outer value : 겉은 바삭
inner value : 속은 촉촉

외부 함수에서 선언된 outerValue라는 지역변수를 inner 함수에서 기억하고 있습니다!

여기서 궁금한 점은, inner 함수는 outerValue 값인 "겉은 바삭" 이라는 값을 어떻게 기억하는 걸까요?

이에 대해선 렉시컬 스코프에 대해 이해하고 있어야 합니다.

렉시컬 스코프와 유효 범위

위의 상황에서 함수가 실행되면 자바스크립트는 외부 렉시컬 환경과 내부 렉시컬 환경이라는 고유한 유효 범위를 갖습니다. 그리고 이를 메모리에 저장합니다.

외부 렉시컬 환경은 말그대로 함수 바깥의 범위를 참조하고, 내부 렉시컬 환경은 함수 내부에서 사용된 인자나 지역변수를 참조합니다.

여기서 중요한점!

함수 내부에서 변수를 사용할 때는 일단 내부 렉시컬 환경을 탐색한 후, 찾는 변수가 없다면 외부 렉시컬 환경으로 이동해 변수를 찾습니다. 이것이 closure입니다. (앞서 얘기 했듯이)

그럼 어떻게 "겉은 바삭"이 출력되었는지 어느 정도 감이 오시나요?

그렇다면 클로저를 통해 얻을 수 있는 가장 큰 이점?

함수 종료 후에도 사라지지 않는 지역 변수를 만들 수 있습니다!
더 나아가서 객제 지향의 캡슐화의 기능을 클로저를 통해 구현할 수 있습니다.