[JS] 클로저

자바스크립트를 공부하면서 어려웠던 개념은 클로저이다. 

클로저는 스코프, 스코프 체인에 대한 지식이 있어야 이해할 수 있다. 

스코프란 식별자에 대한 유효범위이다. 이렇게 말하면 어려운데 아래의 코드를 보면 outer라는 함수가 선언되어 있다. 이 outer함수가 실행되면 outer함수에 대한 스코프가 생성된다. 

 

function outer() {
  var a = 'A';
  var b = 'B';
}

이 표는 outer 함수에 대한 스코프이다. 코드를 조금 수정해서 outer함수 안에 inner함수를 생성해보자.

function outer() {
  var a = 'A';
  var b = 'B';
  function inner() {
    var c = 'C';
    var d = 'D';
  }
}

이렇게 각각의 스코프가 생성된다 그렇다면 inner 함수안에서 a변수를 호출하면 어떻게 될까? 

function outer() {
  var a = 'A';
  var b = 'B';
  function inner() {
    var c = 'C';
    var d = 'D';
    console.log(a);	
  }
}

 

신기하게도 A가 출력된다. inner함수 내에선 a변수가 선언되어있지도 않고, inner스코프에서도 a변수가 없는데도 이런 현상이 발생하는 이유는 무엇 때문일까? outer함수 내부에서 inner함수가 생성되었기 때문에 이 두 개의 스코프는 체인 관계를 갖게 된다.

컨텍스트에서 변수의 값을 찾는 흐름은 해당 함수의 스코프에서 값을 찾고 없으면 그 위에 스코프 체인을 따라 올라가면서 값을 찾게 된다. 요약하면, 클로저란 외부 변수를 기억하고, 그 변수에 접근할 수 있는 함수를 뜻한다. 자바스크립트는 중첩 함수로 쉽게 클로저를 구현할 수가 있는데, 원래 함수 내부 변수를 스코핑 할 때는 렉시컬 스코핑을 따라서 그 전역 변수에 있는 값을 참조하게 된다. 하지만, 함수 내부에 다른 함수를 위치시킴으로써 내부 함수가 감싸는 함수의 환경을 참조하게 되고, 값을 저장하는 것이 가능하게 된다. 즉, 다시 말하자면, 클로저 함수는 자신이 생성될 때의 환경을 기억하는 함수라고 할 수 있다. 

 

클로저란 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상이다. 함수의 실행 컨텍스트는 함수가 종료되면 끝나는 것이 일반적이다.

 

👩‍💻 왜 함수의 실행 컨텍스트가 종료된 후에도 변수가 사라지지 않을까? 

이는 가비지컬렉터의 동작 방식 떄문이다. 가비지컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집대상에 포함하지 않는다.

 

 

 

"Icon made by Pixel perfect from www.flaticon.com"