🎯 클로저(Closure)란 무엇인가요? 🧐

안녕하세요! 👋 오늘은 클로저에 대해 알아보겠습니다! 😊

1️⃣ 클로저의 정의 📚

클로저는 자신이 생성될 때의 환경을 '기억'하는 함수입니다. 즉, 함수가 속한 렉시컬 스코프를 기억하여, 함수가 렉시컬 스코프 밖에서 실행될 때도 접근할 수 있는 것을 말합니다. 🧩

// 클로저 예제
function outer() {
  let outerVar = 'Outer';
  
  function inner() {
    console.log(outerVar); // 이 때의 outerVar는 클로저에 의해 접근 가능합니다.
  }

  return inner;
}

const closureFunc = outer();
closureFunc(); // 'Outer'

위 코드에서 `closureFunc`는 `outer`함수의 `inner`함수를 참조합니다. `inner` 함수는 외부 스코프인 `outer`함수의 변수 `outerVar`에 접근하며, 이는 클로저의 특징을 잘 보여주는 예시입니다. 👏

2️⃣ 클로저의 특징 🌟

🔹 렉시컬 스코핑

클로저는 렉시컬 스코핑을 따릅니다. 함수가 선언될 때 그 위치에 따라 상위 스코프를 결정하는 방식이 바로 렉시컬 스코핑입니다. 클로저는 이 렉시컬 스코핑을 기반으로 동작합니다. 💼

🔹 상태 유지

클로저는 상태를 기억하고 변경할 수 있습니다. 클로저로 참조되는 자유 변수는 함수가 종료된 이후에도 사라지지 않고 메모리에 유지됩니다. 이 특성 때문에 클로저는 이전에 참조한 변수를 계속 참조할 수 있습니다. 📦

3️⃣ 클로저의 스코프 범위 🌍

클로저는 두 가지 스코프를 가집니다.

🔹 생성 시점의 스코프

클로저는 자신이 생성될 때의 환경, 즉 스코프를 기억합니다. 이는 클로저가 선언 된 위치의 스코프와 그 상위 스코프를 포함합니다. 🗃

🔹 실행 시점의 스코프

클로저는 실행되는 위치의 스코프 또한 접근 가능합니다. 따라서 클로저는 생성 시점의 스코프와 실행 시점의 스코프, 두 가지 스코프를 참조할 수 있습니다. 🎭

4️⃣ 클로저 패턴 🎨

클로저는 여러 패턴에서 활용됩니다. 이 중 몇 가지를 살펴보겠습니다.

🔹 데이터 은닉과 캡슐화

// 데이터 은닉과 캡슐화 예제
function Counter() {
  let count = 0; // 이 변수는 외부에서 접근 불가능합니다.

  return {
    increase() {
      count++;
      console.log(count);
    },
    decrease() {
      count--;
      console.log(count);
    },
  };
}

const counter = Counter();
counter.increase(); // 1
counter.decrease(); // 0

위 예제에서 `Counter` 함수는 객체를 반환하며, 이 객체의 메소드는 클로저를 통해 `Counter`의 지역 변수인 `count`에 접근합니다. 이런 방식은 데이터 은닉과 캡슐화를 가능하게 합니다. 🕵️‍♀️

🔹 부분 적용 함수와 커링

// 부분 적용 함수와 커링 예제
function multiply(a, b) {
  return a * b;
}

function partial(func, a) {
  return function(b) {
    return func(a, b);
  };
}

const double = partial(multiply, 2);
console.log(double(3)); // 6

위 예제는 `partial` 함수를 통해 `multiply` 함수의 일부 인수를 고정하여 새로운 함수를 만드는 부분 적용 함수와 커링을 보여줍니다. `double` 함수는 클로저를 통해 `multiply`와 인수 `2`를 기억합니다. 🧮

5️⃣ 클로저를 활용한 실습 🛠️

이제 여러분도 클로저를 이용하여 간단한 코딩을 해보시기 바랍니다.

예를 들어, 클로저를 활용하여 고객들의 ID와 비밀번호를 안전하게 보호할 수 있는 로그인 시스템을 만들어 보세요. 😎

📝 마치며

클로저는 자바스크립트의 중요 한 개념 중 하나입니다. 이번 글을 통해 클로저의 정의, 특징, 스코프 범위, 그리고 클로저 패턴에 대해 알아보았습니다. 😁

더 깊이 알아보고 싶다면, MDN의 클로저 가이드를 참조하세요. 📖

여러분의 코딩 여정에 도움이 되기를 바랍니다. 🙏 이 글에 대해 궁금한 점이나 오류를 발견하셨다면, 댓글로 알려주세요! 👇

프론트에서 풀스택까지

클로저(Closure)란?