[JavaScript] 클로저(Closure)란?

• 클로저 (Closure) 란?
• 클로저 패턴의 프로그래밍 패턴
  • 은닉화 (Encapsulation)
  • 함수 팩토리 (Function Factory)
  • 비동기 프로그래밍에서 클로저
  • 메모이제이션 패턴 (Memoization Pattern)

---

- 클로저 (Closrue) 란?

 

클로저는 반환된 내부 함수가 선언됐을 때의 렉시컬 환경(Lexical envirionment)인 스코프를 기억하며,

 

만약 자신이 선언됐을 때 환경(scope) 밖에서 호출되어도 스코프에 접근할 수 있는 함수를 말한다.

 

여기서 스코프는, 함수를 어디서 선언했는지에 따라 결정된다.

 

이를 렉시컬 스코핑(Lexical scoping)이라고 한다.

 

function outer() {
  const x = 10;
  const inner = () => {
  	console.log(x);
  };
  inner();
}

outer();  // 10

 

위의 코드에서 inner() 함수는 outer() 함수 내부에 선언되었기 때문에 inner()의 상위 스코프는 outer()이다.

 

inner() 함수는 outer() 함수의 내부 함수이므로, inner() 함수는 자신이 속한 렉시컬 스코프(outer 함수)를

참조할 수 있다.

 

 

혹시 스코프가 기억이 나지 않는다면?

2024.10.24 - [Web/JavaScript] - [JavaScript] 스코프(Scope) - 전역 스코프, 지역 스코프

 

---

- 클로즈 패턴의 프로그래밍 패턴

 

① 은닉화 (Encapsulation)

클로저를 사용하여 내부 상태나 데이터를 외부로부터 은닉할 수 있다.

 

이는 객체 지향 프로그래밍에서 private 변수를 선언하는 것과 비슷하다.

function createCounter() {
    let count = 0; // private 변수

    return {
        increment: function() {
            count++;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

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

 

② 함수 팩토리 (Function Factory)

클로저를 사용하여 특정 동작을 수행하는 여러 함수를 생성할 수 있다.

 

각 함수는 고유의 상태를 유지 가능하다.

function createMultiplier(factor) {
    return function(x) {
        return x * factor;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

 

③ 비동기 프로그래밍에서 클로저

비동기 프로그래밍에서 클로저는 외부 함수의 상태를 유지할 수 있게 해준다.

 

이는 콜백 함수가 외부 변수를 참조할 수 있도록 해준다.

function fetcData(url) {
  let result;
  return function (callback) {
    setTimeout(() => {
      result = "Fetched... Success";
      callback(result);
    }, 1000);
  };
}

const fetchFromNaver = fetcData("https://www.naver.com");
fetchFromNaver((data) => console.log(data));

 

④ 메모이제이션 패턴 (Memoization Pattern)

클로저는 함수의 결과를 저장하고, 동일한 인수가 주어졌을 때 이미 계산된 결과를 반환함으로써

 

성능을 향상시킬 수 있다.

function memoization(fn) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args); // JSON 변환 -> 문자열로 취급됨
    if (cache[key]) return cache[key];
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

function slowFunction(num) {
  for (let i = 0; i < 9999999999; i++);
  return num * 2;
}

const memoizedFn = memoization(slowFunction);
console.log(memoizedFn(5)); // 10
console.log(memoizedFn(5));
console.log(memoizedFn(5));
console.log(memoizedFn(5));
memoizedFn = null;

 

---

참고 강의: https://www.sucoding.kr/