[JavaScript] 자바스크립트 객체 요소 분할 대입(비구조화 할당)하기

066_자바스크립트 객체 요소 분할 대입(비구조화 할당)하기

[적용]

• 객체의 데이터를 정리하여 대입하고 싶을 때
• 객체의 일부 데이터를 추출하여 사용하고 싶을 때

---

[문법]

메소드	의미
{ 변수1, 변수2, ... } = 객체	객체의 데이터를 각 변수에 대입

---

[내용]

객체에서 변수, 변수2와 같은 이름의 키 데이터를 추출하여 변수에 대입하는 분할 대입에 대해 알아봅시다.

const userData1 = {
    id: 1,
    name: '사자',
    age: 26
};

const { id, name, age } = userData1;

console.log(id);  // 결과: 1 (userData1.id값)
console.log(name);  // 결과: 사자 (userData1.name값)
console.log(age);  // 결과: 26 (userData1.age값)

 

변수의 정의 순서와 객체 키의 순서는 상관이 없으며, 존재하지 않는 키는 undefined를 반환한다.

const userData2 = {
    id: 1,
    name: '사자',
    age: 26
};

const { age, id, address } = userDaga2;

console.log(age);  // 결과: 26 (userData2.age값)
console.log(id);  // 결과: 1 (userData2.id값)
console.log(address);  // 결과: undefined (userdata2.address는 존재하지 않음)

 

다음과 같이 별도의 이름을 지정할 수도 있다.

const userData3 = {
    id: 1,
    name: '사자'
};

// name 키의 값을 myName에 대입
const { name: myName } = userData3;

console.log(myName);  // 결과: '사자' (userData3.name값)

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김