모던 JS Deep dive #10 | 객체 리터럴

2022년 09월 27일 23:33

📌 JS에서의 객체란

객체는 0개 이상의 프로퍼티와 메서드로 구성된 집합이다.

자바스크립트는 객체 기반의 프로그래밍 언어이고, JS를 구성하는 거의 모든 것(원시 값을 제외한 나머지 값)이 객체이다.

📌 객체 생성

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

반면에 JS는 프로토타입 기반 객체지향 언어로써 다양한 객체 생성 방법을 지원한다. [객체 리터럴, Object생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)] 이 중에서 가장 간단한 방법은 객체 리터럴을 사용하는 방법이다.

📌 프로퍼티 & 메서드

위에서 객체는 프로퍼티와 메서드로 구성된 집합이라고 언급했다. 메서드는 프로퍼티 값으로 함수가 오는 경우를 말한다.

프로퍼티에 접근하는 방법은 [마침표 표기법, 대괄호 표기법]이 있는데 식별자 네이밍 규칙을 준수하지 않는 경우에는 반드시 대괄호 표기법을 사용해야 한다.

//프로퍼티 동적 생성
var person = {
  name: "Lee",
};
person.age = 20;

//프로퍼티 삭제 (없어도 error발생 X)
delete person.age;

//프로퍼티 값 변경
person.name = "Im";

[객체지향의 관점]

프로퍼티: 키와 값으로 구성되며 상태를 나타내는 값(data)

메서드: 프로퍼티를 참조하고 조작할 수 있는 동작(behavior)

=> 상태와 동작을 하나의 단위로 구조화할 수 있어서 유용하다.

📌 향상된 객체 리터럴

향상된 객체 리터럴이란 ES6에서 제공하는 더욱 간편하고 표현력 있는 객체 리터럴의 확장 기능이다.

프로퍼티 축약 표현
```
// ES5
var x = 1,
 y = 2;
var obj = {
 x: x,
 y: y,
};

// ES6
let x = 1,
 y = 2;
const obj = { x, y };
```
프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.
계산된 프로퍼티 이름
```
//ES5
var prefix = "prop";
var obj = {};
var i = 1;
obj[prefix + "-" + i] = i;

//ES6
const prefix = "prop";
let i = 0;
const obj = {
 [`${prefix}-${i}`]: i,
};
```
기존에는 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 외부에서 대괄호 표기법을 이용해야 했지만

ES6부터는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.
메서드 축약 표현
```
//ES5
var obj = {
 sayHi: function(){ 코드 작성 }
}

//ES6
const obj = {
 sayHi() { 코드 작성 }
}
```
위와 같이 function키워드를 생략한 축약 표현이 가능하다.

하지만 ES6의 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다. 26.2절의 “메서드”에서 알아보자.