자바스크립트 고급 #6 Symbol과 Proxy

const id1 = Symbol('id');
const id2 = Symbol('id');

console.log(id1 === id2);      // false — 같은 설명이라도 다른 심볼
console.log(typeof id1);        // 'symbol'
console.log(id1.toString());    // 'Symbol(id)'

const userInfo = Symbol('userInfo');

const obj = {};
obj[userInfo] = { id: 'u1' };   // 일반 키와 안 겹침
obj.userInfo = '문자열 키';       // 두 키는 완전히 다른 슬롯

obj[userInfo];   // { id: 'u1' }
obj.userInfo;     // '문자열 키'

const sym = Symbol('hidden');
const obj = {
  visible: 'A',
  [sym]: 'B',
};

Object.keys(obj);                       // ['visible']
JSON.stringify(obj);                     // '{"visible":"A"}'
for (const k in obj) console.log(k);    // visible

Object.getOwnPropertySymbols(obj);       // [Symbol(hidden)]
Reflect.ownKeys(obj);                    // ['visible', Symbol(hidden)]

const range = {
  from: 1, to: 3,
  [Symbol.iterator]() {
    let n = this.from;
    const last = this.to;
    return {
      next() {
        return n <= last
          ? { value: n++, done: false }
          : { value: undefined, done: true };
      },
    };
  },
};

[...range];   // [1, 2, 3]

const money = {
  amount: 1000,
  currency: '원',
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') return this.amount;
    if (hint === 'string') return `${this.amount}${this.currency}`;
    return `${this.amount}${this.currency}`;
  },
};

+money;             // 1000 (숫자 컨텍스트 — 'number' 힌트)
`${money}`;         // '1000원' (문자열 컨텍스트 — 'string' 힌트)
money + 500;        // '1000원500' (default 힌트 — 보통 string)

const a = Symbol.for('app/secret');
const b = Symbol.for('app/secret');

a === b;   // true — 같은 키로 등록된 같은 심볼

Symbol.keyFor(a);   // 'app/secret'

const target = { a: 1, b: 2 };

const proxy = new Proxy(target, {
  get(obj, key) {
    console.log(`읽기: ${key}`);
    return obj[key];
  },
  set(obj, key, value) {
    console.log(`쓰기: ${key} = ${value}`);
    obj[key] = value;
    return true;   // 성공 표시
  },
});

proxy.a;          // 읽기: a → 1
proxy.b = 10;     // 쓰기: b = 10

const withDefault = (defaultValue) => new Proxy({}, {
  get(target, key) {
    return key in target ? target[key] : defaultValue;
  },
});

const counts = withDefault(0);
counts.apple = 3;
console.log(counts.apple);    // 3
console.log(counts.banana);   // 0 (없지만 기본값)

function createValidatedUser() {
  return new Proxy({}, {
    set(target, key, value) {
      if (key === 'age' && (typeof value !== 'number' || value < 0)) {
        throw new TypeError('age는 양의 number여야 합니다');
      }
      target[key] = value;
      return true;
    },
  });
}

const user = createValidatedUser();
user.name = '커티스';     // OK
user.age = 30;            // OK
user.age = -1;            // ✗ TypeError
user.age = '서른';         // ✗ TypeError

function reactive(target, onChange) {
  return new Proxy(target, {
    get(obj, key) {
      const value = obj[key];
      if (typeof value === 'object' && value !== null) {
        return reactive(value, onChange);   // 중첩도 반응형
      }
      return value;
    },
    set(obj, key, value) {
      const old = obj[key];
      obj[key] = value;
      onChange({ key, old, value });
      return true;
    },
  });
}

const state = reactive({ count: 0 }, (e) => {
  console.log('변경:', e);
});

state.count++;
// 변경: { key: 'count', old: 0, value: 1 }

const api = new Proxy({}, {
  get(target, endpoint) {
    return (params) => {
      return fetch(`/api/${endpoint}?${new URLSearchParams(params)}`)
        .then((r) => r.json());
    };
  },
});

const users = await api.users({ active: true });
const posts = await api.posts({ tag: 'js' });
// 정의 안 한 모든 속성이 fetch 함수가 됨

const target = {};

const proxy = new Proxy(target, {
  get(obj, key, receiver) {
    console.log(`읽기: ${key}`);
    return Reflect.get(obj, key, receiver);   // 원본 동작 그대로
  },
  set(obj, key, value, receiver) {
    console.log(`쓰기: ${key}`);
    return Reflect.set(obj, key, value, receiver);
  },
});

Reflect.get(obj, key);                // obj[key]
Reflect.set(obj, key, value);         // obj[key] = value
Reflect.has(obj, key);                 // key in obj
Reflect.deleteProperty(obj, key);     // delete obj[key]
Reflect.ownKeys(obj);                  // 모든 자기 키 (Symbol 포함)
Reflect.construct(Cls, args);         // new Cls(...args)
Reflect.apply(fn, thisArg, args);     // fn.call(thisArg, ...args)