[BOOK] 모던 자바스크립트 Deep Dive 10 객체 리터럴

[ 객체 ]
- JS는 객체 기반의 프로그래밍 언어
- JS를 구성하는 거의 "모든 것"
- 원시 값을 제외한 나머지 값 (함수, 배열, 정규 표현식)
- 0개 이상의 프로퍼티로 구성된 집합
( 프로퍼티 : 키와 값으로 구성된 객체의 상태를 나타내는 값
메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작 )

다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조
원시 값은 변경 불가능한 값이지만, 객체는 변경 가능한 값.

---

[ 객체 리터럴에 의한 객체 생성 ]

< 클래스 기반 객체지향 언어 ( ref. C++, JAVA ) >
클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성. 
( 인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체 )

< 프로토타입 기반 객체지향 언어 ( ref. JS ) >
클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원.
- 객체 리터럴 (가장 일반적이고 간단한 방법)
- Object 생성자 함수
- 생성자 함수
- Object.create 메서드
- 클래스(ES6)

---

[ 프로퍼티 ]
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성됨.
프로퍼티를 나열할 때는 쉼표(,)로 구분, 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않음.
- 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
- 프로퍼티 값 : JS에서 사용할 수 있는 모든 값

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서, 식별자 역할을 함.
일반적으로 문자열을 사용, 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 함.
프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 됨.

이미 존재하는 프로퍼티 키를 중복 선언하면 나중의 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀.
빈 문자열이나 var, function과 같은 예약어를 프로퍼티 키로 사용해도 에러가 발생하지 않지만, 예상치 못한 에러가 발생할 수 있으므로 주의해야 함.

---

[ 메서드 ]
프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부름. 즉, 메서드는 객체에 묶여 있는 함수.

---

[ 프로퍼티 접근 ]
1. 마침표 프로퍼티 접근 연산자 (.)를 사용하는 마침표 표기법
2. 대괄호 프로퍼티 접근 연산자 ([...])를 사용하는 대괄호 표기법

let fruits = {
  berries: 'strawberry'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(fruits.berries); // strawberry

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(fruits['berries']); // strawberry

프로퍼티 키가 JS에서 사용 가능한 유효한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있음.
두 표기법의 좌측에는 객체로 평가되는 표현식을, 마침표 표기법 우측 또는 대괄호 표기법의 내부에는 프로퍼티 키 지정.
대괄호 표기법 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열

---

[ 프로퍼티 동적 생성, 프로퍼티 삭제 ]

let fruits = {
  berries: 'strawberry'
};

// fruits 객체에는 price 프로퍼티가 존재하지 않는다.
// 따라서 fruits 객체에 price 프로퍼티가 동적으로 생성되고 값이 할당된다.
fruits.price = 6000;

console.log(fruits); // {berries: "strawberry", price: 6000}

// 이제 fruits 객체에 price 프로퍼티가 존재한다.
// 따라서 delete 연산자로 price 프로퍼티를 삭제할 수 있다.
delete fruits.price;

// fruits 객체에 brandName 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 brandName 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않음.
delete fruits.brandName;

console.log(fruits); // {berries: "strawberry"}

---

[ ES6에서 추가된 객체 리터럴의 확장 기능 ]

< 프로퍼티 축약 표현 >
프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.

// ES6
let x = 1, y = 2;

// 프로퍼티 축약 표현
const obj = {x, y};

console.log(obj); // {x: 1, y: 2}

---

※ 참고 : 모던 자바스크립트 Deep Dive