Reflect
자바스크립트의 내장 객체로 객체를 다루는 메서드를 모아놓은 도구 상자다
기존에
Object나in,delete로 하던 작업을 Reflect 메서드로 할 수 있음Object의 경우 실패하면 예외가 발생하지만 Reflect는 false만 반환하게됨
Proxy의 트랩과 1:1로 대응해서 같이 응용이 가능함
Reflect 예시
객체의 제거하기
ts
type User = { name: string; age?: number };
/**
* Object 방식
*/
const user1: User = { name: "동우", age: 27 };
console.log(user1); // { name: '동우', age: 27 }
delete user1.age;
console.log(user1); // { name: '동우' }
/**
* Reflect 방식
*/
const user2: User = { name: "동우", age: 27 };
console.log(user2); // { name: '동우', age: 27 }
Reflect.deleteProperty(user2, "age");
console.log(user2); // { name: '동우' }객체의 속성 설정하기
ts
type User = { name: string; age?: number };
/**
* Object 방식
*/
const user1: User = { name: "동우", age: 27 };
console.log(user1); // { name: '동우', age: 27 }
user1.age = 99;
console.log(user1); // { name: '동우', age: 99 }
/**
* Reflect 방식
*/
const user2: User = { name: "동우", age: 27 };
console.log(user2); // { name: '동우', age: 27 }
Reflect.set(user2, "age", 99);
console.log(user2); // { name: '동우', age: 99 }객체의 속성 존재여부 확인하기
ts
type User = { name: string; age?: number };
/**
* Object 방식
*/
const user1: User = { name: "동우", age: 27 };
console.log("name" in user1); // true
console.log("email" in user1); // false
/**
* Reflect 방식
*/
const user2: User = { name: "동우", age: 27 };
console.log(Reflect.has(user2, "name")); // true
console.log(Reflect.has(user2, "email")); // falseProxy + Reflect 사용하기
ts
type User = { name: string; age: number };
const user: User = { name: "동우", age: 27 };
const userProxy = new Proxy(user, {
get(target, prop) {
console.log(`${String(prop)}에 접근을 시도중임`);
return Reflect.get(target, prop);
},
set(target, prop, value) {
console.log(`${String(prop)}를 ${value}로 변경합니다`);
return Reflect.set(target, prop, value);
},
});
console.log(userProxy.name); // name에 접근을 시도중임 -> 동우
userProxy.name = "코딩"; // name를 코딩로 변경합니다
userProxy.age = 20; // age를 20으로 변경합니다결론
Reflect는 객체를 조작하기 위한 정적 메서드를 제공하는 자바스크립트 내장 객체임
연산자, Object 메서드보다 일관된 동작을 보장해주며 예외가 아닌 성공/실패 여부를 불린 값으로 반환함
메타프로그래밍을 할때 매우 유용하나 일상적인 코드에서는 직접 사용할일이 적음