clouser 클로저

이제 까지 클로져에 대한 글을 아무리 읽어도 눈으로만 이해가 가고 머리로는 깊은 이해가 가지않았다. 지역 변수가 유지된다... 지역 변수에 접근할 수 있다... 정보의 은닉이된다... 등 문자 그대로는 이해가 가는데 이게 대체 무슨 의미인가 싶었다. 그러다 예제를 직접 만들어 보고 그 차이를 이해할 수 있게 되었다. 바로 예시를 통해 알아보겠다.

클로저를 쓰지 않고 단순히 출력

const a = () => {
    let count = 0;
    count++;
    return count;
};

const result = a();
console.log(result); // 출력: 1
console.log(result); // 출력: 1
console.log(result); // 출력: 1

클로저가 아닌 단순한 변수를 대입했을 경우에는 아무리 함수 호출을 하더라도 count가 새롭게 선언되어 0만 출력되는것을 볼 수 있다. 즉 지역변수가 유지되지 않고 새롭게 선언된다는 뜻이다. 하지만 클로저를 쓴다면 아래와 같다.

클로저를 썼을때 변화

const createCounter = () => {
    let count = 0;
    return () => {
        count += 1;
        return count;
    };
};

const counter = createCounter();
console.log(counter()); // 출력: 1
console.log(counter()); // 출력: 2
console.log(counter()); // 출력: 3

클로저를 썻을때를 보면 분명 지역변수 count = 0 으로 선언했지만 함수가 종료되면 count는 사라져야 하는데, 계속 함수를 호출할 때마다 이전의 값인 0,1,2를 기억하여 값이 계속 올라가고 있다. 이것이 값이 유지되며, 접근 가능하다는 뜻이다.

이렇게 될 경우 함수 내에서 지역변수로 변수를 선언했기 때문에 외부에 노출이 안되어 정보의 은닉또한 가능하며 상태가 유지되게 된다.