클로저 (Closure) ⛱

 

클로저는 함수가 선언될 당시의 스코프를 기억하여, 함수가 호출되는 시점에 그 스코프에 접근할 수 있게 해주는 강력한 기능

 

함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)을 함께 기억하는 기능이다.

자바스크립트에서 함수는 변수에 할당될 수 있고 다른 함수의 인자로 전달되거나 반환될 수 있다.

이때 함수가 자신이 선언될 때의 스코프(변수, 상수 등)를 기억하고 있어서 함수가 선언된 스코프 밖에서 실행되더라도 그 스코프의 변수에 접근이 가능한데 이 현상을 클로저라고 한다.

 

※ 렉시컬 환경(Lexical Environment)에 대한 추가 설명은 아래 참고!

 

 

왜 클로저를 사용하는가?

• 데이터 은닉 및 캡슐화
• 상태 유지
• 콜백, 이벤트 리스너, 타이머 등에서 유용
• 모듈 패턴 구현 가능

 

예제

function outer() {
  let count = 0;  // outer 함수의 지역 변수

  function inner() {
    count++;
    console.log(`현재 count: ${count}`);
  }

  return inner;
}

const closureFunc = outer();  // outer가 실행되며 inner를 반환
closureFunc(); // 현재 count: 1
closureFunc(); // 현재 count: 2
closureFunc(); // 현재 count: 3

• outer() 함수는 inner()를 반환한다.
• closureFunc는 inner()를 가리키지만, outer()의 count에 계속 접근할 수 있다.
• outer()는 이미 실행을 마쳤지만, 반환된 inner()가 count를 기억하고 있기 때문에 count 값이 유지된다.

 

데이터 은닉 에제

function createCounter() {
  let count = 0;

  return {
    increment: function() {
      count++;
      console.log(count);
    },

    decrement: function() {
      count--;
      console.log(count);
    },

    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment();  // 1
counter.increment();  // 2
counter.decrement();  // 1
console.log(counter.getCount());  // 1

• count 변수는 외부에서 직접 접근할 수 없다.
• 오직 increment, decrement, getCount 메서드를 통해서만 조작이 가능하다.
• 클로저를 통해 count 변수가 은닉(캡슐화)된다.

 

클로저 사용 시 주의할 점

• 클로저는 메모리를 계속 차지하기 때문에 불필요한 클로저는 메모리 누수를 초래할 수 있다.
• 이벤트 핸들러 등에서는 클로저 내부 변수가 과도하게 유지되지 않도록 관리해야 한다.

 

es6 + 클로저 예제 (고차 함수와 클로저)

const makeAdder = (x) => (y) => x + y;

const add5 = makeAdder(5);
console.log(add5(10));  // 15
console.log(add5(3));   // 8

 

 

 

렉시컬 환경이란?

렉시컬(Lexical)이라는 단어는 코드가 작성된 위치(문맥)를 의미하는데

렉시컬 환경은 코드가 작성될 때(=컴파일 타임에) 결정되는 변수와 함수의 유효 범위(스코프)를 포함하는 구조적 환경을 말한다.

쉽게 말하면 “렉시컬 환경은 코드가 작성된 위치에 따라 변수, 상수, 함수 선언을 기억하고 관리하는 내부적인 자료구조” 

 

 

렉시컬 환경의 특징

• 코드가 작성될 때 결정된다. (즉, 실행 시점이 아니라 코드의 위치에 따라 스코프가 결정됨)
• 함수가 생성될 때 그 함수의 렉시컬 환경도 함께 생성된다.
•  클로저는 이 렉시컬 환경을 함수와 함께 기억한다.

면접에서도 물어보는 중요한 개념 중 하나다. 이번 기회에 지식 하나 더 늘었다 ‼️

 

 

이상 스텔라였습니다. ✍️