javascript - 클로저 (closure)

클로저 적용 전

var x = 10;
function outerFunc() {
  var innerFunc = function () { console.log(x); };
  return innerFunc;
}

inner = outerFunc();
inner() // 10

클로저 적용 후

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  return innerFunc;
}

inner = outerFunc();
inner() // 10

클로저 특징

• 외부함수의 생명주기가 끝났지만 반환되는 내부함수의 반환값과 연관된 '것' 들이 살아있다.
• 외부함수안에 지역변수를 선언하여 사용되는 변수를 보호한다.
  (전역 변수 사용을 지양 및 사용되는 변수 보호)

클로저 응용

function Counter() {
  // 외부 함수의 지역변수
  var countValue = 0;

  // 지역변수를 증가시키고 반환하는 클로저 내부 함수
  this.increase = function () {
    return ++countValue;
  };

  // 지역변수를 감소시키고 반환하는 클로저 내부 함수
  this.decrease = function () {
    return --countValue;
  };
}

const counter = new Counter();

console.log(counter.increase()); // 1
console.log(counter.decrease()); // 0

increase와 decrease를 생성자 함수로 지정하면
렉시컬 환경을 공유하고 countValue의 제어 가능

잘못된정보 지적 환영 아니시에이팅 환영