10장. 객체 리터럴

객체란?

• 원시 값을 제외한 나머지값으로, 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다.
• 객체는 mutable(변경 가능한) 값이다.
• 함수 자체가 객체이기도 하다.

인스턴스

클래스에 의해 생성되어 메모리에 저장된 실체를 말한다.

객체 리터럴

객체를 생성하기 위한 표기법으로써, 중괄호를 사용한다.

객체 리터럴은 값으로 평가되는 식이다. 그렇기에 뒤에 세미콜론(;)을 붙여준다.

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

빈 객체 또한 객체다.

var empty = {};
console.log(type of empty); // object

프로퍼티

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

var person = {
  name: 'Lee',
  age: 20,
};

메서드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부른다.

즉, 메서드는 객체에 묶여있는 함수를 뜻한다.

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

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

프로퍼티 접근

프로퍼티 키가 네이밍 규칙을 준수한 경우 [변수.프로퍼티키]같은 방식으로 접근 가능하다.

var person = {
  name: 'Lee',
};

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

프로퍼티 생성 및 삭제

var person = {
  name: 'Lee',
};

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

// 삭제
delete person.age;
console.log(person); // {name: "Lee"}

객체 리터럴의 확장 기능 (ES6)

• 프로퍼티 축약 표현

let x = 1,
  y = 2;

// 프로퍼티 축약 표현
const obj = { x, y };

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

• 계산된 프로퍼티 이름

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

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

• 메서드 축약 표현 (메서드의 function 키워드를 생략할 수 있다.)

const obj = {
  name: 'Lee',
  sayHi() {
    console.log('Hi, ' + this.name);
  },
};

obj.sayHi(); // Hi Lee