본문 바로가기

JavaScript

클로저

클로저란?

클로저는 함수와 그 함수가 선언된 어휘적 환경(스코프)의 조합이다.
클로저는 함수가 외부 스코프의 변수에 접근할 수 있는 기능을 제공하며, 이는 함수가 정의된 환경을 기억하는 데 기반을 둔다.

 

클로저의 주요 특징

  1. 외부 함수의 변수에 접근할 수 있는 내부 함수
    • 클로저는 외부 함수에서 선언된 변수를 기억하고, 외부 함수가 종료된 후에도 이를 유지한다.
  2. 함수가 변수에 담길 수 있다
    • JavaScript에서 함수는 1급 객체로 취급되며, 이는 함수를 변수에 담을 수 있고, 다른 함수의 반환값으로 전달하거나 호출할 수 있음을 의미한다.
  3. 데이터 은닉과 캡슐화
    • 클로저는 외부 스코프의 변수를 감추는(setter) 데 활용할 수 있다. 이를 통해 외부에서 변수에 직접 접근하지 못하게 하여 안전한 데이터 관리가 가능하다.

 

클로저 예제: 기본 사용

function makeCounter() {
    let count = 0; // 외부 함수의 변수

    // 내부 함수 반환
    return function () {
        count++; // 내부 함수가 외부 변수 count에 접근
        console.log(count);
    };
}

let counter = makeCounter(); // makeCounter 호출, 내부 함수 반환
counter(); // 출력: 1
counter(); // 출력: 2
counter(); // 출력: 3

작동 원리

  1. makeCounter()가 호출되면 count 변수와 내부 함수가 생성된다.
  2. 내부 함수는 외부 함수의 변수 count를 참조하므로, 반환된 함수(counter())가 호출될 때마다 count의 값을 유지하고 업데이트한다.
  3. makeCounter()는 호출이 끝났지만, 반환된 내부 함수는 count 변수의 메모리를 유지하고 접근할 수 있다. 이는 클로저의 핵심이다.

 

데이터 은닉과 클로저

클로저를 사용하면 변수 값을 외부에서 직접 접근하지 못하게 하면서, 필요한 기능은 제공할 수 있다.

function createPrivateCounter() {
    let count = 0; // private 변수

    return {
        increment: function () {
            count++;
            console.log(count);
        },
        decrement: function () {
            count--;
            console.log(count);
        },
        getCount: function () {
            return count;
        },
    };
}

let counter = createPrivateCounter();
counter.increment(); // 출력: 1
counter.increment(); // 출력: 2
console.log(counter.getCount()); // 출력: 2
counter.decrement(); // 출력: 1

왜 데이터 은닉이 중요한가?

  • 외부에서 변수에 직접 접근하여 수정할 수 없게 함으로써 예측 가능한 상태를 유지할 수 있다.
  • count 변수는 오직 내부 함수(increment, decrement, getCount)를 통해서만 접근 가능하다.

 

커링 함수와 클로저

커링(Currying)은 하나의 함수가 여러 매개변수를 받는 대신, 각각의 매개변수를 하나씩 받는 함수들을 반환하는 기법이다.

function multiply(a) {
    return function (b) {
        return a * b; // 외부 함수 a를 참조
    };
}

let multiplyByTwo = multiply(2); // a = 2인 클로저 생성
console.log(multiplyByTwo(5)); // 출력: 10
console.log(multiplyByTwo(10)); // 출력: 20

커링의 장점

  • 매개변수를 고정하여 특정 기능을 미리 정의할 수 있다.
  • 반복적인 코드 작성 없이 다양한 조합을 쉽게 처리할 수 있다.

 

 

'JavaScript' 카테고리의 다른 글

클로저 - 원래 스코프 내부에서는 외부로 접근 가능한거 아니야?  (0) 2024.05.22
객체  (0) 2024.05.22
스코프  (0) 2024.05.22
원시 자료형과 참조자료형  (0) 2024.05.22
반복문  (0) 2024.05.21