Chapter 5

프로퍼티와 생성자

  • 5.1 프로퍼티 어트리뷰트
  • 5.2 데이터 프로퍼티와 접근자 프로퍼티
  • 5.3 객체 변경 방지
  • 5.4 생성자 함수
  • 5.5 인스턴스 생성 과정
  • 5.6 constructor와 non-constructor
  • 5.7 일급 객체로서의 함수
  • 5.8 함수 객체의 프로퍼티

객체의 내부 동작 원리부터 생성자 함수, 그리고 함수가 일급 객체로서 갖는 특별한 프로퍼티들까지 — 객체와 함수의 깊은 면을 파보자.

객체를 다루면서 "왜 이렇게 동작하지?"라는 의문이 들었다면 프로퍼티 어트리뷰트가 답이야. JS 엔진의 구현 알고리즘을 설명하기 위한 의사 프로퍼티/메서드를 내부 슬롯, 내부 메서드라고 하는데, [[...]] 이중 대괄호로 표기해. 직접 접근할 수 없지만, 일부는 간접 접근 수단을 제공하거든. 예를 들어 [[Prototype]]__proto__로 접근 가능하지.

프로퍼티를 생성하면 JS 엔진이 자동으로 프로퍼티 어트리뷰트를 정의해. Object.getOwnPropertyDescriptor로 확인할 수 있어.

const person = { name: 'Lee' };
Object.getOwnPropertyDescriptor(person, 'name');
// { value: "Lee", writable: true, enumerable: true, configurable: true }

데이터 프로퍼티[[Value]], [[Writable]], [[Enumerable]], [[Configurable]]로 구성된 일반적인 키-값 프로퍼티야. 접근자 프로퍼티[[Get]], [[Set]]으로 구성되고, getter/setter 함수로 동작해.

const person = {
  firstName: 'Ungmo',
  lastName: 'Lee',
  get fullName() { return `${this.firstName} ${this.lastName}`; },
  set fullName(name) { [this.firstName, this.lastName] = name.split(' '); }
};

객체 변경 방지 메서드도 있어. Object.preventExtensions(추가 금지), Object.seal(추가+삭제+재정의 금지), Object.freeze(읽기만 가능). 주의할 건, 모두 얕은(shallow) 변경 방지라는 거야. 중첩 객체까지 동결하려면 재귀적으로 적용해야 해.

같은 구조의 객체를 여러 개 만들어야 할 때 객체 리터럴로 매번 같은 코드를 반복하는 건 비효율적이잖아. 그래서 생성자 함수가 필요한 거야. new 연산자와 함께 호출하면 인스턴스를 생성하거든.

function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () { return 2 * this.radius; };
}
const circle1 = new Circle(5);

인스턴스 생성 과정은 세 단계야. 먼저 빈 객체(인스턴스)가 생성되고 this에 바인딩돼. 그다음 this에 프로퍼티를 추가하고 초기값을 할당하지. 마지막으로 완성된 this가 암묵적으로 반환돼. 명시적으로 객체를 return하면 this 대신 그 객체가 반환되니 주의해야 해.

함수는 내부 메서드 [[Call]][[Construct]]를 가질 수 있어. 일반 호출하면 [[Call]]이 실행되고, new와 함께 호출하면 [[Construct]]가 실행되지. 함수 선언문, 함수 표현식, 클래스는 constructor이고, 화살표 함수와 메서드(ES6 축약 표현)는 non-constructor야. new.target으로 생성자 함수가 new 없이 호출되는 걸 방지할 수 있어.

JS에서 함수는 일급 객체야. 변수에 할당할 수 있고, 함수의 매개변수로 전달할 수 있고, 함수의 반환값으로 사용할 수 있거든. 이 덕분에 함수형 프로그래밍이 가능한 거지.

함수는 객체이기도 하니까 고유한 프로퍼티들을 갖고 있어. arguments는 함수 호출 시 전달된 인수 정보를 담고 있는 유사 배열 객체인데, ES6에서는 Rest 파라미터(...args)가 더 나은 대안이지. length는 함수가 정의한 매개변수의 개수야. name은 함수 이름을 나타내는 프로퍼티이고, prototypeconstructor만 가지는 프로퍼티로 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리켜.


정리

5장 읽고 기억할 거 세 가지:

  1. 프로퍼티 어트리뷰트(writable, configurable 등)는 객체의 내부 동작을 이해하는 기반이고, Object.freeze 등은 얕은 변경 방지만 해.
  2. 생성자 함수는 동일한 구조의 객체를 효율적으로 생성하는 템플릿이고, [[Call]]/[[Construct]] 구분이 함수의 내부 동작을 설명해.
  3. 함수가 일급 객체라는 건 값처럼 자유롭게 다룰 수 있다는 뜻이야. 이게 고차 함수, 콜백, 클로저 등 JS 핵심 패턴의 기반이지.