모던한 프로퍼티 표기법

ES2015 이후부터는 자바스크립트에서 변수나 함수를 활용해서 프로퍼티를 만들 때 프로퍼티 네임과 변수나 함수 이름이 같다면 축약해서 사용할 수 있다.

function sayHi() {
  console.log('Hi!');
}

const title = 'code';
const birth = 2000;
const job = '인플루언서';

//때로는 객체를 만들 때 변수에 할당된 값을 활용해서 프로퍼티를 만들 수도 있다.
const user = {
  title: title, //활용할 변수의 이름과 프로퍼티 네임이 똑같다면
  birth, //이렇게 하나만 작성하는 표현이 가능하다.
  job, 
  sayHi,
};

console.log(user); // {title: "code", birth: 2000, job: "인플루언서", sayHi: ƒ}

그리고 메소드를 작성할 때도 다음과 같이 function 키워드를 생략할 수가 있다.

//getFullName: function() {
//    return `${this.firstName} ${this.lastName}`;
//  },
//: function을 생략할 수 있다.

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.getFullName()); // Tess Jang

뿐만아니라 아래 코드와 같이 표현식을 대괄호로 감싸주게 되면, 표현식의 값을 프로퍼티 네임으로 쓸 수 있다.

//계산된 속성명(computed property name)
const usr = {
  [표현식]: 값,
};

const propertyName = 'birth';
const getJob = () => 'job';

const codeTest = {
  ['topic' + 'name']: 'Modern JavaScript',
  [propertyName]: 1998, //변수에 담긴 값을 사용하거나
  [getJob()]: '프로그래밍 강사' //함수의 리턴값을 사용할 수도 있다.
};

console.log(codeTest); //{topicName: "Modern JavaScript", birth: 1998, job: "프로그래밍 강사"}