클로저(closure)

클로저란 내부함수와 외부함수의 상태가 함께 묶여있다, 갇혀있다 라는 의미이며
즉 내부함수가 외부함수의 렉시컬 환경(블록 정보)에 접근 할 수 있는 것을 말한다.

클로저는 스코프의 특징과 연관되어있다.
스코프의 특징은 어떤 블록이든 내부 블록에서 외부 블록에 있는 변수를 참조할 수 있었다.
왜냐하면 내부 블록이 가지고 있는 렉시컬 환경은 부모를 참조하고 있기 때문이다.

코드 📄

function outer(){
    const x=10;
    function inner(){
         console.log(`내부 함수의 외부함수 값 참조: ${x}`);
     }
     inner();
 }

 outer(); 
//내부 함수의 외부함수 값 참조: 10

• 함수또한 블록이기 때문에 내부 함수에서 외부함수에 있는 변수를 참조

코드 📄

function outer(){
    const x=10;
    function inner(){
        console.log(`내부 함수의 외부함수 값 참조: ${x}`);
    }
   return inner;
}

const func1=  outer(); 
func1(); // 내부 함수의 외부함수 값 참조: 10

• func1에 inner함수 뿐아니라 inner함수의 외부함수인 outer의 렉시컬환경(블록 정보 x=10)도 같이 묶여서 반환된다.

---

클로저의 활용

정보은닉,캡슐화

데이터를 은닉하고 캡슐화하기 위해 클로저를 사용할 수 있다.

생성자 함수에서의 클로저 활용

코드 📄

function Counter(){
    let count =0;

    this.increase = () =>{
        count++;
        return count;
    }
    this.decrease = () => {
        count--;
        return count;
    }

}

const counter =new Counter();

console.log(counter.increase()); // 1
console.log(counter.increase()); // 2
console.log(counter.increase()); // 3
console.log(counter.decrease()); // 2
console.log(counter.decrease()); // 1
console.log(counter.count);  // undefined

• 외부에서는 Counter 생성자의 count에 접근할 수 없다.
• 오직 increase,decrease 함수로 count의 값을 더하거나 뺄 수 있다.

---

클래스 활용

현대에 와서는 정보은닉을 위해 클로저를 사용하기 보다는 클래스의 private(#)을 사용한다.

class Counter{
    #count =0;
    
    increase(){
        this.#count++;
        console.log(this.#count);
    }
    decrease(){
        this.#count--;
        console.log(this.#count);
    }
}

const counter =new Counter();
counter.increase(); // 1
counter.increase(); // 2
counter.decrease()  // 1

• 클래스를 사용하면 클로저보다 훨씬 간결하게 코드를 짤 수 있다.