[JavaScript_study] 클로저(Closure)

* 클로저 (Closures)

• 폐쇄, 닫히는 느낌
• 클로저란 함수와 렉시컬 환경의 조합이다.
• 클로저란 내부함수에서 외부함수에 있는 상태에 접근할 수 있는 권한을 주는것을 말한다.
    

// 내부 블럭에서 외부 블럭으로 접근이 가능 따라서 func()함수 내부에 정의된 text는 외부 변수 text를 가져온다.
// 하지만 내부에서 선언된 변수는 외부에서는 접근할 수 없다.
const text = 'hello';
function func() {
  console.log(text);
}
func();

// 내부에서 외부를 가르킬 수 있다고 다 클로저가 아니다.
// 중첩된 함수에서 내부에 있는 함수와 외부에 있는 함수의 상태(렉시컬 환경에)에 접근할 수 있는것을 클로저라고 한다.
// 내부함수와 외부함수가 함께 묶여있는 느낌
function outer() {
  const x = 0;
  function inner() {
    // 외부에 있는 함수에 접근이 가능하다.
    // 따라서 x는 0이 된다.
    console.log(`inside inner: ${x}`);
  }
  return inner;
}
// outer함수에서 반환된 inner라는 함수의 참조값이 func1에 할당이 된다.
// 클로저에 의해서 inner함수가 return이 될때 inner함수 뿐만 아니라 outer렉시컬 환경(변수가 들어있는 렉시컬 환경)도 같이 묶여서 클로저로 반환이 된다.
// 그래서 inner함수에서도 여전히 outer에 있는 변수에 접근이 가능하다.

// inner라는 함수의 렉시컬 환경은 외부에 있는 outer함수를 참조하고 있기 떄문에 여전히 x라는 변수에 접근이 가능하다.
const func1 = outer();
func1();

 

* 클로저 활용 예시 코드

• 예전에는 클래스와 private가 없었기 때문에 클로저의 특징을 이용해서 정보를 은닉하고 공개함수를 통해서만 정보를 조작하기 위해서 클로저를 사용하였다.
• 내부 정보를 은닉하고, 공개 함수(public, 외부)를 통한 데이터 조작을 위해 캡슐화와 정보 은닉
• 클래스 private 필드 또는 메소드를 사용하는 효과와 동일!
• 이제는 클로저를 사용할 필요없이 class를 사용하면 된다.

// 클로져 활용 예제들
// 예전에는 클래스와 private가 없었기때문에 클로저의 특징을 이용해서 정보를 은닉하고 공개함수를 통해서만 정보를 조작하기 위해서 클로저를 사용하였다.

// 내부 정보를 은닉하고, 공개 함수(public, 외부)를 통한 데이터 조작을 위해
// 캡슐화와 정보은닉
// 클래스 private 필드 또는 메소드를 사용하는 효과와 동일!
function makeCounter() {
  let count = 0;
  function increase() {
    count++;
    console.log(count);
  }
  return increase;
}

// 외부에서 사용할때는 increase만 호출하면 makeCounter함수를 실행시켜줄 수 있다.
// 함수로 내가 은닉하고자 하는 데이터 상태를 감추고 오직 퍼블릭 함수만을 통해서 나의 내부 데이터를 조작할 수 있게 만들어 줄 수 있다.
const increase = makeCounter();
increase();
increase();
increase();

// 이제는 클로저를 사용할 필요없이 class를 사용하면 된다.
class Counter {
  #count = 0;
  increase() {
    this.#count++;
    console.log(this.#count);
  }
}
const counter = new Counter();
counter.increase();