모던 자바스크립트 핵심가이드 - 10. 객체 리터럴의 업그레이드

CHAPTER 10 객체 리터럴의 업그레이드

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

const name = 'yerin';
const surname = 'kim';
const age = 21;
const nationality = 'Korean';

//일반적인 방식
const person ={
    name: name,
    surname: surname,
    age: age,
    nationality: nationality,
};

console.log(person);

//ES6을 이용해서 단순화하기
const person = {
    name,
    surname,
    age,
    nationality,
};
console.log(person);

변수들의 이름이 코드 내의 속성과 동일하기 때문에, 코드 내에서 굳이 두 번씩 표기하지 않아도 된다.

10.2 객체에 함수 추가하기

//ES6
const person = {
    name: "yerin",
    surname: "kim",
    greet: function(){
        console.log("Hello");
    },
};

person.greet();

객체에 함수를 추가하려면 function 키워드를 사용해야 했다.

const person = {
    name: "minji",
    surname: "kim",
    greet(){
        console.log("Hello");
    },
};

person.greet();

function 키워드가 없고, 코드는 더 짧아졌지만 동일한 동작을 수행한다.

const person1 ={
    greet: () => console.log("Hello"),
};

person1.greet();
//Hello

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

//ES5

var name = "myname";
// 빈객체를 생성한다.
var person ={};
// 객체를 업데이트한다.
person[name] = "Alberto";
console.log(person.myname);

ES5에서는 객체를 먼저 생성한 다음 수정해야 했다. 그러나 ES6에서는 두 가지를 동시에 할 수 있다.

//ES6

const name = "myname";
const person = {
    [name]: "Yerin",
};

console.log(person.myname);