[Deep Dive] 10장 객체 리터럴

10.1 객체란?

• 자바스크립트는 객체object 기반의 프로그래밍 언어이다.
• 원시타입의 값 : 단 하나의 값, 변경 불가능한 값
• 객체 타입의 값 : 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조, 변경 가능한 값
• 프로퍼티property : 객체의 상태를 나타내는 값(data)
• 메서드method : 함수인 프로퍼티 (일반함수와 구분), 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작 (behavior)

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

객체 생성법

• 객체리터럴 : 보편적인 방법
• Object 생성자 함수
• 생성자 함수 (new)
• Object.create 메서드
• 클래스 (ES6)

10.3 프로퍼티

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

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키 주의사항

• 식별자 네이밍 규칙을 따르지 않을 시 반드시 따옴표를 사용
• 빈 문자열을 프로퍼티 키로 사용가능 ( 에러X, 비권장 )
• 암묵적 타입변환으로 인해 문자열로 변환
• var, function 과 같은 예약어 사용가능 ( 에러X, 비권장 )
• 중복 프로퍼티는 덮어씌워진다. (에러X)

프로퍼티 키 동적생성

var obj = {};
var key = "hello";

// ES5 : 프로퍼티 키 동적 생성
obj[key] = "world";
// ES6: 계산된 프로퍼티 이름
// var obj = {[key]: 'world'};

console.log(obj); //{hello : "world"}

10.4 메서드

💡 메서드에서 `this`는 객체 자신을 가리키는 참조변수

var circle = {
    radius: 5,
    getDiameter: function() {
        return 2 * this.radius; // this는 circle이다. 
    }
};

console.log(circle.getDiameter()); //10

10.5 프로퍼티 접근

💡 프로퍼티에 접근하는 방법은 두가지이다. 1. 마침표 표기법 `.` (마침표 프로퍼티 접근 연산자) 2. 대괄호 표기법 `[ ]` (대괄호 프로퍼티 접근 연산자)

var person = {
    name: 'Lee'
};

console.log(person.name) //Lee

console.log(person['name']); //Lee

// 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다. (ReferenceError가 발생하지 않는다.)

10.8 프로퍼티 삭제

delete 연산자로 객체의 프로퍼티를 삭제할 수 있다.

만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.

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

10.9.1 프로퍼티 축약 표현

변수 이름과 프로퍼티 키가 동일한 이름일때 프로퍼티 키를 생략할 수 있다.

const dog = 4, bird = 2, 

const animalLegs = {dog, bird};

console.log(animalLegs); //{dog: 4, bird: 2}

10.9.2 계산된 프로퍼티 이름

• ES5에서는 계산된 프로퍼티 이름(computed property name) 을 사용하려면 객체 리터럴 외부에서 대괄호 표기법([])을 사용해 동적생성해줘야했다.
• var prefix = 'prop'; var i = 0; var obj = {}; obj[prefix + '-' + ++i] = i; obj[prefix + '-' + ++i] = i; obj[prefix + '-' + ++i] = i; console.log(obj); // {prop-1: 1,prop-2: 2, prop-3: 3 }
• ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.
• const prefix = 'prop'; let i = 0; const obj = { [`${prefix}-${++i}`]: i, [`${prefix}-${++i}`]: i, [`${prefix}-${++i}`]: i }; console.log(obj); // {prop-1: 1,prop-2: 2, prop-3: 3 }

10.9.3 메서드 축약 표현

• 메서드 정의할 때 function 키워드 생략한 축약 표현을 사용할 수 있다.

const obj = {
    sayHi() {
        console.log('hi!')
    }
}
obj.sayHi();