[JS/Node] 클로저 함수

클로저 함수

자바스크립트 특성 중 하나

Before You Learn

• 스코프에 대한 이해와 주요 규칙

Achievement Goals

• 클로저 함수의 정의와 특징에 대해서 이해할 수 있다
• 클로저가 갖는 스코프 범위를 이해할 수 있다
• 클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다

정의(mdn)

"함수와 함수가 선언된 어휘적(lexical) 환경의 조합"
이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

특징 1

함수를 '리턴'하는 함수

리턴하는 함수로 스코프(변수의 접근 범위)를 구분

특징 2

외부함수의 변수에 접근할 수 있는 내부함수

클로저의 활용

데이터를 보존하는 함수

일반적인 함수는, 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없습니다.
반면, 클로저는 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수가 메모리 상에 저장됩니다.

어휘적 환경을 메모리에 저장하기 때문

const adder = (x) => {
    return (y) => {
        return x + y; 
    }
}

const add5 = adder(5);

add5(7); // 12
add5(10); // 15

클로저 모듈 패턴

클로저를 이용해 여러 개의 내부 함수를 담은 객체를 리턴할 수 있습니다.

const makeCounter = () => {
    let value = 0;

    return {
        increase: () => {
            value++
        },
        decrease: () => {
            value--
        },
        getValue: () => value
    }
}

const counter1 = makeCounter(); 

함수 makeCounter를 실행(호출)하여 변수에 담습니다.
makeCounter 함수는 increase, decrease, getValue메소드를 포함한 객체 하나를 리턴합니다.
counter1은 객체입니다.

정보의 접근 제한(캡슐화)

makeCounter 함수를 바꾸지 않고, value라는 변수에 값을 새롭게 할당할 수 있는 방법

없습니다.

'외부 스코프에서는 내부 스코프의 변수에 접근할 수 없다'는 규칙에 의해,
어떤 경우에도 value는 직접 수정이 불가능합니다.
대신, 리턴하는 객체가 제공하는 메소드를 통해 value 값을 간접적으로 조작할 수 있습니다.

이것이 바로 정보의 접근 제한 캡슐화 입니다.

만일 스코프로 value 값을 감싸지 않았더라면, value 값은 전역 변수여야만 했을 것입니다.
하지만 makeCounter라는 함수가 value 값을 보존하고 있기 때문에, 전역 변수로 따로 만들 필요가 없습니다.

side effect

전역 변수는 다른 함수 혹은 로직 등에 의해 의도되지 않은 변경을 초래합니다.
이를 side effect라고 합니다.
side effect를 최소화하면, 의도되지 않은 변경을 줄일 수 있습니다.
따라서 이에 따른 오류로부터 보다 안전하게 값을 보호할 수 있습니다.

클로저를 통해 불필요한 전역 변수 사용을 줄이고,
스코프를 이용해 값을 보다 안전하게 다룰 수 있습니다.

모듈화

재활용 가능한 makerCounter 함수
여러 개의 counter를 만드는 것이 가능

const counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue(); // 1

const counter2 = makeCounter();
counter1.decrease();
counter1.decrease();
counter1.decrease();
counter1.getValue(); // -3

makeCounter에 의해 리턴된 객체는,
makeCounter를 실행할 때에 선언되는 value 값을 각자 독립적으로 가지게 됩니다.
따라서 counter1에서의 value와 counter2에서의 value는 서로에게 영향을 끼치지 않고, 각각의 값을 보존할 수 있습니다.