소개

Object De-structuring is available to easily breakdown an object to variable since the release of ES6.Before de-structuring, an object's property should be assigned to a variable separately.

const  user = {
        name:'John',
        age:36,
        address:{
            city:'NY',
            country:'USA'
        }
}
const  name = user.name;
const  city = user.address.city; 

구조 분해 사용

객체 구조를 해제할 때 구조를 해제하려는 관련 속성이 있는 대괄호를 사용할 수 있습니다. 속성이 중첩된 객체에 있는 경우 해당 순서도 따라야 합니다. 재구성할 변수의 이름을 변경해야 할 때마다 , 콜론 뒤에 추가할 수 있습니다. 아래 예를 참조하세요.

const user = {
   name:'John',
   age:36,
   address:{
       city:'NY',
       country:'USA'
   }
}
const {name,age,address:{city:cityName}} = user;
console.log(name,age,cityName)

여기 const {name,age,address:{city:cityName}} = user; 줄에서 속성 이름이 사용자 개체에 나타날 때 이름 age를 구조화합니다. 사용자 개체에서 도시를 가져오기 위해 사용자 개체 내부의 주소 개체 내부로 이동해야 합니다. 따라서 동일한 종류의 구문이 거기에 적용됩니다. 이 경우 address:{city:cityName} 를 볼 수 있습니다. 여기city:cityName는 변수 city를 cityName.so로 선언하여 도시를 주소 지정하고자 할 때마다 이후에 cityName을 사용합니다.

스프레드(...) 연산자 사용

우리는 여러 속성을 변수로 복사하고 나머지 하나는 완전히 새로운 객체로 복사하고 싶을 수 있습니다. 우리는 스프레드 연산자를 사용하여 아래와 같이 달성할 수 있습니다.

const user = {
  name:'John',
  age:36,
  address:{
      city:'NY',
      country:'USA'
      }
  }
  const {name,age,...rest} = user;
  console.log(name,age,rest)

여기서 ...rest 부분은 구조화되지 않은 사용자 개체의 나머지 부분을 가져 와서 나머지라는 변수를 만듭니다.

Destructuring으로 객체를 단순 복사하기

우리 모두는 JS의 객체가 설계상 변경 불가능하다는 것을 알고 있습니다. 그래서 때때로 객체의 복제본을 만들고 싶을 수도 있습니다. 다음 구문은 사용자 객체의 복제본을 생성합니다. p.s : 이것은 얕은 복사본만 생성합니다. 깊은 복사본을 만들고 싶다면 load ash의 _.coneDeep(obj) 또는 JSON.parse(JSON.stringify(obj)) 또는 다른 라이브러리 메서드 또는 기본 메서드를 사용할 수 있습니다.

const user = {
        name:'John',
        age:36,
        address:{
            city:'NY',
            country:'USA'
        }
}
const userClone = {...user};
console.log(userClone);