Chapter 10: 객체 리터럴 (Object literal upgrades)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

10.1 변수를 키와 값으로 하는 객체 만들기

---

객체의 key와 value가 동일할 경우, value 값을 생략하여 표현 가능

const name = "Alberto";
const surname = "Montalesi";
const age = 25;
const nationality = "Italian";

const person = {
  name,
  surname,
  age,
  nationality,
};
console.log(person);
// {name: "Alberto", surname: "Montalesi", age: 25, nationality: "Italian"}

10.2 객체에 함수 추가하기

---

일반 함수

// ES5
const person = {
  name: "Alberto",
  greet: function () {
    console.log("Hello");
  },
};

// ES6
const person = {
  name: "Alberto",
  greet() {
    console.log("Hello");
  },
};

person.greet(); // hello

화살표 함수

Arrow function은 익명 함수이므로 함수에 접근하기 위한 키가 필요함

// 잘못된 예
const person1 = {
  () => console.log("Hello"),
};
// Uncaught SyntaxError: Unexpected token '('

// 올바른 예
const person2 = {
  greet: () => console.log("Hello"),
}
person2.greet()
// Hello

10.3 객체의 속성을 동적으로 정의하기

---

// ES5
var name = "myname";
// create empty object
var person = {};
// update the object
person[name] = "Alberto";
console.log(person.myname);
// Alberto

// ES6
const name = "myname";
const person = {
  [name]: "Alberto",
};
console.log(person.myname);
// Alberto