10장 객체 리터럴

10.1 객체란?

JS는 객체 기반의 프로그래밍 언어이며, 구성하는 거의 “모든 것”이 객체다.

0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. JS에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. JS의 함수는 일급 객체 이므로 값으로 취급된다. 따라서 함수도 객체의 프로퍼티 값이 될 수 있다. 이때, 일반 함수와 구분하기 위해 메서드라고 부른다.

객체는 프로퍼티와 메서드로 구성된 집합체이다. 프로퍼티 - 객체 상태를 나타내는 값 메서드 - 프로퍼티를 참고하고 조작할 수 있는 동작

이처럼 객체는 상태와 동작을 하나의 단위로 구조화 할 수 있어 유용하다.

객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 객체지향 프로그래밍이라 한다.

---

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

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

JS는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴

• Object 생성자 함수

• 생성자 함수

• Object.create 메서드

• 클래스(ES6)

가장 간단한 방법은 객체 리터럴을 사용하는 방법으로 다음과 같다.

const person = {
	name: 'Lee',
	sayHello = function () {
		console.log(`Hello! My name is ${this.name}.`);
	}
};

console.log(person); // {name: "Lee", sayHello: f}

---

10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다. 키 - 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 값 - JS에서 사용할 수 있는 모든 값

JS에서 사용 가능한 유효한 이름인 경우 따옴표를 생략할 수 있다. ⇒ 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

const person = {
	firstName: 'Ung-mo',
	'last-name': 'Lee'
};

console.log(person) //{firstName: "Ung-mo", last-name: 'Lee'}

문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다. 이 경우 프로퍼티 키로 사용할 표현식을 대괄호 []로 묶어야 한다.

let obj = {}
let key = "hello"

//ES5 - 프로퍼티 키 동적 생성
obj[key] = 'world';

//ES6 - 계산된 프로퍼티 이름
//let obj = {[key]: 'world'}

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

---

10.4 메서드

프로퍼티 값이 함수일 경우 메서드라 부른다.

---

10.5 프로퍼티 접근

프로퍼티에 접근하는 방법은 두 가지로 다음과 같다. 마침표를 사용하는 마침표 표기법 대괄호를 사용하는 대괄호 표기법

(+ 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름이면 두 방법 모두 사용할 수 있다.)

대괄호 표기법의 경우 프로퍼티 키는 대괄호 내부에 반드시 따옴표로 감싼 문자열이어야 한다. 그렇지 않으면 식별자로 해석해 ReferenceError가 발생한다.

---

10.6 프로퍼티 값 갱신

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

---

10.7 프로퍼티 동적 생성

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

---

10.8 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다. 이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다, 존재하지 않는 프로퍼티를 삭제하면 무시된다.

---

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

10.9.1 프로퍼티 축약 표현

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

// ES 6
let x = 1, y = 2;

const obj = {x,y}

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

10.9.2 계산된 프로퍼티 이름

표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다. 단, 프로퍼티 키를 사용할 표현식을 대괄호로 묶어야 한다. 이를 계산된 프로퍼티 이름이라 한다.

// ES 5
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}

// ES 6
// 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.
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 에서는 메서드를 정의하려면 프로퍼티 값으로 함수를 할당한다.

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

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

obj.sayHi() // Hi! Lee

// ES 6
const obj = {
	name: 'Lee',
	sayHi(){
		console.log('Hi! ' + this.name)
	}
}

obj.sayHi() // Hi! Lee

(+ES6의 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.)