객체의 Destructuring (구조 분해)

 

객체는 인덱스 번호가 아니라 property name 으로 여러 값들을 구분

 

일반 적인 방법으로는 2줄로 변수를 선언

property name 과 변수 명이 동일 하면 Destructuring 문법으로 1줄로 변수 선언  가능.

 const carBrand = {
        EQE: "Benz",
        i7: "BMW",
        IONIQ9: "Hyundai",
        EquinoxEV: "Chevrolet",
        ZOE: "RENAULT",
        ModelX: "TESLA",
        TaycanEV: "Porsche",
        etron: "Audi",
      };
      
      // 일반적인 방법으로 객체의 프로퍼티 값으로 대입
      //const ModelX = carBrand.i7
      //const i7 = carBrand.EQE
      
      
      // property name 자체를 변수로 활용 할 때 가능.
      const { ModelX, i7 } = carBrand;
      
      console.log(ModelX);
      console.log(i7);

 

 

 

왼편에 선언된 변수의 이름 과 똑같은 property name 이 있으면 할당되는 방식으로

객체에 없는 값을 할당 받으려고 하면 undefined 출력 됨

const carBrand = {
        EQE: "Benz",
        i7: "BMW",
        IONIQ9: "Hyundai",
        EquinoxEV: "Chevrolet",
        ZOE: "RENAULT",
        ModelX: "TESLA",
        TaycanEV: "Porsche",
        etron: "Audi",
      };

      // IONIQ9, EquinoxEV,ZOE, ModelX, TaycanEV, etron
      const { ModelX, car } = carBrand;
      console.log(ModelX);
      console.log(car);

 

 

 

이것을 방지 하기 위해 기본값 할당도 가능

const carBrand = {
        EQE: "Benz",
        i7: "BMW",
        IONIQ9: "Hyundai",
        EquinoxEV: "Chevrolet",
        ZOE: "RENAULT",
        ModelX: "TESLA",
        TaycanEV: "Porsche",
        etron: "Audi",
      };

      // IONIQ9, EquinoxEV,ZOE, ModelX, TaycanEV, etron
      const { ModelX, car = "차없음" } = carBrand;
      console.log(ModelX);
      console.log(car);

 

 

 

Rest Parameter 적용

나머지는 객체로 모아서 변수에 담김

const carBrand = {
        EQE: "Benz",
        i7: "BMW",
        IONIQ9: "Hyundai",
        EquinoxEV: "Chevrolet",
        ZOE: "RENAULT",
        ModelX: "TESLA",
        TaycanEV: "Porsche",
        etron: "Audi",
      };
     
      const { ModelX, ...car } = carBrand;
      
      console.log(ModelX);
      console.log(car);

 

 

 

 

 

 

 

 

 

 

 

property name 과 다르게 변수명을 하고 싶을 대

const carBrand = {
        EQE: "Benz",
        i7: "BMW",
        IONIQ9: "Hyundai",
        EquinoxEV: "Chevrolet",
        ZOE: "RENAULT",
        ModelX: "TESLA",
        TaycanEV: "Porsche",
        etron: "Audi",
      };

   
      const { ModelX: Model3, ...car } = carBrand;
      
      console.log(Model3);
      console.log(car);

 

 

객체 내부의 property name 이 변수 이름으로 사용 할 수 없는 하이픈이 있는 경우

새로운 변수 이름으로 할당하여 선언 가능.

const carBrand = {
        EQE: "Benz",
        i7: "BMW",
        IONIQ9: "Hyundai",
        EquinoxEV: "Chevrolet",
        ZOE: "RENAULT",
        "Model-X": "TESLA",
        TaycanEV: "Porsche",
        etron: "Audi",
      };
      
      const { TaycanEV, "Model-X": Model_3} = carBrand;
      
      console.log(TaycanEV);
      console.log(Model_3);

 

 

대괄로를 적용 하여 computed  property name 도 활용 가능

const carBrand = {
        EQE: "Benz",
        i7: "BMW",
        IONIQ9: "Hyundai",
        EquinoxEV: "Chevrolet",
        ZOE: "RENAULT",
        ModelX: "TESLA",
        TaycanEV: "Porsche",
        etron: "Audi",
      };

      const carName = "etron";

      const { TaycanEV, [carName]: product } = carBrand;
      console.log(TaycanEV);
      console.log(product);