[JS] 클로저(Closure) 활용하기

클로저란

반환되는 함수가 반환시킨 함수의 변수 환경을 묶어서(closing) 기억하고 있는 개념을 말한다.

일반적인 경우 함수의 실행이 종료되어 콜 스택에서 제거되면 해당 함수 내부에 선언된 변수에 접근할 수 있는 방법이 없다. 하지만 반환된 함수는 자신을 반환시킨 함수가 콜 스택에서 제거되어도 여전히 그 스코프에 접근하여 변수를 참조할 수 있게 된다.

이는 반환된 함수는 자신이 호출될 때가 아니라 선언될 때의 환경(Lexical Environment)을 기억하고 클로저 스코프를 갖기 때문에 콜 스택에 반환시킨 함수가 없더라도 스코프 체인을 통해 변수를 참조할 수 있게 되는 것이다.

이해를 돕기 위한 간단한 예제이다.

// inner 함수를 반환시키는 함수
function outer() {
    const outerText = 'I am outer function';

    // 반환되는 함수
    return function inner() {
        console.log(outerText);
    }
}

const closureFn = outer();
closureFn(); // I am outer function

11번째 라인에서 outer 함수를 호출하면 해당 함수의 컨텍스트가 콜 스택에 쌓인다. 그리고 outer 함수의 실행이 종료되면 closureFn 변수에는 outer 함수가 반환한 inner 함수가 담기게 되고, 콜 스택에서는 outer 함수가 제거된다.

그 뒤 12번째 라인에서 closureFn 함수를 호출하는데, 이는 내부적으로 outer 함수에 선언되었던 outerText 변수를 참조한다. closureFn 함수에는 outerText라는 변수가 없기 때문에 스코프 체인을 통해 변수를 찾아야 하는데 콜 스택에는 더이상 outer 함수가 없다. 그럼에도 불구하고 closureFn 함수는 정상적으로 outerText 변수를 사용할 수 있다. 이유는 바로 closureFn 함수가 클로저이기 때문이다.

함수형 프로그래밍에서 클로저 패턴 활용하기

객체 지향 프로그래밍에서는 클래스를 사용하면 연관된 데이터와 동작을 묶어서 사용할 수 있다. 물론 자바스크립트에서도 이미 한참 전부터 클래스를 사용할 수 있게 되었다지만, 리액트로 개발하면 클래스를 쓰기가 애매할 때가 굉장히 많다.

그런데 최근에 변수의 값을 계속 기억하기 위해 클로저를 활용했던 사례가 있어 공유해보려고 한다. 예시는 비밀번호를 변경할 때 입력받은 새 비밀번호와 새 비밀번호 확인에 대한 유효성 검사를 처리할 때이다.

먼저 이런 구조의 input이 있다고 가정하자.

function Form() {
    const { validatePassword } = validator(); 
    const handleChange = (e) => {
        const { name, value } = e;
        validatePassword(name, value);
    }

    return (
        <>
            <input type="password" name="password" value={password} onChange={handleChange} />
            <input type="password" name="confirm" value={confirm} onChange={handleChange} />      
        </>
    )
}

이 때 name이 password일 땐 그 값을 저장해놓아야 confirm 값이 입력됐을 때 password와 비교하여 일치한지 비교를 할 수 있다. 그래서 아래와 같이 클로저 개념을 활용하여 함수를 만들었다. 아주 간략하게 느낌만 느낄 수 있게 작성했다.

function validator() {
    let password;

    function validatePassword(name, value) => {
        if(name === 'password') {
            password = value;
        }
        if(name === 'confirm') {
            // password와 value가 같은지 비교
        }

    }

    return {
        validatePassword
    }
}

나는 공통 handleChange 함수를 최대한 깨끗하게 유지하고 싶기도 했고 유효성 검사 함수들끼리 묶어서 관리하려고 이 방식을 택했는데, 굳이 클로저로 구현하지 않고 유효성 검사 함수에 파라미터로 password와 confirm 값을 함께 넘겨주는 것으로도 충분할 수 있다!