본문 바로가기
Books/모던 JS Deep Dive ✔️

[모던 JS Deep Dive] 10장 - 객체 리터럴

by Aaron-Kim 2021. 12. 10.

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의 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작

반응형

댓글