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

객체란?

---

• 객체 타입 : 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
• 원시 타입의 값 : 변경 불가능한 값
• 객체 타입의 값 : 변경 가능한 값
• 객체 : 0개 이상의 프로퍼티로 구성된 집합
  • 프로퍼티 : key와 value으로 구성
    • 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티의 value가 될 수 있는데, **프로퍼티의 값이 함수**일 경우 이를 일반 함수와 구분하기 위해 메서드 (method)라고 부름

⇒ 객체는 프로퍼티와 메서드로 구성된 집합체

• 프로퍼티 : 객체의 상태를 나타내는 값
• 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작 (behavior)

⇒ **상태**(프로퍼티)와 **동작**(메서드)을 **하나의 단위로 구조화** 가능

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

---

• 자바스크립트는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원
  • 객체 리터럴
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메서드
  • 클래스 (ES6)
• 객체 리터럴 : **중괄호** 내에 0개 이상의 프로퍼티 정의
  • 변수 할당 시점에 자바스크립트 엔진은 객체 리터럴을 해석하여 객체 생성
  • 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체 생성

프로퍼티

---

• 객체 : 프로퍼티의 집합
  • 프로퍼티 : 키, 값으로 구성

var person = {
	// 프로퍼티 키는 name, 값은 'Lee'
	name: 'Lee',
	// 프로퍼티 키는 age, 값은 20
	age : 20
}

• 프로퍼티 값은 쉼표(,)로 구분
• 프로퍼티 키 : 빈 문자열을 포함한 모든 문자열 또는 심벌 값
  • 식별자 네이밍 규칙을 따르지 않은 문자열은 **따옴표**로 묶어야 함
• 프로퍼티 값 : JS에서 사용할 수 있는 모든 값

var person = {
	// firstName은 식별자 네이밍 규칙을 따라 따옴표 필요 X
	firstName: 'dingddong',
	// last-name은 식별자 네이밍 규칙을 따르지 않았으므로 따옴표로 묶어야 함
	'last-name' : 'Lee'
}

• 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 **프로퍼티 키를 동적 생성**할 경우, 프로퍼티 **키로 사용할 표현식**을 **대괄호**로 묶어야 함
• 빈 문자열, 예약어 (var, function, ..)을 프로퍼티 키로 사용해도 에러 발생 X
• 문자열이나 심벌 값이 아닌 값 (ex. 숫자)를 프로퍼티 키로 사용하면 **암묵적 타입 변환**을 통해 문자열이 됨
• 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 덮어씀 (에러 발생 X)

메서드

---

• 자바스크립트에서 함수는 객체여서 값으로 취급할 수 있으므로 프로퍼티 값으로 사용 가능
  • 프로퍼티 값이 함수일 때, 일반 함수와 구분하기 위해 메서드라고 부름

⇒ 메서드 : 객체에 묶여있는 함수

프로퍼티 접근

---

• **마침표** 표기법 : 마침표 프로퍼티 접근 연산자 (.) 사용
• **대괄호** 표기법 : 대괄호 프로퍼티 접근 연산자 ([]) 사용
• 프로퍼티 키가 식별자 네이밍을 준수하는 이름이면 마침표 표기법, 대괄호 표기법을 통해 프로퍼티 접근 가능
  • 만약 식별자 네이밍을 준수하는 이름이 아니라면 대괄호 표기법 사용

var person = {
	name : 'Lee'
}
console.log(person.name)
console.log(person['name'])

• **대괄호** 프로퍼티 접근 연잔사를 사용할 경우 **프로퍼티 키**는 반드시 **따옴표로 감싼 문자열**이어야 됨
• 객체에 존재하지 않는 프로퍼티에 접근하면 undefined 반환 (에러 X)
• ex. person.age ⇒ undefined

프로퍼티 값 갱신

---

• 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값 갱신됨

프로퍼티 동적 생성

---

• 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고, 프로퍼티 값이 할당됨

프로퍼티 삭제

---

• **delete** 연산자를 사용해서 객체 프로퍼티 삭제
  • 프로퍼티 값에 접근할 수 있는 표현식이어야 함 (만약 존재하지 않는 프로퍼티를 삭제할 경우 아무런 에러 없이 무시됨)

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

---

• ES6에서는 더욱 간편하고 표현력 있는 객체 리터럴의 확장 기능 제공

프로퍼티 축약 표현

• 프로퍼티 값으로 변수를 사용하는 경우, **변수 이름과 프로퍼티 키가 동일**할 때 프로퍼티 키를 생략 ⇒ 프로퍼티 키는 변수 이름으로 자동 생성

let x = 1, y = 2;
const obj = {x, y};

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

계산된 프로퍼티 이름

• ES5에서는 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호 표현기법을 사용해야했지만, 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}

메서드 축약 표현

• ES5에서 메서드 정의 시 function 키워드를 사용해 프로퍼티 값으로 함수를 할당했지만, ES6에서는 function 키워드를 생략한 축약 표현 사용 가능

// ES5
var obj = {
	name: 'Lee',
	sayHi: function() {
		console.log('Hi!' + this.name);
	}
}

// ES6
var obj = {
	name: 'Lee',
	sayHi() {
		console.log('Hi!' + this.name);
	}
}