🧱🧱🧱 JS의 객체 구조 분해: 기본값 설정

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


JavaScript에서 객체를 구조화할 때 기본값을 설정하는 방법을 알아봅니다.

구조 분해가 어떻게 작동하는지 다시 간단히 살펴보겠습니다.

const pastry = {
  name: "waffle"
};

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

존재하지 않는 pastry 객체의 속성에 액세스하려고 할 때 어떤 일이 발생하는지 봅시다.

const pastry = {
  name: "waffle"
};

const { sweetness } = pastry;
console.log(sweetness); // undefined

Destructuring 메커니즘을 사용하면 속성이 정의되지 않은 경우 기본값을 설정할 수 있습니다.

const { sweetness = 70 } = pastry;
console.log(sweetness); // 70

기본값은 속성이 실제로 undefined 인 경우에만 설정됩니다. 따라서 false , null 또는 0 와 같은 다른 null 값에 대한 기본값을 설정하지 않습니다.

기본값과 이름 바꾸기를 결합할 수도 있습니다. 이름 변경이 어떻게 작동하는지 간단히 살펴보겠습니다.

const pastry = {
  name: "waffle",
  tastiness: 100,
};

// let's get the value of tastiness and store it in deliciousness
const { tastiness: deliciousness } = pastry;
console.log(deliciousness); // 100

// and now let's combine renaming and defaults

// tastiness is set, so no default will be used
const { tastiness: palatability = 75 } = pastry;
console.log(palatability); // 100

// sweetness is undefined; the default will be used
const { sweetnewss: sweet = 50 } = pastry;
console.log(sweet); // 50

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