[JS] 클로저란 무엇일까요?

클로저(closure)는 자바스크립트에서 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미합니다. 

즉, 클로저는 함수가 자신이 선언된 환경밖에서 호출될때에도 그 환경에 접근할 수 있도록 유지되는 특징을 말합니다. 

 

클로저는 어떻게 동작하나요? 

자바스크립트는 함수가 생성될 때 해당 함수가 선언된 위치의 렉시컬 스코프를 기억합니다. 이로 인해 함수 내부에서 사용하는 변수나 상수는 함수가 실행될 때의 스코프가 아니라 함수가 선언된 시점의 스코프를 기준으로 참조됩니다. 

 

클로저를 만드는 조건 

1. 함수 내부에 선언된 함수가 필요합니다. 

2. 내부 함수가 외부 함수의 변수에 접근해야합니다. 

 

클로저의 예제 

1. 기본적인 클로저 예제

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

  return function innerFunction() {
    count++; // 외부 변수에 접근
    console.log(`현재 count 값: ${count}`);
  };
}

const increment = outerFunction(); // outerFunction 실행, innerFunction을 반환
increment(); // 현재 count 값: 1
increment(); // 현재 count 값: 2
increment(); // 현재 count 값: 3

여기서 중요한 점은 innerFunction이 count에 접근할 수 있다는 점입니다. 

outerFunction이 종료되었지만, 클로저 덕분에 innerfunction은 count를 기억하고 계속 접근할 수 있습니다. 

 

2. 클로저를 사용한 데이터 캡슐화 

클로저는 데이터를 외부에서 직접 수정하지 못하도록 캡슐화하는데 유용합니다. 

function createCounter() {
  let count = 0;

  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
    getCount() {
      return count;
    }
  };
}

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

여기서 count는 외부에서 직접 접근할 수 없으며, 오직 반환된 객체의 메소드를 통해서만 접근할 수 있습니다. 

 

클로저의 주요 활용 사례 

1. 정보 은닉 및 데이터 캡슐화 

- 클로저를 이용하여 외부에서 접근이 불가능한 프라이빗 변수처럼 사용할 수 있습니다. 

2. 부분 적용함수 

- 함수의 일부 인자를 미리 고정하여 새 함수를 생성할 때 사용합니다. 

function multiply(multiplier) {
  return function (number) {
    return number * multiplier;
  };
}

const double = multiply(2); // multiplier = 2 고정
console.log(double(5)); // 10
console.log(double(10)); // 20

3. 이벤트 리스너 및 비동기 작업에서의 상태 유지 

- 클로저를 활용하여 이벤트 핸들러나 비동기 작업에서 상태를 유지할 수 있습니다. 

function setupButton() {
  let clickCount = 0;

  document.getElementById('myButton').addEventListener('click', function () {
    clickCount++;
    console.log(`버튼 클릭 횟수: ${clickCount}`);
  });
}

setupButton();

4. 메모리 효율적인 반복 작업 

- 클로저는 반복문에서 특정 변수 상태를 고정하여 효율적으로 작업을 수행할 수 있습니다. 

 

클로저 사용시 주의점 

1. 메모리 누수

클로저는 함수의 렉시컬 스코프를 계속 참조하므로 불필요한 클로저가 남앙 있으면 메모리 누수가 발생할 수 있습니다. 따라서 클로저가 더 이상 필요하지 않을 경우 참조를 해제해야합니다. 

2. 과도한 사용으로 코드 가독성 저하 

클로저가 많아지면 스코프 체인이 복잡해지고, 코드 가독성이 떨어질 수 있습니다. 적절한 설계를 통해 이를 방지해야합니다 .