ECMAScript 2015

ECMAScript 2015 (ES6, ES6 Harmony)에 추가된 일부 기능 정리

Rest parameters

Rest parameters를 이용하면 배열 형태로 함수에 임의의 수의 매개변수를 넣겨줄 수 있다.

function say(name, ...args) {
  console.log({ args });
  return `I'm ${name}. I say ${args}`;
}

image

for...of loop

for (variable of iterable) { // ... }

반복 가능한 객체(iterable objects)를 반복하는 루프(loop)를 만든다.

블록 안에서 루프 변수를 재할당 할 거라면 let을 사용하면 되고 아닐 경우 const를 사용하자.

const iterable1 = "abc";

for (const value of iterable1) {
  console.log(value);
}

// ----

const iterable2 = [1, 2, 3];

for (let value of iterable2) {
  value += 1;
  console.log(value);
}

Proxy

Proxy 객체를 사용하면 해당 개체에 대한 기본 작업을 가로채고 재정의할 수 있는 다른 개체에 대한 프록시를 만들 수 있다.

Proxy 객체는 생성시 두개의 파라미터를 갖는다.

new Proxy(target, handler)

• target: 프록시하기 원하는 원복 객체를 의미한다.

• handler: 가로채거나 재정의하는 방법을 정의하는 객체이다.

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler = {
  get: function (target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.message1); // hello
console.log(proxy.message2); // world

프록시를 이용하면 validation도 아래와 같이 구현 가능하다.

const validator = {
  set: function (obj, prop, value) {
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("The age is not an integer");
      }
      if (value > 200) {
        throw new RangeError("The age seems invalid");
      }
    }

    // The default behavior to store the value
    obj[prop] = value;

    // Indicate success
    return true;
  },
};

const person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = "young"; // Throws an exception
person.age = 300; // Throws an exception