[JavaScript] 클로저( Closure ) 이해하기

 

 

이번 시간에는 클로저에 대해 알아볼 것이다.

 

자바스크립트는 어휘적 환경을 갖는다. ( Lexical Environment )

 

아래의 코드가 있을 때 어떻게 작동이 되는지 살펴보자,

let one; one = 1; function addOne(num) {     console.log(one + num); } addOne(5);  //  6

 

코드가 실행되면 스크립트 내에서 선언한 변수들이 Lexical 환경으로 올라간다. 

초기화 하지 않은 one은 사용할 수 없는 반면에 함수 선언문은 바로 초기화 되기 때문에 사용가능하다.

 

1. let one을 만났을 때 초기값이 할당을 받지 않았기 때문에 오류는 나지 않지만 undefined가 난다.

2. 그 이후 one은 1을 할당 받는다.

3. 함수는 선언과 동시에 초기화 된다.

 

여기까지는 전역 Lexical 환경이 된다. 외부 Lexical 환경이라고도 한다.

 

 

4. 이후 함수가 실행되면 함수가 넘겨받은 매개 변수와 지역 변수가 저장이 된다. 

이것을 내부 Lexical 환경이라고 한다.

 

 

함수가 호출되고 실행될 때 함수는 내부 Lexical 환경과 외부에서 받은 전역 Lexical 환경 두개를 가지게 되고,

내부 Lexical 환경은 외부에 대한 참조를 받는다.

 

코드에서 변수를 찾을 때 내부에서 찾고 없으면 외부, 외부에도 없으면 전역에서 변수를 찾는다.

 

addOne 함수가 실행 될 때 내부 Lexical 즉 addOne(5)로 5를 넘겨주었기 때문에 addOne 함수 내부에서

num을 찾을 수 있지만 console.log( one + num ) 에 있는 one은 내부에서 찾을 수 없다.

 

때문에 범위를 넓혀 참조하는 전역 Lexical에서 이를 찾아서 더해줄 수 있게 되는 것이다.

 

 

 

 

이런 것을 Closure라고 한다.

 

 

클로저는 함수와 Lexical 환경의 조합을 의미하고,

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

또한 생성된 이후에도 계속해서 접근 가능하다.

 

 

 

 

 

 

* 본 포스팅은 코딩앙마님의 자바스크립트 중급 강좌를 기반으로 작성한 글입니다.