Destructuring 문법

Destructuring 문법이 유용하게 사용되는 경우

🧺 Array 안에 있는 데이터를 변수에 담을 때

var arr = [2, 3, 4];

// before
var a = arr[0];
var b = arr[1];
var c = arr[2];

// after
var [a, b, c] = [2, 3, 4];

등호로 기본값 지정 가능

var [a, b, c = 5] = [2, 3];

c는 아무 값도 안들어오는 경우 5라는 기본 값을 할당해줌

👜 Object 안에 있는 데이터를 변수에 담을 때

var obj = { name: "Kim", age: 30 };

// before
var name = obj.name;
var age = obj.age;

// after
var { name, age } = obj;

변수명을 key 값과 똑같이 써야 함.

등호로 기본값 지정 가능

var obj = { name: "Kim" };

var { name, age = 20 } = obj;

변수를 object에 집어넣고 싶은 경우

var name = "Kim";
var age = 30;

// before
var obj = { name: name, age: age };

// after
var obj = { name, age };

name : name 이렇게 key값과 value값이 동일하면
name 이렇게 하나로 생략이 가능

함수 파라미터 변수 만들 때

var obj = { name: "Kim", age: 30 };

function 함수({ name, age }) {
  console.loe(name); // Kim
  console.log(age); // 30
}

함수(obj);

---

✍🏻 연습 문제

Q. 다음과 같은 Object에서 데이터를 뽑아서 변수를 만들고 싶습니다.

let 신체정보 = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

여기서 키, 몸무게, 상의사이즈, 하의사이즈 정보를 각각 뽑아서 4개의 변수를 만들고 싶습니다.
어떻게 만들면 될까요?

A.

let 신체정보 = {
  body: {
    height: 190,
    weight: 70,
  },
  size: ["상의 Large", "바지 30인치"],
};

let {
  body: { height, weight },
  size: [상의, 하의],
 } = 신체정보;

데이터가 얼마나 복잡하든간에 좌우 형태를 똑같이 맞추면 destructuring 문법으로 변수를 만들 수 있다.