10. 기술면접 - 자바스크립트 - 클로저 (Closure)

본 내용은 공부목적으로 MDN 문서를 보며 따라친 내용입니다

들어가기 앞 서

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는 지 렉시컬 스코프(Lexical Scoping) 을 이해
해야 한다

 

렉시컬 스코프 (Lexical Scoping)

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


init();

- init() 은 지역변수 name 과 함수 displayName() 을 생성한다
- displayName() 은 init() 안에 정의된 내부 함수이며 init() 함수 본문에서만 사용할 수 있다.
- 여기서 주의 할 점은 displayName() 내부엔 자신만의 지역변수가 없다는 점이다
- 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init() 에서
  선언된 변수 name 에 접근할 수 있다.
- 만약 displayName() 가 자신만의 name 변수를 가지고 있었다면, 외부함수의 name 을 불러오려면 this.name 을
  사용해야 한다

- 위 코드를 실행하면 displayName() 함수 내의 alert() 문이 부모 함수에서 정의된 변수 name의 값을 성공적
  으로 출력된다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는 지 알 수 있다
  이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 `lexcial` 이란 어휘적 범위 지정과정에서 변수가 어디에서
  사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는 지, 고려한다는 것을 의미한다. 단어 lexical 은
  이런 사실을 나타낸다. 중첩된 함수는 외부 범위 (scope)에서 선언한 변수에도 접근할 수 있다

-> 변수의 선언위치 고려 = 렉시컬

 

클로저 (Closure)

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

var myFunc = makeFunc();

myFunc();

- 이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다.
- 하지만 흥미로운 차이는 displayName() 함수가 실행되기 전에 외부함수인 makeFunc() 로 부터 리턴되어
  myFunc 변수에 저장된다는 것이다.

- 한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그램밍 언어에서,
  함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다, makeFunc() 실행이 끝나면
  (displayName 함수가 리턴되고 나면) name 변수에 더 이상 접근할 수 없게 될 것으로 예상되는 것이 일반적이다

- 하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가
  클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다 이 환경은 클로저가 생성된
  시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, myFunc 은 makeFunc 이 실행될 때
  생성된 displayName() 함수의 인스턴스에 대한 참조이다 displayName의 인스턴스는 변수 name 이 있는 어휘적 환경
  에 대한 참조를 유지한다. 이런 이유로 myFunc 가 호출될 때 변수 name 은 사용할 수 있는 상태로 남게 되고
  Mozilia 가 alert 에 전달된다

필자 생각 -> 실행한 함수 (function) + 그 실행한 함수와 lexcial scope 라고 보면 되는 것 같다

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN