240731 모던한 프로퍼티 표기법

💡 프로퍼티 네임과 value로 사용할 변수, 함수의 이름이 같다면 생략 가능
단, 세미콜론으로 구분하는 것이 아니라 쉼표로 구분해야함.

모던한 프로퍼티 표기법

const name = "신짱구";
const age = 5;
const job = "유치원생";


const user = {
    name, // name : "신짱구" 
    age, //  age : 5
    job, //  job : "유치원생"
};

console.log(user); // { name: '신짱구', age: 5, job: '유치원생' }

const user2 = {
    firstName : "Misun",
    lastName : "Bong",
    getFullName : function() {  // 💡 콜론과 function을 생략하고 getFullName() { 로 표기 가능 
        return `${this.firstName} ${this.lastName}`;
    },
};

console.log(user2.getFullName()); // Misun Bong

잘못된 예시

const user = {
  name: 'Yuri',
  birth: 2017,
  () => {
    const date = new Date();
    return date.getFullYear() - this.birth + 1;
  },
};

간결한 표현을 위해서 Arrow Function 으로 작성했지만 그런데 이 메소드는 이름이 없어서 호출할 방법이 없다.
Arrow Function 은 반드시 이름이 필요하기 때문에, 축약된 표현으로는 작성할 수가 없다.
만약 Arrow Function 으로 메소드를 만들고 싶다면 다음과 같이 반드시 이름을 붙여줘야 한다.

const user = {
  name: 'Yuri',
  birth: 2017,
  getAge: () => {
    const date = new Date();
    return date.getFullYear() - this.birth + 1;
  },
};

하지만 이렇게 작성하더라도 한 가지 문제가 있다.
Arrow Function 은 일반함수와 this 키워드를 다루는 방식이 다르다.
getAge 메소드의 this는 window 객체를 가리키게 되면서 의도와는 다르게 동작하게 된다.
그래서 일반적으로 객체의 메소드를 만들 땐 Arrow Function 보다는 일반 함수가 좀 더 권장됨!

✔ 실습 (비공개 링크)