[자바스크립트+타입스크립트] 왕초보도 이해한 '클로저' 완전 분석

클로저란 무엇일까? 여러 문서들을 살펴봐도 정확하게 개념을 깨우치기 너무 힘들었다.

 

대략 본인이 이해했을때 '클로저'란 외부에 존재하는 데이터에 접근할 수 있는(엮여있는) 함수를 말한다.

 

function outerFunc() {
    let name = "bomango"; 
    return function callName() {
        console.log(name); 
    }  
}

const func = outerFunc();

func();

 

위의 예제에서 outerFunc라는 함수 안에는 name이라는 변수와 callName이라는 함수가 존재한다.

위 예제에선 callName이라는 함수가 클로저로 작용한다. 클로저가 작동하기까지의 과정을 실행 순서를 통해 살펴보자.

 

 

1. 먼저 func라는 변수에 outerFunc라는 함수가 저장된다.

 

2. outerFunc 함수가 변수 func에 저장되면서 한번 읽힌다.

 

3. 이때 name 이라는 변수 값이 클로저 공간에 저장된다. 아하 name은 bomango구나 !

 

4. 이제 func() 라는 메서드가 실행된다. func()는 outerFunc 내부에 존재하는 callName 함수를 말하고, outerFunc와는 상관없이 오로지 callName 만이 실행된다.

 

5. outerFunc가 읽히지 않은 상태임에도, callName함수는 클로저 공간에 저장된 name값 "bomango"를 콘솔창에 찍어낸다.

 

callName 함수가 outerFunc의 내부에 존재하긴 하나,

"func()"라는 실행 명령은 callName() 함수 자체만을 호출하므로, name값이 undefined로 떠야하지 않을까? 하고 의심할 수 있다.

하지만 name값 "bomango"가 바로 '클로저'라는 공간에 저장되므로 undefined를 막을 수 있는 것이다.

 

 

 

예시가 아주 명쾌한 느낌이 아니라, 숫자가 카운팅되는 예시로 다시 확인해봤다.

 

function outerFunc() {
    let num = 0; 
    return function countingNum() {
        return num++; 
    }
}

const func = outerFunc();

console.log(func());
console.log(func());
console.log(func());

 

먼저 제시한 예시와 거의 동일하나, 리턴되는 값을 num이라는 변수를 1씩 증가하게 만들었다.

이제 클로저 개념을 이해한다면 countingNum이라는 함수가 클로저 역할을 하면서 'num = 0'을 저장했음을 알 수 있다.

 

그리고 그 값은 func() 함수 반복 실행으로 0 -> 1 -> 2 이렇게 점차 값이 커지고 있는 것도 확인할 수 있다.

이 과정을 통해 우리는 num 이라는 변수의 값은 클로저 내부에서만 변화하고 있음을 확인할 수 있다 !

초기에 클로저가 함수를 리딩하면서 num값을 0이라고 저장했고, 함수를 반복하면서 다시 0으로 초기화되는 것이 아니라,

함수가 실행될 때마다 마지막으로 저장된 값을 유지하면서 카운팅되고 있는 것이다.

 

여기서 우리가 왜 클로저를 사용해야 하는지 결론이 내려진다. num이라는 변수는 반드시 클로저 안에서만 변화된다는 것은, 외부의 어떤 코드가 난입하더라도 num은 변화무쌍하게 지켜진다는 것! 바로 데이터를 쉽게 수정되지 않게 막는 역할을 클로저가 하고 있는 것이다.

 

 

이처럼 클로저는 특정 범위 내에서만 데이터를 수정할 수 있도록 접근을 막아둔 공간이라고 볼 수 있다.

 

 

여기저기서 데이터(변수)를 갖다 쓰고 변경해버리면, 예상치 못한 버그가 발생할 확률이 높다. 때문에 데이터를 보호 차원에서 클로저 문법을 활용한다.

 

그렇다면 타입스크립트에서 이런 클로저 문법이 있을까? 바로 접근제한자 private이다!

이 private 역시 프로퍼티 앞에 붙으면서 해당 프로퍼티를 외부로부터 접근되지 않도록 보호한다.

 

 

private에 대한 설명은 아래 포스트에서 자세히 기록해뒀다.

타입스크립트 왕초보의 '클래스' 개념 정리

 

 

 

쉬운듯 어려운 '클로저'의 개념. 이정도로 정의하고 이를 참고해서 코드를 짜면 보다 간결하고 안정적인 코딩을 할 수 있을 것 같다.

 

 

 

 

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