[ES6] Proxy 객체와 Symbol

Proxy 객체

• 이름처럼 대리자 역할을 해주는 객체
• 객체의 값이 변경이 일어나면 대신 나서준다 변경 동작에 맞는 메서드를 실행할 수 있다.
• 값의 변경을 감지하는 get, set, has, deleteProperty, defineProperty등의 내장메서드가 구현이 되어있다.
• 특정 객체의 값이 바뀌었을때 화면의 글씨를 바꾼다던지 할때 유용함 -> 화면과 데이터의 양방향 바인딩 구현 용이!

// 점수 계산
var dummy = {
  score: 0,
  lines: 0
}

var prx = new Proxy(dummy, {
  set: (obj, prop, value) => {
    // 대상 객체, set이 일어난 대상, 할당된 값
    console.log("set동작", obj, prop, value);
  },
  get: (obj, prop) => {
    // 대상 객체, get이 일어난 대상
    console.log("get동작", obj, prop)
  }
});

// set
prx.score=1; // set동작 {score: 0, lines: 0} score 1
prx.lines=2; // set동작 {score: 0, lines: 0} lines 2

// get
var s = prx.score; // get동작 {score: 0, lines: 0} score
var l = prx.lines; // get동작 {score: 0, lines: 0} lines

• 프록시와 리플렉트 참고자료
• http://hacks.mozilla.or.kr/2016/03/es6-in-depth-proxies-and-reflect/

Symbol

• 새로 추가된 자료형 -> typeof Symbol() // "symbol"
• 생성자 함수가 있음에도 다른 객체들처럼 new로 생성할 수 없다. -> new Symbol() // Error
• 유일하고 불변한 값을 가지기때문에 유일한 객체의 키로 쓰기 좋은 것으로 알려져 있다.
• 그냥 선언하면 유일한 키로 쓰이고 공유해서 쓰려면 for() 메서드로 생성해야 한다.

const shareSymbol = Symbol.for('share');
const shareKey = Symbol.keyFor(shareSymbol);
console.log(shareKey);       // share

const uniqSymbol = Symbol('uniq');
const uniqKey = Symbol.keyFor(uniqSymbol);
console.log(uniqKey);        // undefined
console.log(Symbol('uniq')); // Symbol(uniq)

iteratable Symbol

• 내부의 iterator가 구현되어있어서 generator처럼 next()를 호출시 done과 value가 담긴 객체를 반환한다
• 위의 특징 때문에 genertor를 객체 버젼으로 쓴다는 느낌이다.

const arr = [1, 2, 3];

// 배열에서 Symbol.iterator를 key로 해서 호출하면 iterator를 반환한다.
const it = arr[Symbol.iterator]();

// generator함수 처럼 사용할수 있다.
console.log(it.next()); // {value: 1, done: false}
console.log(it.next()); // {value: 2, done: false}
console.log(it.next()); // {value: 3, done: false}
console.log(it.next()); // {value: undefined, done: true}

• generator로 구현했던 것처럼 피보나치 수열 구하기

// Symbol.iterator로 피보나치 구현
function fnFibonacci(_num){
  const fib = {
    [Symbol.iterator]() {
      let a = 0;
      let b = 1;
      return {
        next() {
          let c = a;
          a = b;
          b = c + a;
          // [a, b] = [b, a+b]
          return { done: a > _num, value: a };
        },
      };
    }
  };
  const arr = [];
  for (const num of fib) {
    if(num > _num) break;
    arr.push(num)
  }
  return arr;
}

console.log(fnFibonacci(50));