프로퍼티 어트리뷰트
- 자바스크립트 엔진이 관리하는 내부 상태 값(내부 슬롯)
[[Value]],[[Writable]],[[Enumerable]],[[Configurable]]- 직접 접근할 수 없다
- Object.getOwnPropertyDescriptor() 메서드를 사용하여 간접 확인이 가능하다
- Object.getOwnPropertyDescriptor() 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
데이터 프로퍼티
- key, Value 구성된 일반적인 프로퍼티
접근자 프로퍼티
- 자체적으로 값을 갖지 않는다
- 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성
- 접근자 함수 : getter/setter
[[Get]]: 데이터 프로퍼티의 값을 읽을 때 호출 되는 접근자 함수[[Set]]: 데이터 프로퍼티의 값을 저장할 때 호출 되는 접근자 함수
프로퍼티 정의
- 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의
- Object.defineProperty(), Object.defineProperties() 메서드 사용
객체의 변경을 방지하는 메서드
1. Object.preventExtensions()
- 객체 확장 금지
- 프로퍼티 추가만X
- 확인 여부 : Object.isExtensible()
2. Object.seal()
- 객체 밀봉
- 프로퍼티 추가X
- 프로퍼티 삭제X
- 프로퍼티 어트리뷰트 재정의X
- 읽기와 쓰기만 가능
- 확인 여부 : Object.isSealed()
3. Object.freeze()
- 객체 동결
- 프로퍼티 추가X
- 프로퍼티 삭제X
- 프로퍼티 어트리뷰트 재정의X
- 프로퍼티 값 쓰기X
- 읽기만 가능O
- 확인 여부 : Object.isFrozen()
👉 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다.
변경이 불가능한 읽기 전용 불변 객체 구현하려면?
📌 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다.
Object 생성자 함수
정의
new 연산자와 함께 호출하여 객체(*인스턴스)를 생성하는 함수
*인스턴스
생성자 함수에 의해 생성된 객체
빌트인 생성자 함수
String, Number, Boolean, Function, Array, Date, RegExp, Promise
생성 방법
1. new 연산자와 함께 Object 생성자 함수를 호출하여 빈 객체 생성
2. 빈 객체에 프로퍼티 또는 메서드 추가
✅ 인스턴스 생성 과정
1. 인스턴스 생성
2. this 바인딩
→ 프로퍼티나 메서드를 추가하고 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당
3. 인스턴스 초기화
4. 인스턴스 반환
→ this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손한다. ➔ 생성자 함수 내부에 return 문을 반드시 생략해야 한다.
생성자 함수에 의한 객체 생성 방식의 장점
프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
this
객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수
함수 호출 방식에 따라 동적으로 결정
바인딩
식별자와 값을 연결하는 과정
함수 객체 내부 메서드 [[Call]]과 [[Construct]]
일반 함수 내부 메서드 [[Call]] 호출
new 연산자와 함께 생성자 함수 내부 메서드 [[Construct]] 호출
함수 객체를 생성할 때 함수 정의 방식에 따라
constructor 함수 선언문, 함수 표현식, 클래스
non-constructor 메서드(ES6 메서드 축약 표현), 화살표 함수
new.target
- this와 유사하게 constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용
- 메타 프로퍼티
- IE 지원 X
- 생성자 함수 호출 확인 여부를 알 수 있다
- 함수 자신을 가리킨다
- 일반 함수라면 undefined
- new.target 사용할 수 없는 상황 → 스코프 세이프 생성자 패턴을 사용
📖 공부하면서 느낀점
그동안은 객체를 생성할 때 쉽게 객체 리터럴 방식 코드를 작성했다. 생성자 함수를 생성할 때 this 바인딩을 해주어야 한다고는 외웠지만 왜 써야하는지, 또 어떻게 써야 하는지 잘 몰랐기 때문이다.
🎇 오늘 책을 읽고 나니 인스턴스를 생성할 때 자바스크립트 엔진이 암묵적으로 this 바인딩하고 인스턴스를 초기화하여 반환해주기 때문이라는 사실을 알게되었다.
자바스크립트 엔진은 암묵적으로 해주는 일들이 많다는 사실도 놀라웠다. 변수 var 호이스팅도 자바스크립트 엔진이 암묵적으로 선언 단계와 초기화 단계가 동시에 진행하기 때문이다. 이런 점 들 때문에 처음에 공부하기 너무 혼란스러울 정도니 말이다ㅎㅎ
✨ 자바스크립트 엔진의 동작과 원리에 대해 알아가니 자바스크립트를 더 깊게 알아가고 있다는 생각이 든다.
