Javascript의 클로저란?

 

클로저(Closure)는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 대표적인 특성 중 하나다. MDN에 의하면 클로저의 정의는 다음과 같다.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)

보통 어떤 개념의 정의는 개념에 대한 핵심을 압축해놓은 작은 책이다. 따라서 우리는 정의에 사용된 단어들을 일종의 목차내지 이정표 삼아서 탐색을 진행함으로써 그 책을 음미할 수 있다. 그러면 한 번 시작해보자.

---

1. Lexical environment

렉시컬 환경이란 코드를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체다. 소스 코드를 실행하면서 참조가 필요한 변수의 값을 해당 객체에서 식별자 이름을 키로 찾는다고 보면 된다. Lexical environment는 Execution context, 즉 소스 코드를 실행하기 위해 필요한 것들을 관리하는 내부 메커니즘에 의해 관리된다.

 

2. Closure

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수다. 어떤 이는 간단한 줄여서 '자신이 선언될 당시의 환경을 기억하는 함수'라고 말한다.

 

외부 함수에서 내부 함수의 스코프로 접근이 불가하나 그 역은 가능하다. 이때 클로저는 외부 함수의 실행이 종료된 후에도 외부 함수의 스코프에 접근할 수 있다. 이러한 특성으로 인해 클로저를 사용할 경우 다음 3가지와 같은 이점이 있다.

1. 데이터 보존 가능: 필요한 데이터를 스코프 안에 가두어 계속 사용 가능

2. 캡슐화 가능: 클로저 모듈 패턴 등을 통해 정보 접근 제한 가능

3. 모듈화 유리: 클로저를 통해 데이터와 메소드를 묶어 하나를 독립적인 부품의 형태로 분리 가능

따라서 클로저는 상태를 안전하게 변경하고 유지하고 싶을 때 유용하게 사용될 수 있다.

 

코드를 통해 살펴보자.

다음은 클로저가 아닌 경우다.

function foo() {
  var name = 'Mesotes';
  function bar() {
    console.log(name);
  }
  bar();
}
foo();

여기서 bar는 foo안에서 정의되고 실행되었을 뿐, foo 밖으로 나오지 않았기 때문에 클로저가 아니다.

 

다음은 클로저인 경우다.

var name = 'A';
function foo() {
    var name = 'Mesotes'; 
    function bar() {
        console.log(name);
    }
    return bar;
}
var baz = foo();
baz(); // Mesotes

이 때 bar는 아무리 전역에서 호출되더라도 foo의 name을 가리키게 된다. 이는 클로저다.

1. bar는 name을 출력한다.
2. bar는 foo 스코프를 외부 스코프 참조로 저장한다.
3. baz라는 변수에 bar를 초기화.
4. baz()를 호출하면 bar는 name을 찾는다.
5. bar는 자신의 스코프에 name이라는 값이 없으므로 스코프 체인을 통해 외부 스코프에서 name를 찾는다.
6. name Mesotes를 찾고 출력한다.

---

더 자세히 알아보기

관련서적: 모던 자바스크립트 Deep Dive

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

 

 

 

 

-학습을 진행하며 남기는 지식 포스팅-

 

-부족한 설명이 있다면 부디 조언 부탁드립니다-

 

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로,

이에 따른 일정액의 수수료를 제공받습니다