⚡⚡ JS의 객체 구조 분해에 대한 짧은 가이드 ⚡

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


JS의 Destructuring은 우아한 방식으로 객체 속성에 액세스하는 데 사용됩니다.

JS 객체를 살펴보겠습니다.

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

속성에 액세스하려면 점 표기법을 사용할 수 있습니다.

const name = pastry.name;
const sweetness = pastry.sweetness;
const country = pastry.origin.country;

또는 더 적은 코드로 얻고자 하는 속성을 지정하여 구조 분해를 사용할 수 있습니다.

그래서 대신

const name = pastry.name;

우리는 또한 사용할 수 있습니다

const { name } = pastry;

이것은 pastry 객체 내부에서 속성 이름을 찾습니다. 기본적으로 pastry.name 를 통해 액세스하는 것과 동일합니다.

멋진 점은 한 번에 여러 속성에 액세스할 수 있다는 것입니다. name 및 sweetness 에 액세스한 위의 예를 사용하겠습니다.

const { name, sweetness } = pastry;
console.log(name);
console.log(sweetness);

중첩된 객체의 구조화

예를 들어 구조를 해제하는 방법을 살펴보겠습니다. country 속성에서 origin.

// const country = pastry.origin.country;
// or

const { origin: { country } } = pastry;
console.log(country); // Greece

물론 중첩 및 비중첩 속성에 대한 액세스를 결합할 수도 있습니다.

const { name, sweetness, origin: { country } } = pastry;
console.log(name);
console.log(sweetness);
console.log(country);

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