JS - Closure

정윤호·2024년 6월 17일

JS-Deep-Dive

목록 보기

6/7

자바스크립트 클로저

자바스크립트의 핵심 개념으로 계손 거론되는 이름이 몇 있다. 그 중에 '클로저(Closure)'가 있다. 클로저는 무엇이고 어디에 어떻게 사용해야 하는걸까?

클로저의 정의

클로져는 함수와 그 함수가 선언된 렉시컬 환경의 조합

쉽게 말해, 클로저는 함수가 생성될 때의 환경을 기억하는 기능이다. 클로저를 통해 함수가 선언된 스코프(scope) 밖에서도 그 스코프의 변수에 접근할 수 있게 된다.
원래 스코프 바깥에서는 안을 참조할 수 없음을 감안하면, 클로저가 특정상황에서 필수적으로 사용될수 밖에 없다는 사실을 이해하는데는 어렵지 않을 것이다.

클로저의 특성

함수 안의 함수: 클로저는 함수 내부에 정의된 또 다른 함수를 의미
외부 변수 접근: 내부 함수는 외부 함수의 변수에 접근할 수 있음
렉시컬 스코프: 내부 함수는 외부 함수의 렉시컬 환경을 기억함

클로저의 예시

다음은 자바스크립트에서 클로저가 어떻게 동작하는지 보여주는 간단한 예시이다.

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log('외부 변수:', outerVariable);
        console.log('내부 변수:', innerVariable);
    };
}

const newFunction = outerFunction('밖');
newFunction('안');

위 예제에서 innerFunction은 outerFunction 내부에 정의된 함수이다. innerFunction은 outerFunction의 변수 outerVariable에 접근할 수 있다. newFunction은 outerFunction을 호출하여 반환된 innerFunction을 참조하며, 이 함수는 outerVariable 값을 기억하고 있다.

클로저의 사용 예

데이터 은닉: 클로저를 사용하면 변수와 함수를 외부에서 접근할 수 없게 은닉할 수 있다. 이는 모듈화된 코드를 작성하는 데 유용하다.

function makeCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

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

콜백 함수: 클로저는 비동기 코드에서 자주 사용된다. 콜백 함수가 호출될 때 특정 상태를 "기억"할 수 있게 한다.

function greet(name) {
    return function(message) {
        console.log(name + ': ' + message);
    };
}

const greetJohn = greet('John');
greetJohn('안녕하세요!'); // John: 안녕하세요!
greetJohn('잘 지내시죠?'); // John: 잘 지내시죠?

모듈 패턴: 클로저를 사용하여 모듈을 만들 수 있다. 모듈은 대표적인 자바스크립트 패턴으로, 데이터와 메서드를 하나의 단위로 묶는 것이다.

    const Module = (function() {
        let privateVariable = '비공개 변수';

        function privateMethod() {
            console.log(privateVariable);
        }

        return {
            publicMethod: function() {
                privateMethod();
            }
        };
    })();

    Module.publicMethod(); // 비공개 변수