초간단 javascript Object destructuring

 

이번 글을 통해 배워갈 내용

1. 자바스크립트로 Object destructuring(객체 비구조화) 해보기

 

---

여기 감자가 있습니다

 

출처 픽사베이

정확하게 이야기 하면 음식 객체입니다. ㅋㅋㅋㅋ

 

음식 객체의 코드는 다음과 같습니다.

 

// 감자 객체
let food = {
    name: "감자",
    price: 1000,
    owner: "김씨",
    where: "김씨뱃속"
}

음식 객체의

 

이름은 감자

 

가격은 1000 (원)

 

주인은 김씨

 

위치는 김씨 뱃속입니다.

 

---

감자 객체를 출력해보겠습니다.

 

//오브젝트를 출력하려면 앞에 food를 입력해야 하는데 귀찮습니다.
console.log(food.name); // 감자
console.log(food.price); // 1000
console.log(food.owner); // 김씨

 

출력하는데 food를 붙이는게 귀찮습니다.

 

그럴때는
Object Destructuring을 사용하면 좋습니다.

let {name, price, owner, where} = food;

자 이제 쉽게 출력 할수 있습니다

console.log(name); // 감자
console.log(price); // 1000
console.log(owner); // 김씨

 

요약

 

객체 비구조화 Object destructuring 하였습니다

예) let {name, price, owner, where} = food;

 

 

참조 및 인용

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Destructuring assignment - JavaScript | MDN