[JavaScript] 클로저

📚 클로저란 무엇인가요?

클로저는 함수와 그 함수가 선언될 때의 렉시컬 환경과의 조합이에요. 이는 내부 함수가 외부 함수의 스코프에 접근할 수 있게 해 주며, 외부 함수가 실행을 마친 후에도 외부 함수의 변수에 접근할 수 있게 해요.

 

클로저는 '백팩'에 비유할 수 있어요. 함수가 실행될 때마다, 그 함수는 자신만의 '백팩'을 가지게 돼요. 이 '백팩' 안에는 함수가 생성될 때의 환경, 즉 외부 함수의 변수들이 들어 있어요. 함수가 어디로 가든, 이 '백팩'을 들고 다니면서 필요할 때마다 외부 함수의 변수들을 사용할 수 있게 되죠.

 

---

🖥️ 클로저의 사용

1. 데이터 은닉과 캡슐화

• 클로저를 사용하면, 함수 외부에서 접근할 수 없는 private 변수를 만들 수 있어요. 이는 데이터 은닉과 캡슐화를 가능하게 해요.

function createCounter() {
  let count = 0;
  return {
    increase: function() { count++; },
    getCount: function() { return count; }
  };
}

const counter = createCounter();
counter.increase();
console.log(counter.getCount()); // 1

이 예제에서 클로저는 'createCounter' 함수로부터 반환된 'increase'와 'getCount' 함수입니다.
이 함수들은 'createCounter'의 지역 변수 'count'에 접근할 수 있게 해 주며, 이 변수를 외부로부터 숨기고 보호하는 역할을 합니다.

2. 상태 유지

• 클로저는 함수가 호출될 때마다 상태를 유지할 수 있게 해요. 이는 반복되는 작업이나 이벤트 처리에 유용하게 사용될 수 있어요.

function createUniqueIdGenerator() {
  let id = 0;
  return function() {
    return ++id;
  };
}

const generateId = createUniqueIdGenerator();
console.log(generateId()); // 1
console.log(generateId()); // 2

여기서 클로저는 'createUniqueIdGenerator' 함수가 반환하는 익명 함수로, 'id' 변수의 값을 기억하고 각 함수 호출 사이에 이 값을 유지합니다.
이를 통해 함수가 호출될 때마다 고유한 ID 값을 생성하고 관리할 수 있습니다.

 

---

🤔 클로저의 응용

클로저는 단순히 데이터 은닉이나 상태 유지뿐만 아니라, 다양한 방식으로 응용될 수 있어요.

1. 콜백 함수에서의 상태 유지

• 클로저는 비동기 콜백 함수에서 특정 데이터의 상태를 유지하는 데 사용될 수 있어요. 이는 비동기 작업이 완료된 후에도 특정 데이터에 접근해야 할 때 유용해요.

function fetchDataWithCache(url) {
  const cache = {};
  return function(callback) {
    if (cache[url]) {
      callback(cache[url]); // 캐시된 데이터 반환
    } else {
      fetchData(url, function(data) {
        cache[url] = data; // 데이터 캐싱
        callback(data);
      });
    }
  };
}

const fetchWithCache = fetchDataWithCache();
fetchWithCache('https://api.example.com/data', function(data) {
  console.log('Received data:', data);
});

이 예제에서 'fetchDataWithCache' 함수는 클로저를 사용하여 'cache' 객체의 상태를 유지합니다.
이를 통해 동일한 URL로 데이터를 요청할 때마다 네트워크 요청을 줄이고 캐시 된 데이터를 재사용할 수 있습니다.

2. 모듈 패턴

• 클로저는 자바스크립트에서 모듈 패턴을 구현하는 데 사용될 수 있어요. 이를 통해 공개 API와 비공개 변수 및 함수를 분리할 수 있어요.

const myModule = (function() {
  let privateVar = '비밀';
  function privateFunction() {
    console.log('비공개 함수');
  }

  return {
    publicMethod: function() {
      console.log('공개 메서드');
      console.log(privateVar);
      privateFunction();
    }
  };
})();

myModule.publicMethod(); // 공개 메서드와 비공개 변수 및 함수에 접근 가능

이 패턴에서 클로저는 모듈의 비공개 멤버를 외부로부터 숨기는 동시에, 공개 API를 통해 접근할 수 있게 합니다.

3. 함수 커링(Currying)

• 클로저는 함수 커링에도 사용될 수 있어요. 커링은 함수의 인자를 분할하여, 각 인자를 받는 단계마다 새로운 함수를 반환하는 기법이에요.

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 10

'multiply' 함수는 클로저를 사용하여 첫 번째 인자 'a'의 상태를 유지합니다.
이후 'double' 함수는 'multiply(2)'의 결과로 생성되며, 이 함수에 인자를 전달하면 '2'와 그 인자의 곱을 반환합니다.

 

---

🚨 주의할 점

• 클로저는 메모리 누수를 일으킬 수 있으므로, 사용하지 않는 클로저는 적절히 처리해야 해요.
• 클로저 내부의 변수는 외부에서 직접 접근할 수 없으므로, 변수를 조작하려면 함수를 통해 접근해야 해요.

 

---

📖 결론

클로저는 자바스크립트에서 강력한 기능을 제공합니다. 데이터 은닉, 상태 유지, 모듈 패턴 구현 등 다양한 상황에서 유용하게 사용될 수 있습니다. 클로저를 이해하고 올바르게 사용하는 것은 자바스크립트 개발자로서 중요한 능력 중 하나입니다.

 

---

🔗 추가 정보

• 자바스크립트의 클로저에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.