객체란?

📖 객체(Object) : 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합

🏷️ property value가 function인 property를 메소드(method)라고 한다.

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

📖 Javascript는 prototype 기반 객체지향 언어

💡 Javascript의 모든 object는 자신의 부모 역할을 담당하는 object와 연결되어 있다. 이러한 부모 object를 프로토타입 객체(Prototype Object), 줄여서 프로토타입(Prototype)이라고 한다.

객체 리터럴로 객체 정의

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

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

프로퍼티 접근

var person = {
  name: 'Lee'
};

// 마침표 표기법
console.log(person.name); // Lee

// 대괄호 표기법
console.log(person['name']); // Lee

프로퍼티 값 갱신

var person = {
  name: 'Lee'
};

// 값 갱신
person.name = 'Kim';

console.log(person); // {name: "Kim"}

프로퍼티 동적 생성

var person = {
  name: 'Lee'
};

// 생성
person.age = 20;

console.log(person); // {name: "Lee", age: 20}

프로퍼티 삭제

var person = {
  name: 'Lee'
};

person.age = 20;

// 삭제
delete person.age;

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

⚠️ 존재하지 않은 property를 삭제하려고 해도 에러가 발생하지 않는다.

ES6 추가 기능

프로퍼티 축약 표현

let x = 1, y = 2;

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

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

계산된 프로퍼티 이름

📖 문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있는데 이를 계산된 프로퍼티 이름(computed property name)이라 한다.

🏷️ 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}

메서드 축약 표현

const obj = {
  name: 'Lee',
  // 메서드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee

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