클로저

클로저를 이해하기 전에 렉시컬 스코프(Lexical Scope)라는 개념을 선행하면 이해가 더욱 쉽습니다!

렉시컬 스코프(Lexical Scope)

 

클로저란 무엇인가?

클로저(closure)는 내부 함수가 스코프에 묶인 외부 함수의 변수에 접근 할 수 있는 개념을 말합니다.

자바스크립트의 고유 개념은 아니고 함수형 프로그래밍 언어에서 사용되는 특징 중 하나입니다.

 

클로저 예시

예시를 통해서 알아보도록 하겠습니다.

function outer() { // 외부함수
  var count = 0;

  function inner() { // 내부함수
    count++;
    console.log(count);
  }

  return inner; // 함수를 반환
}

var inner = outer(); // 외부 함수는 소멸됨.
inner();
inner();
inner();

결과 화면

outer 함수는 inner 라는 변수에 할당되면서 소멸하였지만, inner를 실행하면 outer함수 내에 선언된 변수 count를 사용할 수 있습니다.

 

어떤 논리일까?

외부함수가 소멸되어도 내부함수가 생성될 당시의 환경을 기억하고 있기 때문에 외부함수의 변수에 접근이 가능한 것 입니다.

클로저는 반환된 내부 함수가 자신이 선언되었을 때의 렉시컬 환경을 기억하고 있어 다른 환경에서 호출되어도 그 환경에 접근 할 수 있는 함수입니다!

 

어디에 사용될까?

제 개인적인 생각으로 클로저는 자바스크립트에서 이해하기 까다로운 개념에 속하는 거 같습니다.

이 까다로운 클로저는 어디에 사용되는지 알아보겠습니다.

 

• 캡슐화, 은닉화
  자바스크립트는 Java와 같은 접근 수정자(private, public, protected)가 존재하지 않기 때문에 접근 불가한 속성을 만들수가 없습니다.
  ※자바스크립트에서 변수명 앞에 _를 명시하는 네이밍법은 접근제어자 private의 특성이 적용되어야 하는 변수나 함수 앞에 그것을 명시하는 관습이 있습니다.

function Hello(name) {
  this._name = name;
}

Hello.prototype = {
  sayHello: function () {
    return `Hello ${this._name}`;
  },
  setName: function (name) {
    this._name = name;
  },
};

var temp = new Hello("Duchi");

console.log(temp._name); // 'Duchi'
console.log(temp.sayHello()); // 'Hello Duchi'

temp.setName("Bbuggu");

console.log(temp._name); // 'Bbuggu'
console.log(temp.sayHello()); // 'Hello Bbuggu'

외부에서 _name 변수에 자유롭게 접근이 가능한 것이 보입니다.

이제 _name 변수를 클로저를 통해서 숨겨보도록 하겠습니다.

 

function Hello(name) {
  _name = name;

  return {
    sayHello: function () {
      return `Hello ${_name}`;
    },
    setName: function (name) {
      _name = name;
    },
  };
}

var temp = new Hello("Duchi");

console.log(temp._name); // undefined
console.log(temp.sayHello()); // 'Hello Duchi'

temp.setName("Bbuggu");

console.log(temp._name); // undefined
console.log(temp.sayHello()); // 'Hello Bbuggu'

이제 외부에서 _name 에 접근 할 수 없게 되었습니다.

 

참고 문서

자바스크립트-클로저(closure)란 무엇인가?

Closure(함수 클로저)