JS 2-2. 클로저

9. 클로저 설명

자바스크립트에서 클로저(Closure)란, 함수가 선언될 때의 외부 렉시컬 환경(Lexical Environment)을 기억하여, 해당 함수가 그 환경 밖에서 호출되더라도 그 환경에 접근할 수 있는 기능을 말한다.

➡️ 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다.

---

핵심 요소

• 내부 함수 : 클로저는 함수 내부에 정의된 또 다른 함수를 포함한다.
• 외부 함수의 변수 접근 : 내부 함수는 자신이 선언된 외부 함수의 변수에 접근가능하다.
• 수명 연장 : 클로저를 사용하면 외부 함수가 종료되더라도, 내부 함수가 외부 변수에 계속 접근할 수 있습니다.

javascript

function outerFunction(outerVariable) {
    const innerVariable = 'I am inner';

    return function innerFunction(innerParameter) {
        console.log(`Outer Variable: ${outerVariable}`);
        console.log(`Inner Variable: ${innerVariable}`);
        console.log(`Inner Parameter: ${innerParameter}`);
    };
}

const newFunction = outerFunction('I am outer');
newFunction('I am inner parameter');

🖥️ // 출력
sql

Outer Variable: I am outer
Inner Variable: I am inner
Inner Parameter: I am inner parameter

outerFunction이 실행되면, outerVariable과 innerVariable이 생성된다.
innerFunction은 outerFunction 내부에서 정의되었으므로,
outerVariable과 innerVariable에 접근할 수 있다.
outerFunction 실행이 끝난 후에도, innerFunction이 반환되어 호출되면,
클로저를 통해 외부 함수의 변수들(outerVariable과 innerVariable)에 접근 가능.

---

클로저 사용 예시

1. 데이터 은닉 및 캡슐화 : 클로저를 이용해 특정 변수나 데이터를 외부에서 직접 접근하지 못하도록 보호할 수 있다.

🖥️ javascript

function counter() {
    let count = 0; // 은닉된 변수
    return function() {
        count++;
        return count;
    };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3

2. 콜백 함수에서 상태 유지 : 클로저를 통해 콜백 함수의 실행 환경을 기억할 수 있다.

3. 함수 팩토리 : 클로저를 사용하여 동적으로 함수를 생성한다.

🖥️ javascript

function makeMultiplier(multiplier) {
    return function(value) {
        return value * multiplier;
    };
}

const double = makeMultiplier(2);
const triple = makeMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

➡️ 클로저 이해를 돕는 포인트

• 함수가 선언된 위치를 기준으로 변수를 기억한다.
• 외부 함수가 종료된 뒤에도 내부 함수는 외부 함수의 변수들에 접근할 수 있다.