클로저(Closure) - JS

학습하던중 클로저란 중요한 부분이 있어 정리하게 되었다.

---

클로저는 함수가 선언될 때의 렉시컬 스코프(Lexical Scope)를 기억하고,
함수가 스코프 밖에서 실행되더라도 그 스코프에 접근할 수 있는 기능을 말한다.

 

한줄로

함수가 만들어질 당시의 환경을 기억하는 기능!

 

 

2. 왜 클로저가 생길까? (렉시컬 스코프)

자바스크립트는 렉시컬 스코프(Lexical Scope) 를 사용한다.
이는 함수가 어디서 선언되었는지에 따라 접근 가능한 변수가 결정된다는 의미이다.

function outer() {
    const name = "JavaScript";

    function inner() {
        console.log(name);
    }

    inner();
}

outer(); // JavaScript

 

inner 함수는 자신이 선언될 때의 스코프인 outer 내부의 변수 name을 계속 기억한다.

---

3. 클로저의 대표적인 예시: 함수 반환

가장 많이 사용하는 패턴은 외부 함수가 내부 함수를 반환하는 형태이다.

function makeCounter() {
    let count = 0;

    return function () {
        count++;
        console.log(count);
    };
}

const counter = makeCounter();

counter(); // 1
counter(); // 2
counter(); // 3

 

여기서 count 변수는 makeCounter()가 실행된 뒤에도 사라지지 않는다.
왜냐하면 반환된 내부 함수가 count를 참조하고 있기 때문!

 

이것이 클로저다!!!

---

4. 클로저가 자주 사용되는 상황

(1) 상태(state) 보존
전역 변수를 쓰지 않고 데이터를 은닉하면서 상태를 유지할 수 있다.

(2) private 변수 구현
JavaScript에는 기본적으로 private 키워드가 없었기 때문에, 클로저가 많이 사용된다.

function BankAccount() {
    let balance = 0;

    return {
        deposit(amount) {
            balance += amount;
        },
        getBalance() {
            return balance;
        }
    };
}

const account = BankAccount();
account.deposit(1000);
console.log(account.getBalance()); // 1000

 

balance는 외부에서 직접 접근할 수 없다

 

은닉된 정보!

---

 

5. 클로저가 갖는 장점

(1) 데이터 은닉 가능 (private variable)
(2) 모듈 패턴 구현 가능
(3) 상태 유지 가능
(4) 캡슐화된 기능 제공

---

 

한줄 요약

함수가 만들어질 당시의 환경을 기억하는 기능!