Destructuring(비구조화)에 대해 알아보자

Destructuring?

object, array 등의 요소들 안의 변수를 밖으로 꺼내 사용할 수 있도록 하는 것이다

Object Destructuring

const info = {
  name: "정찬영",
  age: 28,
  hobby: {
    count: 2,
    first: "game",
    second: "music",
  },
};

const { age } = info;
console.log(age); // 28
const { name } = info;
console.log(name); // "정찬영"
const { hobby: { first = "none" } = {} } = info;
console.log(first); // "game"

{ 꺼낼 속성 } = 오브젝트와 같이 사용하며 만약 꺼낼 속성이 object in object 형태라면
{ 해당 오브젝트: { 꺼낼 속성 }, } = 오브젝트 와 같이 사용하면 된다
꺼낼 속성은 위 코드 처럼 default value를 설정 할 수 있고 설정한 경로에서 찾지 못하면 default value가 사용된다
그리고 const { hobby: { first = "none" } = {} } = info;
코드를 보면 = {}가 적혀있는데 이를 통해 hobby또한 default value를 설정 할 수 있다

꺼낼 오브젝트타입 속성의 default value를 설정했을 때 차이점

• 해당 변수를 찾지 못할 경우 오류가 아닌 undefined를 반환한다
• one-line-statement 가 된다

위 코드에서 default value인 = {}를 없앨 경우 자동으로 아래와 같이 줄이 늘어진다

const {
  hobby: { first = "none" },
} = info;

하지만 ={}를 쓴다면

const { hobby: { first = "none" } = {} } = info;

자동으로 한 줄로 바뀐다

---

더 복잡한 형태이더라도

const {
  family: {
    mom: {
      like: { animal },
    },
  },
} = info;

한 줄로 쭉 된다

const { family: { mom: { like: { animal } = {} } = {} } = {} } = info;

이게 코드를 압축하는데는 확실히 효율적이지만? 가독성이 더 좋은지는 아직 잘모르겠다

Array Destructuring

Array Destructuring은 Object Destructuring와는 다르게 []를 사용하며 index에 따라 []안 변수에 값이 저장된다

const days = ["MON", "TUE", "WED"];

const [mon, tue, wed, thu = "THU"] = days;

console.log(mon, tue, wed, thu); // MON TUE WED THU

Array Destructuring도 코드처럼 default value를 설정할 수 있다

Function Destructuring

Function Destructuring은 함수의 인자 값을 Destructuring해서 함수에서 받아온 인자를 핸들링하기 용이하게 해준다

function sayHello({ name, age, favoriteFood = "hamburger" }) {
  console.log(name);
  console.log(age);
  console.log(favoriteFood);
}

sayHello({
  name: "정찬영",
  age: 28,
  // favoriteFood: "kimchi",
});

위 코드에서는 함수의 인자를Object Destructuring한 후 각 값을 출력하고 있다
이런 경우 원하는 프로퍼티만 골라서 사용 할 수도 있고, default value를 설정 할 수도 있다
Array Destructuring 가능하다

끝..! 🍗