객체 구조 분해(비구조화할당)

객체 전체를 사용하는 것을 원하지 않고 객체 안 각각의 프로퍼티를 사용하거나 일부 프로퍼티만 사용하고 싶은 경우가 있을 수 있습니다.

 

예시 코드와 함께 객체 안 각각의 프로퍼티를 분리하여 사용하는 방법을 정리해보겠습니다.

 

 

 

 

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"], age: 28 };

const personName = person1.name;

const personHobbies = person1.hobbies;

const personAge = person1.age;

객체의 각 프로퍼티에 접근하여 상수에 할당할 수도 있지만 아래의 방법을 사용하시면 보다 간편하게 분리하여 할당이 가능합니다.

 

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"], age: 28 };

const { name, hobbies, age } = person1;

console.log(name, hobbies, age); // SH ['Sports', 'Cooking'] 28 출력

const 키워드 뒤에 중괄호를 추가하고 =의 오른쪽에 참조할 객체를 할당합니다.

 

중괄호 안에는 프로퍼티의 key에 해당하는 부분을 넣어주게 되면 해당 상수에 상응하는 분리된 프로퍼티의 value가 담기게 됩니다.

 

즉 첫 번째 상수 name에는 프로퍼티의 key가 name인 value, "SH"가 할당되고

 

두 번째 상수 hobbies에는 프로퍼티의 key가 hobbies인 value, 배열이 할당되고

 

세 번째 상수 age에는 프로퍼티의 key가 age인 value, 28이 담기게 됩니다.

 

정리하면 할당 연산자 왼쪽에는 분해하려는 프로퍼티가 오고, 오른쪽에는 분해하려는 객체가 옵니다.

 

 

필요시 목표 변수를 사용하시면 보다 간편하게 접근이 가능합니다.

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"], age: 28 };

const { name: n, hobbies: h, age: a } = person1;

console.log(n, h, a); // SH ['Sports', 'Cooking'] 28 출력

별명을 지어준다고 생각하시면 쉽게 이해하실 것 같습니다.

 

상수 name을 목표 변수 n으로, 상수 hobbies를 목표 변수 b로, 상수 age를 목표 변수 a로 주게 되면

 

해당 목표 변수로 각각의 프로퍼티에 접근이 가능해지게 됩니다.

 

 

 

 

const person1 = { name: "SH", hobbies: ["Sports", "Cooking"], age: 28 };

const { name, ...otherInformation } = person1;

console.log(name); // SH 출력
console.log(otherInformation); // {hobbies: ["Sports", "Cooking"], age: 28} 출력

만약 객체 안의 여러 프로퍼티 중에 이름에 해당하는 프로퍼티만 사용하고 나머지 정보는 묶어서 사용하고 싶은 경우

 

Rest 연산자를 사용하면 상수에 할당되지 않은 객체에 남아 있는 모든 프로퍼티를 모아 Rest 매개변수에 할당되게 됩니다.

 

즉 name에 할당되지 못한 모든 프로퍼티를 모아 otherInfomation에 할당하게 됩니다.