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

* 07장 연산자, 08장 조건문, 09장 일부 부분은 패스합니다. *

 

9.1 타입 변환이란? 

---

개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 합니다. 개발자와 의도와 상관없이 JS엔진에 의해 암묵적으로 타입이 변환되기도 합니다. 이를 암묵적 타입 변화 또는 타입 강제 변환이라 합니다. 

 

9.2 암묵적 타입 변환

---

JS엔진은 표현식을 평가할 때 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환 할 때가 있습니다. 

'10' + 2 // '102'
7 * '10' // 70

 

9.4 단축 평가 

---

9.4.4 옵셔널 체이닝 연산자

ES11에 도입된 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아니라면 우항의 프로퍼티를 참조합니다.

val elem = null;

var value = elem?.value;
console.log(value)

 

10.1 객체란?

---

JS는 객체 기반의 프로그래밍 언어이며, JS를 구성하는 거의 모든 것은 객체입니다. 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조입니다. 

 

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 Key와 Value로 구성됩니다. 프로퍼티 값이 함수일 경우에는 일반 함수와 구분하기 위해 메소드라고 부릅니다. 

 

10.2 객체 리터럴에 의한 객체 생성

---

C++나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성합니다. 

 

JS는 이와 달리 다양한 객체 생성 방법을 지원합니다. 

- 객체 리터럴

- Object 생성자 함수

- 생성자 함수

- Object.create 메서드

- 클래스 (ES6)

 

가장 일반적이고 간단한 방법은 객체 리터럴을 이용한 방법입니다. 중괄호 ({...}) 내에 0개 이상의 프로퍼티를 정의합니다. 

 

10.3 프로퍼티

---

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성됩니다. 

 

10.4 메서드 

---

메서드는 객체에 묶여 있는 함수를 의미합니다. 

var circle = {
	radius: 5, // 프로퍼티
    
    getDiameter: function() { // 메서드
    	return 2 * this.radius // this는 circle을 가리킨다. 
    }
}

 

10.5 프로퍼티 접근

---

프로퍼티에 접근하는 방법은 다음과 같습니다. 

- 마침표 프로퍼티 접근 연산자(.)를 활용하는 마침표 표기법

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

 

10.6 프로퍼티 값 갱신 

---

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신됩니다. 

var person = {
	name: 'Lee'
}

preson.name = 'Kim';
console.log(person) // {name: "Kim")

 

10.7 프로퍼티 동적 생성

---

var person = {
	name: 'Lee'
}

preson.age = 23;
console.log(person) // {name: "Lee", age: 23)

 

10.8 프로퍼티 삭제

---

delete 연산자를 활용하면 됩니다. 

var person = {
	name: 'Lee'
}

preson.age = 23;

delete person.age;
delete person.address; // 존재하지 않는 프로퍼티로 삭제가 불가능하므로 에러 발생 X

console.log(person) // {name: "Lee")

 

10.9 ES6 추가된 객체 리터럴 확장 기능

---

10.9.1 프로퍼티 축약 표현

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 생략할 수 있습니다. 프로퍼티 키는 변수 이름으로 자동 생성됩니다.

let x = 1, y = 2;

const obj = { x, y };

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

 

10.9.2 계산된 프로퍼티 이름

const prefix = "prop";
let i = 0;

const obj = {
  [`${prefix}=${++i}`]: i,
  [`${prefix}=${++i}`]: i,
  [`${prefix}=${++i}`]: i,
};

console.log(obj())

 

10.9.3 메서드 축약표현 

const obj = {
  name: 'Lee',

  sayHi() {
    console.log('Hi!' + this.name);
  }
}

obj.sayHi();

---

Reference: 모던 자바스크립트 Deep Dive