10.1 객체란?
- 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체임
- 원시 값은 immutable value, 객체는 mutable value
- 객체는 0개 이상의 프로퍼티로 구성된 집합, 프로퍼티는 키와 값으로 구분됨
- JS에서 함수는 일급 객체이므로 값으로 취급 가능
- 프로퍼티 값이 함수인 경우 메서드라 부름
- 프로퍼티: 객체의 상태를 나타내는 값 (data)
- 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작 (behavior)
10.2 객체 리터럴에 의한 객체 생성
- 인스턴스 (클래스에 의해 생성되어 메모리에 저장된 실체)
- JS는 프로토타입 기반 객체지향 언어 => 다양한 객체 생성 방법 지원
- 객체 리터럴
- 중괄호가 코드 블록을 의미하지 않음
- 값으로 평가되는 표현식이므로 객체 리터럴의 중괄호 뒤에는 세미콜론 붙임
- Object 생성자 함수
- 생성자 함수
- Object.create 메서드
- 클래스(ES6)
10.3 프로퍼티
- 객체는 프로퍼티의 집합, 프로퍼티는 키와 값으로 구성됨
- 프로퍼티 키: 빈 문자열 포함하는 모든 문자열, 심벌 값 (그 이외 값은 암묵적 타입 변환 통해 문자열됨)
- 식별자 네이밍 규칙을 따르지 않은 이름에는 반드시 따옴표 사용
- 빈 문자열은 키로서의 의미를 갖지 못하므로 권장 X, 예약어도 권장 X (예상치 못한 에러 발생 가능)
- 식별자 네이밍 규칙 준수하는 프로퍼티 사용 권장 (ex. camelCase)
- 프로퍼티 값: JS에서 사용할 수 있는 모든 값
- 프로퍼티 키 동적 생성
- 대괄호 이용
- 프로퍼티 키 중복 선언 시 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티 덮어씀
- 프로퍼티 키는 내부적으로 다 문자열임 (따옴표 생략되서 보임)
10.4 메서드
- JS의 함수는 일급 객체 => 값으로 취급 가능
- 메서드 내부에서 사용한 this 키워드는 객체 자신을 가리키는 참조 변수
10.5 프로퍼티 접근
- 마침표 프로퍼티 접근 연산자 사용 (마침표 표기법, dot notation)
- 대괄호 프로퍼티 접근 연산자 사용 (대괄호 표기법, bracket notation)
- 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열
- 객체에 존재하지 않는 프로퍼티에 접근하면 undefined 반환 (에러 발생 X)
- 프로퍼티 키가 숫자인 경우는 반드시 대괄호로 접근
10.6 프로퍼티 값 갱신
- 이미 존재하는 프로퍼티에 값 할당하면 프로퍼티 값 갱신됨
10.7 프로퍼티 동적 생성
- 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당됨
10.8 프로퍼티 삭제
- delete 연산자로 객체의 프로퍼티 삭제
- 만약 존재하지 않는 프로퍼티 삭제 시 그냥 무시됨 (에러 발생 X)
10.9 ES6에서 추가된 객체 리터럴의 확장 기능
- 프로퍼티 축약 표현
- 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수 있음
- 프로퍼티 값으로 변수 사용 시 변수 이름과 프로퍼티 키 동일한 이름일 때
프로퍼티 키 생략 가능 (property shorthand), 프로퍼티 키는 변수 이름으로 자동 생성됨
- 계산된 프로퍼티 이름 (computed property name)
- 문자열 또는 문자열로 타입 변환될 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키 동적 생성 가능
- 프로퍼티 키로 사용할 표현식은 대괄호로 묶어야 함
- 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성 가능
- 메서드 축약 표현
- function 키워드 생략 가능
- ES6의 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작
'Books > 모던 JS Deep Dive ✔️' 카테고리의 다른 글
[모던 JS Deep Dive] 12장 - 함수 (0) | 2021.12.13 |
---|---|
[모던 JS Deep Dive] 11장 - 원시 값과 객체의 비교 (0) | 2021.12.10 |
[모던 JS Deep Dive] 9장 - 타입 변환과 단축 평가 (0) | 2021.12.10 |
[모던 JS Deep Dive] 8장 - 제어문 (0) | 2021.12.09 |
[모던 JS Deep Dive] 7장 - 연산자 (0) | 2021.12.09 |
댓글