클로저, 코드 속 비밀 상자의 모든 것! - 코드카인 티스토리

안녕하세요 😊 코드카인 여러분!

"클로저(Closure)", 이름은 어렵게 들릴지 몰라도 사실 우리가 매일 사용하는 일상 속 행동과 매우 닮은 개념입니다. 자, 커피숍에서 주문한 커피를 기억하고 주문 번호로 불렀을 때 "내 거다!" 하고 가져가는 상황을 떠올려 보세요. 클로저는 프로그램 안에서 이와 같은 기억의 힘을 제공합니다. 더 깊이 들어가 볼까요? 😊

---

📌 클로저란 무엇일까요?

자바스크립트에서 클로저는 "함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합"을 의미합니다. 즉, 함수가 선언될 당시의 변수와 그 환경을 기억하고 사용하는 기능입니다.

이걸 더 쉽게 설명하자면, "지금은 보이지 않는 공간 속에서 필요한 도구를 챙겨오는 비밀 상자"라고 할 수 있어요.

---

🎯 클로저를 어떻게 활용하나요?

1. 상태 유지

클로저는 함수가 종료된 후에도 변수를 기억하여 상태를 유지합니다. 예를 들어, 숫자를 증가시키는 카운터를 만들어 보죠.

function createCounter() {
  let count = 0; // 클로저가 기억할 변수

  return function () {
    count++;
    console.log(`현재 카운트: ${count}`);
  };
}

const counter = createCounter();
counter(); // 현재 카운트: 1
counter(); // 현재 카운트: 2
counter(); // 현재 카운트: 3

어떻게 작동하나요? 🤔

• createCounter 함수가 실행되면 내부 count 변수가 생성됩니다.
• 반환된 내부 함수는 count를 기억하고 계속 접근할 수 있습니다. 이렇게 내부 함수가 외부 함수의 변수를 "캡처"하는 것이 클로저입니다.

---

2. 데이터 은닉

클로저를 활용하면 중요한 데이터를 외부에서 접근하지 못하도록 보호할 수 있습니다. 예를 들어, 은행 계좌를 관리하는 예제를 봅시다.

function createBankAccount(initialBalance) {
  let balance = initialBalance; // 클로저가 보호할 변수

  return {
    deposit(amount) {
      balance += amount;
      console.log(`입금 완료! 잔액: ${balance}원`);
    },
    withdraw(amount) {
      if (amount > balance) {
        console.log("잔액 부족!");
      } else {
        balance -= amount;
        console.log(`출금 완료! 잔액: ${balance}원`);
      }
    },
  };
}

const myAccount = createBankAccount(1000);
myAccount.deposit(500); // 입금 완료! 잔액: 1500원
myAccount.withdraw(700); // 출금 완료! 잔액: 800원
myAccount.withdraw(1000); // 잔액 부족!

왜 유용한가요? 😊

• 외부에서 balance에 직접 접근하거나 수정할 수 없습니다.
• 중요한 정보 보호와 데이터 무결성을 보장합니다.

---

3. 콜백 함수

클로저는 비동기 작업이나 이벤트 핸들러에서도 강력한 도구입니다. 파일 다운로드 상태를 추적한다고 가정해 볼까요?

function downloadFile(fileName) {
  let progress = 0;

  const intervalId = setInterval(function () {
    progress += 10;
    console.log(`${fileName}: 다운로드 ${progress}% 완료`);

    if (progress === 100) {
      console.log(`${fileName}: 다운로드 완료!`);
      clearInterval(intervalId);
    }
  }, 500);
}

downloadFile("example.txt");

여기서 클로저는?

• 비동기 함수 setInterval 내부에서 progress 값을 계속 기억하고 업데이트합니다.

---

🌟 클로저를 이해하는 일상 속 비유

냉장고 메모를 떠올려 보세요.

• 냉장고에 오늘 먹을 메뉴를 적어둔다면, 문을 열지 않아도 기억하고 활용할 수 있죠?
• 클로저는 함수가 종료된 후에도 그 함수 안의 메모를 참고하는 것과 같습니다.

---

😊 마무리하며..

클로저는 개발자라면 반드시 알아야 할 핵심 개념이에요.
처음엔 조금 복잡해 보일 수 있지만, 자주 사용하다 보면 일상이 됩니다.
코드 속의 비밀 상자, 클로저를 활용해 여러분의 프로젝트를 더 강력하고 안전하게 만들어 보세요!

"여러분은 이미 잘하고 있어요! 😊"