자바스크립트 클로저

클로저란 무엇인가

함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 렉시컬 환경이란 함수가 선언된 위치에 따라 정해지는 스코프를 말한다. player를 리턴하는 익명함수는 getClosure 내부에 선언되었으므로, 익명함수의 렉시컬 환경은 자신과 getClousure, 전역범위까지 해당한다. 

function getClosure() {
  var player = '손흥민';
  return function() { 
    return player;
  };
}

var closure = getClosure();
console.log(closure()); // '손흥민'

 

getClosure함수는 익명함수를 반환하고 실행이 완료되었지만, 반환된 익명함수에는 player변수가 남아있다. 실행 컨텍스트의 관점에서 함수는 실행을 마치면 컨텍스트 정보가 모두 사라지지만, 만약 자식함수가 남아있을 경우에는 이미 종료된 부모 함수의 컨텍스트 정보(변수 또는 함수 정보)에 참조할 수 있다. 이게 클로저의 동작원리이다.

왜 사용하는가?

데이터 은닉화.

private variable을 만들어 다른 사람들로부터 데이터에 접근을 제한하도록 한다.

function hello(name) {
  var _name = name;
  return function() {
    console.log('Hello, ' + _name);
  };
}

var hello1 = hello('흥민');
var hello2 = hello('희찬');
var hello3 = hello('승호');

hello1(); // 'Hello, 흥민'

변수명 앞에 underscore(_)를 포함한다는 것은 Private variable으로 쓰고 싶다는 의도를 엿볼 수 있다.

위 코드는 클로저를 사용하여 외부에서 변수에 접근하지 못하게 한다.

 

 

Reference

https://jinbroing.tistory.com/80

https://likelion-kgu.tistory.com/74

hyunseob.github.io/2016/08/30/javascript-closure/