⚡ JS의 객체 구조 제거: 속성 이름 변경⚡

웹 개발 🚀🚀🚀을 더 잘하고 싶으세요? https://codesnacks.net/subscribe/에서 내 주간 뉴스레터를 구독하십시오.


이 시리즈의 마지막 부분에서는 객체를 구조화하고 객체 속성에 액세스하는 방법을 배웠습니다. 이번에는 속성의 이름을 바꾸는 방법에 대해 알아보겠습니다. 간단히 요약하자면 다음과 같습니다.

const pastry = {
  name: "waffle",
  sweetness: 80,
  ingredients: ["flour", "butter", "eggs"],
  origin: {
    country: "Greece",
    name: "obelios",
    year: 1200,
  }
};

점 표기법을 통해 속성에 액세스할 수 있습니다.

const name = pastry.name;
console.log(name); // "waffle"

또는 구조화를 통해

const { name } = pastry;
console.log(name); // "waffle"

그러나 변수의 이름을 선택하려면 구조화에 약간 제한이 있는 것 같습니다. 점 표기법은 쉽습니다.

const pastryName = pastry.name;
console.log(pastryName); // waffle

그러나 객체를 재구성하는 동안 콜론을 통해 변수 이름을 자유롭게 지정할 수도 있습니다.

const { name: pastryName } = pastry;
console.log(pastryName); // waffle

보시다시피 두 가지name 속성이 있습니다. 하나는 최상위(와플)이고 다른 하나는 중첩origin 개체(obelios)입니다. 둘 다 구조를 해제하려면 둘 중 적어도 하나의 이름을 바꿔야 합니다. 중첩origin 개체에 있는 개체로 이 작업을 수행해 보겠습니다.

const { name, origin: { name: originName } } = pastry;
console.log(name); // waffle
console.log(originName); // obelios

웹 개발을 더 잘하고 싶으십니까?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter