[Revisit JS] 클로저 이해해보기

상위 스코프를 [[environment]]에 상위 스코프의 참조를 저장한다.

 

외부 함수보다 중첩 함수가 더 오래 유지되눈 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라고 부른다.

 

클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적이다. 

 

상위 스코프에 2개 이상의 변수 예를 들어, x, y가 있으면 모던 브라우저는 최적화를 통해 참조하고 있는 변수만 기억한다.  

 

참조된 변수를 자유 변수라고 부른다. 

 

클로저란 함수가 자유 변수에 대해 닫혀있다라는 의미다. 이를 좀 더 알기 쉽게 의역하자면 "자유 변수에 묶여있는 함수"라고 할 수 있다. 

 

클로저는 자바스크립트의 강력한 기능으로, 필요하다면 적극적으로 활용해야 한다. 

 

24.4 클로저의 활용

 

클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.  

 

만약 전역 변수에 묶여 있는 변수를 변화시켜야한다면 누구나 전역 변수에 접근할 수 있기 때문에 안전하지 않다. 

 

const counter = (function () {
  let num = 0;
  return {
      increase() {
          return ++num;
      },
      decrease() {
          return num > 0 ? --num : 0;
      }
  };
}());

console.log(counter.increase());

24.5 캡슐화와 정보 은닉

 

완벽하게 되지는 않는다.

 

24.6 자주 발생하는 실수 

블록 레벨 스코프 vs 함수 레벨 스코프

 

var funcs = [];

for (var i = 0; i < 3; i++) {
funcs[i] = function () { return i }
}

for (var j = 0; j < funcs.length; j++) {
    console.log(funcs[j]());
}

3이 나온다.

 

for문의 증감식은 반복이 끝날 때 시작되므로 위의 식은 2가 끝나고 증감된 3이 전역 객체에 바인딩 된다.