작성자: 박소선

검수자 : 배광식

Reflect

Reflect는 자바스크립트의 built-in 객체이며 리플렉션(반영) 범주에 포함되는 객체 종류이다.

개요

• 다른 전역객체들과 다르게 new 오퍼레이터를 사용할 수 없고, 생성자가 아니다.
• Reflect 객체는 함수로 호출할 수 없다.

• Reflect의 프로퍼티, 메소드는 모두 static하다.

• 메타 프로그래밍 관점에서의 추가 설명

  1. Reflect는 자바스크립트 작업을 가로챌 수 있는 메소드를 사용할 수 있다.

  2. ES6 에서의 발전 사항

  3. Proxy 혹은 Reflect 객체를 사용하면 기본적인 자바스크립트 작업 (프로퍼티 조회, 할당 , 열거, 함수 호출 등)을 중간에 가로채서 의도에 맞게 변경할 수 있다.

  4. 이를 통해 meta level 자바스크립트 프로그래밍이 가능하다.

Reflect의 Methods

• Proxy 핸들러 메소드와 동일하다.

• 일부는 Object의 메소드와 동일하다.

• Reflect.apply()

  • Reflect.apply(target, thisArgument, argumentsList)
    • target: 적용할 함수
    • thisArgument: 적용처
    • argumentsList: 함수를 사용할 때 필요한 파라미터 값(들)
  • target 메소드의 일반적인 표현 방식: thisArgument.target(argumentsList)

[ES 5 표현]

Function.prototype.apply.call(Math.floor, undefined, [1.75]);

[ES 6 표현]

Reflect.apply(Math.floor, undefined, [1.75]);                             // output: 1;
Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]); // output: "hello"
Reflect.apply(''.charAt, 'ponies', [3]);                                  // output: "i"

// 위에서 사용한 target 함수들을 일반적으로 쓸 때는 아래와 같다. 
Math.floor(1.75)                               // output: 1
String.fromCharCode(104, 101, 108, 108, 111)   // output: "hello"    
'ponies'.charAt(3)                             // output: "i"

• Reflect.construct()

  • new 오퍼레이터 역할을 해주는 메소드이다.

  • Reflect.construct(target, argumentsList[, newTarget])

[ES 6 예제]

function func1(a,b,c) {
  this.sum = a + b + c;
}

const args = [1, 2, 3];

// object1과 object2는 동일한 것을 나타내는 표현들이다.
const object1 = new func1(...args);            // (...args)는 spread를 사용했다.
const object2 = Reflect.construct(func1, args);

console.log(object2.sum);  // output: 6
console.log(object1.sum);  // output: 6

// 추가 예시들
var date = Reflect.construct(Date, [1776, 6, 4]);
date instanceof Date;
date.getFullYear();

//subclass, new.target operator
function someConstructor() {}
var result = Reflect.construct(Array, [], someConstructor);

Reflect.getPrototypeOf(result); // output: "someConstructor.prototype"
Array.isArray(result);          // output: "true"

• Reflect.defineProperty()

  • [ES 5] Object.defineProperty에서는
    • property를 define하는 작업이 성공하면: object 반환, 실패하면 TypeError를 반환한다.
    • try...catch 블락으로 에러를 잡아야 한다.

  • [ES 6] Reflect.defineProperty는

    • Boolean 타입으로 성공/실패 여부를 반환한다.
    • 그래서 if...else 블럭을 쓰면 된다.

[ES 6 예제]

const object1 = {};

if (Reflect.defineProperty(object1, 'property1', {value: 42})) {
  console.log('property1 created!');         // success, output: "property1 created!"
} else {
  console.log('problem creating property1');  // failure
}

console.log(object1.property1);  // output: "42"
object1;                         // output: "propety1: 42"