클로저

목차
1. 클로저란?
2. 장점

1. 클로저란?

• 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합

정의는 어려워보이지만 쉽게 말하자면 어떤 함수의 내부에 정의된 다른 함수가 상위 스코프의 변수나 매개변수를 참조하는 내부함수를 클로저라고 한다. 

 

2. 장점

클로저는 사용하기에 복잡해 보인다. 그렇다면 이 복잡한 것을 무슨 이유에서 사용하는 것일까?

1) 정보은닉과 캡슐화

외부함수의 변수를 참조하는 내부함수를 반환받아 사용하므로써 외부함수의 변수에 직접 접근하지 못한다.

    function Num1() {
        let str = "클로저입니다.";
        return function Num2(newStr) {
            console.log(`수정 전 : ${str}, 수정 후 : ${newStr}`);
            str = newStr;
        }
    }

    const fn1 = Num1();
    fn1("fn1 클로저입니다."); // 수정 전 : 클로저입니다., 수정 후 : fn1 클로저입니다.
    const fn2 = Num1();
    fn2("fn2 클로저입니다."); // 수정 전 : 클로저입니다., 수정 후 : fn2 클로저입니다.

fn1에서 값을 업데이트 했기 때문에 fn2에서 수정 전 값은 fn1에서 수정된 값인 것 같지만 실제로는 업데이트가 적용되지 않았다. 이는 같은 함수 값을 받지만 객체처럼 독립적으로 사용되기 때문이다.

 

2) 모듈화

모듈은 기능들을 독립적인 부품형태로 만들어놓은 것이다. 모듈을 통해 재사용성을 높히고 유지보수에 유리하게 만들 수 있다. 

const Calculator = (function() {
    // 모듈의 내부 변수
    let result = 0;

    // 덧셈 함수
    function add(x) {
        result += x;
    }

    // 뺄셈 함수
    function subtract(x) {
        result -= x;
    }

    // 결과 반환 함수
    function getResult() {
        return result;
    }

    // 모듈의 공개 API 정의
    return {
        add: add,
        subtract: subtract,
        getResult: getResult
    };
})();

// Calculator 모듈 사용 예시
Calculator.add(5);
Calculator.subtract(2);
console.log("결과:", Calculator.getResult()); // 결과: 3

 

 

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

https://velog.io/@jiyaho/JS-Closure클로저의-개념-특징-장점-예시