(18) Modern JavaScript - 현대의(Modern) 축약형 표기법

객체의 프로퍼티를 좀 더 간결하게 표현하는 방식이 있다.

 

활용할 변수의 이름과 프로퍼티 네임이 같거나,

프로퍼티 네임과 벨류를 사용할 변수나 함수의 이름이 같다면

중복해서 작성하지 않고 하나만 작성해줄 수 있다.

그 예시들을 쭉 살펴보자.

---

모던한 프로퍼티 표기법

const myName = "SeopE";
const birth = "0101";
const job = "백수";

const user = {
  myName: myName,
  birth: birth,
  job: job,
};

 

위와 같이 변수에 할당된 값을 활용해서 프로퍼티를 만들 떄,

활용할 변수의 이름과 프로퍼티 네임이 같다면 아래와 같이 하나만 작성하는 표현이 가능하다.

const myName = "SeopE";
const birth = "0101";
const job = "백수";

const user = {
  // myName: myName,
  // birth: birth,
  // job: job,
  myName,
  birth,
  job,
};

console.log(user);

 

---

또한 프로퍼티 네임과 벨류로 사용할 변수나 함수의 이름이 같다면

중복해서 작성하지 않고 하나만 작성해줄 있다.

function getFullName() {
  return `${this.firstName} ${this.lastName}`;
}

const user = {
  firstName: "Seop",
  lastName: "Yee",
  // getFullName: getFullName, // 생략 가능
  getFullName,
};

const GameId = {
  firstName: "baxter",
  lastName: "yhs",
  // getFullName: getFullName, // 생락 가능
  getFullName,
};

console.log(user.getFullName());
console.log(GameId.getFullName());

---

외부에 있는 함수를 메소드로 만들 때 말고도 

객체 내부에서 메소드를 선언할 때도 활용할 수 있는 표현이 있다.

const user1 = {
  firstName: "Seop",
  lastName: "Yee",
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(user1.getFullName());

이 때 콜론(:)과 function 키워드를 생략할 수 있다.

const user1 = {
  firstName: "Seop",
  lastName: "Yee",
  // getFullName: function () { // 콜론과 function 생략가능
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(user1.getFullName());

---

그리고 프로퍼티 네임을 표현식으로 나타내는 방법이 있다.

 

계산된 속성명 (Computed property name)

표현식을 대괄호로 감싸주면 표현식의 값을 프로퍼티 네임으로 쓸 수 있으며

문법은 다음과 같다.

const test = {
  [표현식]: 값,
}

---

다음 예시를 살펴보자

const tester = {
  ["Seop" + "E"]: "value",
};
console.log(tester);

문자열 'Seop'와 문자열 'E' 를 연결한 표현식을  프로퍼티 네임에 작성해줬고

값으로는 그냥 문자열 'value'를 작성했다.

결과를 확인해보면

'SeopE' 라는 프로퍼티 네임이 잘 생성된 것을 확인할 수 있다.

---

이렇게 대괄호를 감싸서 표현식을 작성하는 방식은 아래의 코드를 살펴보면

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

const x = {
  ["your" + "name"]: "SeopE",
  [propertyName]: 2024,
  [getJob()]: "백수",
};

console.log(x);

위와 같이 변수에 담긴 값을 사용하거나 [propertyName]

함수의 리턴값을 사용할 수도 있으니 [getJob()]

이 방식을 어떤 식으로 활용하면 좋을지 한번 생각해볼 필요 있다.

---

이렇게 객체를 만들 때 프로퍼티 네임을 표기하는 방법을 활용해봤는데

객체의 프로퍼티를 좀 더 간결하게 작성할 수 있고 

좀 더 다양한 방식으로 만들어 낼 수 있기에 

코드를 작성할 때 유용하게 활용해보자.