클로저란

뿌이·2023년 11월 15일

바닐라JS

목록 보기

8/10

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수
즉, 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다

자신이 생성될 때의 환경을 기억하는 함수

클로저는 함수가 다른 함수 내에서 정의될 때, 내부 함수가 외부 함수의 변수에 접근할 수 있는 특별한 기능을 제공하는데, 이는 해당 함수가 생성될 때의 환경, 즉 렉시컬 스코프(Lexical scope)를 기억한다는 개념입니다.

함수의 렉시컬 스코프(Lexical Scope): 렉시컬 스코프는 함수가 정의될 때의 환경을 의미합니다. 함수가 어디에 선언되었는지에 따라 변수의 스코프가 결정됩니다.

클로저의 생성: 함수가 다른 함수 내에서 선언되면, 내부 함수는 외부 함수의 변수를 기억합니다. 이때 내부 함수가 생성되는 시점의 렉시컬 스코프를 클로저가 기억하게 됩니다.

외부 변수에 접근: 이후에 클로저가 반환되거나 다른 곳에서 호출될 때도, 클로저는 자신이 생성될 때의 렉시컬 스코프에 여전히 접근할 수 있습니다. 이것이 클로저가 "환경(Lexical environment)"을 기억한다는 의미입니다.

간단한 예제를 통해 설명해보겠습니다:

function outerFunction() {
  let outerVar = 10;

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction;
}

const closure = outerFunction(); // outerFunction 실행 결과로 innerFunction을 반환받음

closure(); // innerFunction이 실행됨. 결과로 10이 출력됨

이 코드에서 innerFunction은 outerFunction 내에서 정의되었습니다. 그리고 outerFunction은 innerFunction을 반환하고 있습니다. 반환된 innerFunction은 외부에서 호출되어도 outerVar에 접근할 수 있습니다. 이는 innerFunction이 클로저이기 때문입니다. 클로저가 자신이 선언됐을 때의 렉시컬 스코프를 기억하기 때문에, outerVar에 접근이 가능한 것입니다.

예시2

const btn = document.querySelector('button');

// 이 부분에서 handleClick 함수가 실행됩니다.
btn.addEventListener('click', handleClick());

// handleClick 함수는 클로저를 형성하여 count 변수에 접근할 수 있습니다.
function handleClick() {
  let count = 0;

  // 이 내부 함수가 클로저입니다. 외부 함수의 변수(count)에 접근할 수 있습니다.
  return function () {
    count++; // count 변수를 증가시킵니다.
    console.log(count); // 현재 클릭 횟수를 콘솔에 출력합니다.
    return count; // 클릭 횟수를 반환합니다.
  }
}

함수안에서 함수를 return하는 형태인데
내부함수가 클로저이다.
위 코드에서는 click을 하면 handleClick함수가 실행되는데
내부함수 바깥에 count라는 변수가 선언되어있어서
영구적으로 count라는 변수를 전역변수 선언을 하지않고도 전역변수처럼 활용가능하다는 것이다.