안녕하세요. 이번 시간에는 Reflect API에 대해 알아보겠습니다! 사실 Reflect API는 이미 ES5에도 있습니다. 하지만 흩어져있는 기능들을 한 군데에 모은 거라고 생각하면 쉽습니다.
API라는 말처럼 사용자는 Reflect 객체 안에 있는 메소드들을 사용하기만 하면 됩니다. 메소드는 ES2015에서 알아서 잘 정리해 두었습니다. 다음 메소드들을 보면서 이거 어디서 많이 봤는데 할 수도 있습니다. 왜냐면 이미 있던 메소드들이거든요. 예전의 Object 객체 강좌를 한 번 보세요.
Reflect API
Reflect.get
객체의 속성을 조회합니다.
const obj = { a: 1, b: 'zero', c: true };
const arr = [1, 'zero', true];
Reflect.get(obj, 'a'); // 1
Reflect.get(arr, 1); // 'zero'
Reflect.set
객체의 속성에 값을 설정합니다.
Reflect.set(obj, 'd', ['arg1', 'arg2']);
obj.d; // ['arg1', 'arg2']
Reflect.apply
함수를 실행합니다. 두 번째 인자는 함수의 this를 바꾸고 싶을 때 사용하는 거라서, 보통은 null을 넣어줍니다. 세 번째 인자는 함수에 넣을 인자입니다.
const add = (a, b) => a + b;
Reflect.apply(add, null, [3, 5]); // 8
Reflect.construct
새로운 객체를 생성합니다.
function Person(first, last) {
this.firstName = first;
this.lastName = last;
};
const zero = Reflect.construct(Person, ['zero', 'cho']); // new Person('zero', 'cho')와 같음
Reflect.has
객체가 해당 속성을 가졌는지 확인합니다.
Reflect.has(obj, 'b'); // true
Reflect.deleteProperty
객체의 속성을 제거합니다.
Reflect.deleteProperty(obj, 'c'); // true
Reflect.defineProperty
객체의 속성에 설정을 합니다.
Reflect.defineProperty(obj, 'b', {
enumerable: false,
});
Reflect.getOwnPropertyDescriptor
객체의 속성 설정을 가져옵니다.
Reflect.getOwnPropertyDescriptor(obj, 'b'); // { value: 'zero', writable: true, enumerable: false, configurable: true }
Reflect.setPrototypeOf
객체의 prototype을 설정합니다.
const human = {
eat() { console.log('먹다'); },
move() { console.log('움직이다'); },
};
Reflect.setPrototypeOf(zero, human);
Reflect.getPrototypeOf
객체의 prototype이 뭔지 확인합니다.
Reflect.getPrototypeOf(zero); // { eat() {}, move() {} }
Reflect.preventExtensions
객체의 확장을 막습니다. (새로운 속성을 추가하는 것을 막습니다)
Reflect.preventExtensions(obj); // true
Reflect.isExtensible
객체가 확장 가능한 지 조회합니다.
Reflect.isExtensible(obj); // false
Reflect.ownKeys
Reflect.ownKeys(obj); // ['a', 'b', 'd']
객체의 속성명들을 배열로 반환합니다. 상속받은 속성과 enumerable하지 않은 것은 제외합니다.
기존에는 어떤 메소드는 Object 객체를 통해서 접근하고, 어떤 메소드는 만들어진 객체를 통해서 접근했습니다. Reflect API는 그것들을 Reflect 객체로부터 접근하도록 하나로 통일했다고 보면 됩니다. 메소드가 헷갈릴 경우에는 그냥 Reflect API를 사용하면 됩니다. 이상으로 ES2015 강좌를 마칩니다. 다음엔 ES2016 강좌를 진행하겠습니다!