📖 클로저

✔️ 클로저

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.
😰 무슨 말인지 모르겠다. 예제를 봐 봅시다.

const x = 1;

function outerFunc() {
  const x = 10;
  
  function innerFunc(){
    console.log(x); // 10
  }
  innerFunc();
}

outerFunc();

이 같은 현상이 발생하는 이유는 자바스크립트가 렉시컬 스코프를 따르는 프로그래밍 언어이기 떄문이다

✔️ 렉시컬 스코프

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다.

✔️ 함수 객체의 내부 슬롯 [[Environment]]

함수는 자신이 호출되는 환경과는 상관없이 자신이 정의된 환경, 즉 상위 스코프를 기억해야 한다. 이를 위해 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 상위 스코프의 참조를 저장한다.

함수 객체의 내부 슬롯 [[Environment]]에 저장된 현재 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조가 바로 상위 스코프다. 또한 자신이 호출되었을 떄 생설될 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장될 참조값이다. 함수 객체는 내부 슬롯 [[Environment]에 저장한 렉시컬 환경의 참조, 즉 상위 스코프를 자신이 존재하는 한 기억한다.

✔️ 클로저와 렉시컬 환경

const x = 1;

// 1
function outer() {
  const x = 10;
  const inner = function() {console.log(x);}; //2
  return inner;
}

// outer 함수를 호출하면 중첩 함수 inner를 반환한다.
// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.
const innerFunc = outer()' // 3
innerFunc(); // 4 10

• outer함수를 호출3하면 outer 함수는 중첩 함수 inner를 반환하고 생명주기를 마감, 실행 컨텍스트 스택에서 제거
• outer 함수의 지역 변수 x와 변수 값 10을 저장하고 있던 outer 함수의 실행 컨텍스트가 제거되었으므로 outer 함수의 지역 변수 x 또한 생명 주기를 마감
  • outer 함수 지역 변수 x는 유효하지않게 되어 x 변수에 접근할 수 있는 방법 사라짐

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

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

✔️ 클로저의 활용

클로저는 상태를 안전한게 변경하고 유지하기 위해 사용 다시 말해 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용

const increase = (function () {
  // 카운트 상태 변수
  let num = 0;
  
  // 클로저인 메서드를 갖는 객체를 반환한다.
  // 객체 리터럴은 스코프를 만들지 않는다.
  // 따라서 아래 메서드들의 상위 스코프는 즉시 실행 함수의 렉시컬 환경이다
  return{
    // num:0, // 프로퍼티는 public하므로 은닉되지 않는다.
    increase() {
    return ++num;
  },
    // 카운트 상태를 1만큼 감소시킨다
    decrease() {
   	 return num > 0 ? --num : 0;
  }
 };
}());

console.log(increase()); // 1
console.log(increase()); // 2

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

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

변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이된다. 외부 상태 변경이나 가변 데이터를 피하고 불변셩을 지향하는 함수형 프로그래밍에서 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이기 위해 클로저를 적극적으로 사용하자

✔️ 캡슐화와 정보 은닉

캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것
캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라 한다.

• 정보 은닉은 외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절치 못한 접근으로부터 객체의 상태가 변겨오디는 것을 방지해 정보롤 보호
• 객체 간의 상호 의존성, 즉 결합도를 낮추는 효과가 있다

✔️ 자주 발생하는 실수

❌ 자주 발생할 수 있는 실수를 보여주는 예재

var funcs = [];

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

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

• 첫 번째 for 문의 코드 블록 내(1)에서 함수가 funcs 배열의 요소로 추가된다.
• 두 번째 for 문의 코드 블록 내(2)에서 funcs 배열의 요소로 추가된 함수를 순차적으로 호출
• funcs 배열의 요소로 추가된 3개의 함수가 0,1,2를 반환할 것으로 기대했지만 XXXXXX

for문의 변수 선언문에서 var 키워드로 선언한 i 변수는 블록 레벨 스코프가 아닌 함수 레벨 스코프를 갖기떄문에 전역 변수다. 전역 변수 i에는 0,1,2가 순차적으로 할당된다. 따라서 funcs 배열의 요소로 추가한 함수를 호출하면 전역 변수 i를 참조하여 i의 값 3이 나온다.

⭕️ 아래처럼 고쳐보자

var funcs = [];

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

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

😅 마치며,,,,,,,,
클로저가 무엇이고 왜 쓰는지는 정확히 알겠지만, 사용하려면 더 배우고 익숙해져야 할 것 같다.