IT/[FE] 위클리 페이퍼

[FE] 📚 Closure란?

serin99 2024. 7. 16. 16:10
728x90



🤗 오늘의 위클리 페이퍼는

클로저(Closure)에 대한 토픽입니다.

 

 

 

📝 Closure란?


클로저(Closure)는 자바스크립트의 중요한 개념 중 하나로, 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합을 의미합니다. 클로저를 사용하면 함수가 선언된 스코프 외부에서 선언된 변수에 접근할 수 있습니다. 이번 글에서는 클로저가 무엇인지, 어떻게 동작하는지, 그리고 실제로 어떤 경우에 활용하면 좋은지에 대해 예제와 함께 설명합니다.

 

 

📗 클로저의 개념

 

클로저는 함수가 정의될 때의 스코프(렉시컬 환경)를 기억하여, 함수가 실행될 때 그 스코프에 있는 변수에 접근할 수 있게 합니다. 즉, 함수 내부에서 함수 외부의 변수를 참조할 때 그 변수를 "기억"하는 것입니다.

MDN에서 정의하는 내용을 살펴보면, “클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합”이라고 합니다.

여기서 함수는 외부함수와 내부함수가 있을 때, 내부함수를 의미합니다.
그 함수가 선언될 때의 렉시컬 환경이란 내부함수가 선언됐을 때의 스코프 범위 안에 있는 변수와 함수를 저장하는 객체를 의미 합니다.
즉, 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말합니다.

코드 예시를 통해 살펴보면,

function outerFunc() {
  const x = 7;
  const innerFunc = function () { console.log(x); };
  return innerFunc;
}

/**
 *  함수 outerFunc를 호출하면 내부 함수 innerFunc 반환
 *  그리고 함수 outerFunc의 실행 컨텍스트는 소멸
 */
var inner = outerFunc();
inner(); // 7

 

함수 outerFunc는 내부함수 innerFunc을 반환하고 life-cycle은 종료됩니다. 하지만 외부함수 실행 컨텍스트 내의 변수는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있습니다.

즉 외부함수를 이미 반환 했더라도 외부함수 내의 변수는 이를 필요로 하는 내부함수가 하나 이상 존재하는 경우 계속 유지됩니다. 이때 내부함수가 외부함수에 있는 변수의 복사본이 아니라 실제 변수에 접근합니다.

클로저는 자신이 생성될 때의 환경을 기억해야 하므로 메모리 차원에서 손해를 볼 수 있지만 필요에 따라 

유용하게 사용하면 좋습니다.

 

 

📙 클로저의 동작 방식

 

function createCounter() {
  let count = 0;

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

const counter = createCounter();

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

 

위 코드에서 createCounter 함수는 count라는 변수를 선언하고, 내부에 count 변수를 증가시키는 함수를 반환합니다. 반환된 함수는 createCounter 함수의 스코프를 기억하고, count 변수에 접근할 수 있습니다.

이렇게 반환된 함수가 클로저입니다.

 

✅  요약

 

클로저는 자바스크립트의 강력한 기능 중 하나로, 함수와 그 함수가 선언된 스코프를 기억하여 외부 함수의 변수에 접근할 수 있게 합니다. 이를 통해 데이터 은닉, 함수 팩토리, 콜백 함수에서의 상태 유지 등 다양한 활용이 가능합니다. 클로저의 개념을 잘 이해하면, 보다 효율적이고 강력한 자바스크립트 코드를 작성할 수 있습니다. 이번 글이 클로저를 이해하는 데 도움이 되었기를 바랍니다.

 

 

728x90