프로퍼티와 생성자
- 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은 함수 이름을 나타내는 프로퍼티이고, prototype은 constructor만 가지는 프로퍼티로 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리켜.
정리
5장 읽고 기억할 거 세 가지:
- 프로퍼티 어트리뷰트(
writable,configurable등)는 객체의 내부 동작을 이해하는 기반이고,Object.freeze등은 얕은 변경 방지만 해. - 생성자 함수는 동일한 구조의 객체를 효율적으로 생성하는 템플릿이고,
[[Call]]/[[Construct]]구분이 함수의 내부 동작을 설명해. - 함수가 일급 객체라는 건 값처럼 자유롭게 다룰 수 있다는 뜻이야. 이게 고차 함수, 콜백, 클로저 등 JS 핵심 패턴의 기반이지.