[JS] Closure란?

함수가 실행됐을 때의 스코프(컨텍스트)를 기억하는 기능을 뜻한다.

여기서 '스코프'란 지역변수가 될 수 있다.

무슨 의미인지 와닿지 않을 수 있기 때문에 아래 코드를 통해 설명하겠다.

function createCounter() {
    let count = 0;

    return function() {
        count += 1;
        return count;
    };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

 

js는 다른 언어와 다르게 함수를 값을 취급해서 넘길 수 있다.

함수를 값으로 취급했기 때문에 고차함수, 동적 처리, 콜백 지옥이 없는 비동기처리, 클로져 등 다양한 기능을 편리하게 구현할 수 있다.

 

createCounter() 함수를 살펴보면 리턴인자의 타입이 함수인 것을 확인할 수 있다.

return function()  { ... }을 했기 때문이다.

그렇기 때문에 counter 변수에는 함수가 값으로 할당될 수 있는 것이다.

 

만약 여기서 console.log(counter)를 할 경우엔, ƒ () {count+=1; return count} 와 같이 함수에 있는 코드 블록이 반환된다.

하지만 counter()로 괄호를 쳤기 때문에, 함수가 실행이 되고, 그 리턴 값이 콘솔로 출력하게 된다.

 

놀라운 것은 createCount() 함수 내에 있는 count가 소멸되지 않고 하나씩 증가했다는 사실이다.

counter 변수에 스코프가 저장됐기 때문이고 이를 '클로져'라고 칭한다.