JavaScript Academy · 강의

클로저로 비공개 변수 만들기

함수 범위 뒤에 상태를 숨깁니다.

클로저로 비공개 변수 만들기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

클로저를 통한 정보 은닉

JavaScript에는 오랫동안 객체 필드를 비공개로 만드는 내장 방법이 없었습니다. 클로저가 그 방법을 제공합니다. 함수 안의 변수는 바깥에서 보이지 않지만, 함수 안에서 정의된 함수에서는 접근할 수 있습니다.

function secretBox() {
  let secret = "hidden";
  return {
    reveal: () => secret
  };
}
const box = secretBox();
console.log(box.reveal()); // "hidden"
console.log(box.secret);   // undefined

비공개 상태를 사용하는 카운터

대표적인 예는 카운트를 직접 함부로 변경할 수 없는 카운터입니다. 반환된 메서드만 카운트를 변경할 수 있습니다.

function makeCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    value: () => count
  };
}
const c = makeCounter();
c.increment();
c.increment();
console.log(c.value()); // 2

상태는 건드릴 수 없습니다

바깥에서 count에 접근할 방법은 없습니다. 읽으려는 시도는 undefined를 반환하므로, 메서드를 거쳐야 합니다.

function makeCounter() {
  let count = 0;
  return { inc: () => ++count, get: () => count };
}
const c = makeCounter();
c.count = 100;        // creates an unrelated property
console.log(c.get()); // 0 - real count untouched

규칙 적용하기

접근이 메서드를 통해 이루어지므로, balance가 음수가 되지 않도록 하는 것과 같은 불변 조건을 적용할 수 있습니다.

function account(start) {
  let balance = start;
  return {
    withdraw: (n) => {
      if (n > balance) return "insufficient";
      balance -= n;
      return balance;
    },
    balance: () => balance
  };
}
const a = account(100);
console.log(a.withdraw(150)); // "insufficient"
console.log(a.withdraw(40));  // 60

여러 비공개 필드

클로저 하나로 여러 변수를 동시에 보호할 수 있습니다. 이 변수들은 모두 숨겨지며 반환된 메서드 사이에서만 공유됩니다.

function user(name) {
  let logins = 0;
  let lastSeen = null;
  return {
    login: () => { logins++; lastSeen = "now"; },
    stats: () => ({ name, logins, lastSeen })
  };
}
const u = user("Ada");
u.login();
console.log(u.stats()); // { name: "Ada", logins: 1, lastSeen: "now" }

비공개 도우미 함수

데이터뿐만 아니라 내부 함수도 숨길 수 있습니다. 공개하는 메서드만 외부에 노출됩니다.

function temperature() {
  let celsius = 0;
  const toF = (c) => c * 9 / 5 + 32; // private
  return {
    set: (c) => { celsius = c; },
    fahrenheit: () => toF(celsius)
  };
}
const t = temperature();
t.set(100);
console.log(t.fahrenheit()); // 212

독립적인 인스턴스

팩토리를 호출할 때마다 별도의 비공개 상태가 만들어지므로, 인스턴스끼리 서로 영향을 주지 않습니다.

function makeCounter() {
  let n = 0;
  return { inc: () => ++n };
}
const a = makeCounter();
const b = makeCounter();
console.log(a.inc(), a.inc()); // 1 2
console.log(b.inc());          // 1

읽기 전용으로 공개하기

세터 없이 게터만 공개하면 내부적으로는 값을 변경할 수 있으면서 외부에서는 읽기 전용으로 만들 수 있습니다.

function timer() {
  let ticks = 0;
  setupInternally();
  function setupInternally() { ticks = 3; }
  return { ticks: () => ticks };
}
const t = timer();
console.log(t.ticks()); // 3 - no way to set it outside

비교: 클래스 필드

최신 JavaScript는 #private 클래스 필드도 지원합니다. 팩토리 함수에 사용하거나 클래스 없이 정보 은닉을 구현하고 싶을 때는 클로저가 여전히 유용합니다.

class Counter {
  #count = 0;
  inc() { return ++this.#count; }
}
const c = new Counter();
console.log(c.inc()); // 1

작동하는 원리

반환된 메서드는 바깥 변수에 대한 클로저입니다. 바깥 함수는 반환되었지만, 클로저가 여전히 해당 스코프를 참조하기 때문에 그 스코프가 계속 유지됩니다.

메모이제이션 캐시

비공개 상태는 캐시에 매우 유용합니다. 캐시 객체가 숨겨진 채 호출 사이에서도 유지됩니다.

function memoSquare() {
  const cache = {};
  return (n) => {
    if (cache[n] === undefined) cache[n] = n * n;
    return cache[n];
  };
}
const sq = memoSquare();
console.log(sq(4)); // 16
console.log(sq(4)); // 16 (cached)

빠른 확인

클로저를 사용한 비공개 변수입니다.

복습

클로저는 정보 은닉을 구현합니다. 팩토리 안의 변수는 바깥에서 접근할 수 없지만 반환된 메서드 사이에서는 공유됩니다. 이를 통해 함부로 변경할 수 없는 카운터, 불변 조건을 갖춘 balance, 숨겨진 도우미 함수와 캐시를 만들 수 있습니다. 팩토리를 호출할 때마다 독립적인 상태가 생성됩니다. 최신 #private 클래스 필드는 대안이지만, 팩토리 방식의 코드에서는 클로저가 특히 강력합니다.

자주 묻는 질문

“클로저로 비공개 변수 만들기” 강의는 무료인가요?

네 — “클로저로 비공개 변수 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“클로저로 비공개 변수 만들기”에서 뭘 배우나요?

함수 범위 뒤에 상태를 숨깁니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“클로저로 비공개 변수 만들기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기