클로저(Closure)

클로저(Closure)

클로저는 자바스크립트에서 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능이다.

주로, 함수 내부에서 선언된 다른 함수가 외부 함수의 변수에 접근할 수 있게 해주는 메커니즘을 의미하며, 클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어진다.

 

클로저의 형성 과정

1. 함수 내부의 함수
   • 클로저는 일반적으로 함수 내부에 선언된 함수가 반환되거나 다른 곳에서 호출될 때 형성된다.
2. 외부 변수 접근
   • 내부 함수는 자신이 선언된 스코프에 있는 변수들에 접근할 수 있다.
3. 생존 기간 연장
   • 외부 함수가 실행을 종료하더라도, 내부 함수가 외부 함수의 변수들을 참조하고 있다면, 해당 변수들은 메모리에서 지워지지 않고 유지된다.

 

예시 코드

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log(`Outer Variable: ${outerVariable}`);
    console.log(`Inner Variable: ${innerVariable}`);
  };
}

const newFunction = outerFunction('outside'); // outerFunction 호출, 클로저 생성
newFunction('inside');
// 결과:
// Outer Variable: outside
// Inner Variable: inside

 

• outerFunction이 호출되면 outerVariable은 "outside"로 초기화된다.
• innerFunction은 outerFunction 내부에 정의되었으므로 outerVariable에 접근할 수 있다.
• newFunction은 innerFunction을 참조하므로, 외부 함수가 종료된 후에도 outerVariable이 메모리에 유지된다.

 

 

활용 사례

상태 유지

클로저는 변수와 함수의 접근 범위를 제어하고 특정 데이터와 상태를 유지하기 위해 자주 활용된다.

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

 

 

데이터 은닉

클로저를 사용해 외부에서 접근 불가능한 private 변수를 구현할 수 있다.

function secret() {
  let privateData = "This is private";
  return {
    getSecret: function () {
      return privateData;
    },
    setSecret: function (newSecret) {
      privateData = newSecret;
    }
  };
}

const mySecret = secret();
console.log(mySecret.getSecret()); // This is private
mySecret.setSecret("New secret");
console.log(mySecret.getSecret()); // New secret

 

이벤트 핸들러

이벤트 핸들러에서 자주 사용된다.

function attachHandlers() {
  const buttons = document.querySelectorAll('button');
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function () {
      console.log(`Button ${i} clicked`);
    });
  }
}
attachHandlers();

 

클로저의 특징

1. 캡슐화: 외부에서 접근할 수 없는 변수를 은닉할 수 있다.
2. 메모리 관리: 클로저가 참조하는 변수는 내부 함수가 더 이상 사용되지 않을 때 가비지 컬렉션에 의해 해제된다.
3. 성능 이슈: 클로저가 너무 많거나 불필요하게 생성되면 메모리 누수를 유발할 수 있다.