반응형
Jake Seo
제이크서 위키 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (715)
    • 일상, 일기 (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 플라이웨이트패턴
  • 싱글톤 패턴
  • 추상 팩터리 패턴
  • 자바 디자인패턴
  • prerendering
  • 프로그래머의 뇌
  • Pre-rendering
  • 자바스크립트
  • 이펙티브자바
  • serverless computing
  • Next.js
  • 메이븐 라이프사이클
  • 토비의 스프링
  • 자바
  • 메이븐 페이즈
  • pnpm
  • 팩터리 메서드 패턴
  • 외래키 제약조건
  • 참조 해제
  • 자바스크립트 면접
  • 느린 쿼리
  • 도커공식문서
  • item8
  • 작업기억공간
  • 메이븐 골
  • 싱글턴
  • 서버리스 컴퓨팅
  • 스프링 검증
  • MSSQL
  • Java
  • try-with-resources
  • rust
  • 이펙티브 자바 item9
  • 알고리즘
  • 객체복사
  • item9
  • bean Validation
  • 러스트
  • 자바스크립트 인터뷰
  • NEXT JS
  • 슬로우 쿼리
  • 빈 검증
  • next js app
  • 싱글톤
  • 이펙티브 자바
  • item7
  • Javadoc 자바독 자바주석 주석 Comment
  • 자료구조
  • 자바 검증
  • 디자인패턴

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 위키 블로그

자바스크립트/모던 자바스크립트

모던 자바스크립트, Reflect (리플렉트) 객체란?

2023. 3. 20. 01:49

리플렉트 (Reflect) 란?

  • 자바스크립트의 built-in object 이다.
  • 일반적으로 프록시 객체의 핸들러에서 기본 동작을 제공하기 위해서 사용된다.
  • Object 가 가지는 메서드들을 비슷하게 가진다.
    • defineProperty()
    • getOwnPropertyDescriptor()
    • getPrototypeOf()
    • setPrototypeOf()
    • preventExtensions()
  • 생성자로 생성할 수 없는 객체이다. (it's not constructible)
    • Reflect.xxx() 와 같은 정적 메서드를 이용하기 위한 객체이다.
    • new Reflect() 는 아무런 의미가 없다.
  • 가로챌 수 있는 (interceptable) 자바스크립트 연산에 대한 메서드를 제공한다.
    • interceptable 의 의미는 프록시를 이용해 커스터마이징할 수 있는 연산을 말한다.
    • 모든 JS 연산이 interceptable 은 아니다.
      • delete 연산이나 . 으로 속성을 접근하는 등의 연산은 interceptable 하지 않다.

get 메서드 관련 특징: 형변환을 하지 않는다.

  • Object: getPrototypeOf() 를 수행하면 primitive 타입을 오브젝트로 변환한다.
  • Reflect: getPrototypeOf() 를 수행해도 primitive 타입을 오브젝트로 변환하지 않는다.
console.log(Object.getPrototypeOf(1));
/*
객체로 변환하여 처리
Number {0, constructor: ƒ, toExponential: ƒ, toFixed: ƒ, toPrecision: ƒ, …}
*/

console.log(Reflect.getPrototypeOf(1));
/*
객체로 변환하지 않고 에러를 던짐
Uncaught TypeError: Reflect.getPrototypeOf called on non-object
    at Reflect.getPrototypeOf (<anonymous>)
    at <anonymous>:1:9
*/

set 메서드 관련 특징: 결과로 객체를 반환하지 않는다.

  • Object.defineProperty() 를 수행하면, 객체의 내용을 반환한다.
  • Reflect.defineProperty() 를 수행하면, 성공/실패를 의미하는 true/false 를 반환한다.
const arr = [1, 2, 3];
arr.x = "123";
console.log(
  Object.defineProperty(arr, "x", {
    value: 10,
  })
);

/*
(3) [1, 2, 3, x: 10]
*/

console.log(
  Reflect.defineProperty(arr, "x", {
    value: 50,
  })
);

/*
true
*/

Reflect.apply()

function example(a, b, c) {
  console.log(`this.name = ${this.name}, a = ${a}, b = ${b}, c = ${c}`);
}

const thisArg = { name: "test" };
const args = [1, 2, 3];

Reflect.apply(example, thisArg, args);
example.apply(thisArg, args);
  • 위 소스코드에서 Reflect.apply() 와 example.apply() 는 같은 역할을 한다.
  • Reflect.apply() 의 장점은 Function.prototype.apply() 가 변조되어도 사용 가능하다는 것이다.
    • JS 함수가 아니더라도, [[Call]] 내부 작업이 있는 모든 객체에서 작동한다.

Reflect.construct()

  • 생성자 함수를 통해 새 인스턴스를 만든다.
  • 기존 생성자와 2가지가 다르다.
    • 생성자에 대한 인수를 배열 혹은 배열과 유사한 객체로 받아들인다.
    • new.target 을 호출하는 함수 외에 다른 것으로 설정할 수 있다.
  • new 키워드 없이 Error, Array 같은 내장 객체의 하위 객체를 만드는데 유용하다.

과거의 생성자와 Reflect.construct()

  • ES5
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;

  this.sayHello = function () {
    console.log("Hello, my name is " + this.name);
  };

  return this;
}

var args = ["Alice", 25, "female"];
var person1 = Person.apply(Object.create(Person.prototype), args);

person1.sayHello(); // Output: "Hello, my name is Alice"
person1 instanceof Person;
  • ES 2015+
const person1 = new Person(...arguments);
  • Reflect.construct()
const person3 = Reflect.construct(Person, args);

커스텀 Error 함수 정의 예제

function buildCustomError(...args) {
  return Reflect.construct(Error, args, buildCustomError);
}

buildCustomError.prototype = Object.assign(Object.create(Error.prototype), {
  constructor: buildCustomError,
  report() {
    console.log(`this.message = ${this.message}`);
  },
});

const e = buildCustomError("커스텀 에러 메세지");
console.log("instanceof Error", e instanceof Error);
e.report();
console.log(e);
  • Error 의 생성자를 이용하기 때문에 this.message 를 할당하는 부분이 없어도 잘 동작한다.

Reflect.ownKeys()

  • Object.keys() 와 거의 유사하다.
  • 열거할 수 없는 키와 문자, 심볼로 이름이 지정된 키를 포함하여 키의 배열을 반환한다.
const obj = {
  name: "Alice",
  age: 25,
  [Symbol("id")]: 1234,
};

Object.defineProperty(obj, "secret", {
  value: 123123,
});

const reflectKeys = Reflect.ownKeys(obj);
const objectKeys = Object.keys(obj);

console.log(reflectKeys); // ['name', 'age', 'secret', Symbol(id)]
console.log(objectKeys); // ['name', 'age']

Reflect.get()

  • 객체의 속성을 가져온다.
  • Reflect.get(target, propertyName[, receiver])
    • descriptor 를 가져오고, 값을 반환한다.
    • 접근자면 접근자 함수를 수행한다.

super 를 사용하지 않고 부모 클래스의 메서드 가져오기

class Product {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  get result() {
    return this.x * this.y;
  }
}

class DoubleProduct extends Product {
  get result() {
    return super.result * 2;
  }
}

const d = new DoubleProduct(10, 2);
console.log(d.result);
  • super 를 빼고 구현해보자.

Reflect.get() 없이 구현하기

class DoubleProduct extends Product {
  get result() {
    const proto = Object.getPrototypeOf(Object.getPrototypeOf(this));
    const descriptor = Object.getOwnPropertyDescriptor(proto, "result");
    const superResult = descriptor.get.call(this);
    return superResult * 2;
  }
}
  • 프로토타입을 가져오는 절차를 거친 뒤 descriptor 를 가져와 get.call() 을 호출했다.

Reflect.get() 이용하기

class DoubleProduct extends Product {
  get result() {
    const proto = Object.getPrototypeOf(Object.getPrototypeOf(this));
    return Reflect.get(proto, "result", this) * 2;
  }
}
  • descriptor 를 가져오는 절차를 생략하고 한방에 가져왔다.

Reflect.set()

  • 프로퍼티의 값을 설정한다.
const object1 = {};
Reflect.set(object1, "property1", 42);

console.log(object1.property1); // 42

const array1 = ["duck", "duck", "duck"];
Reflect.set(array1, 2, "goose");

console.log(array1[2]); // goose
반응형
저작자표시 비영리 (새창열림)

'자바스크립트 > 모던 자바스크립트' 카테고리의 다른 글

모던 자바스크립트, 맵 (Map)  (0) 2023.03.23
모던 자바스크립트, 4가지 동등성 비교 알고리즘  (0) 2023.03.22
모던 자바스크립트, TypedArray (타입이 있는 배열)  (0) 2023.03.19
모던 자바스크립트, ES2019 의 stable 내장 정렬 (Array.prototype.sort)  (0) 2023.03.15
모던 자바스크립트, 편의 유틸 배열 메서드  (0) 2023.03.13
    '자바스크립트/모던 자바스크립트' 카테고리의 다른 글
    • 모던 자바스크립트, 맵 (Map)
    • 모던 자바스크립트, 4가지 동등성 비교 알고리즘
    • 모던 자바스크립트, TypedArray (타입이 있는 배열)
    • 모던 자바스크립트, ES2019 의 stable 내장 정렬 (Array.prototype.sort)
    Jake Seo
    Jake Seo
    ✔ 잘 보셨다면 광고 한번 클릭해주시면 큰 힘이 됩니다. ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바