[ES6 정리] 6. Destructuring

Destructuring은 Object나 Array 혹은 그 외 요소들 안의 변수를 바깥으로 꺼내서 사용할수 있게 하는것이다

 

1. Object Destructuring

const settings = {
  notifications: {
    follow: true,
    alerts: true,
    unfollow: false
  },
  color: {
    theme: "dark"
  }
};

const { notifications: { follow = false } = {} } = settings;

console.log(follow);

위와 같은 코드에서 기존 방식으로 follow를 호출하기 위해선 변수선언을 하고 settings.notifications.follow 경로를 대입해서 호출을 해줬다. 하지만 Object Destructuring 방식을 사용하면 위와 같이 const [불러올 객체] = 경로; 순으로 코드를 입력하면 손쉽게 불러올수 있고 해당 값이 존재하지 않을 경우 default 값도 설정해줄수 있다

 

 

1-1. Renaming

const settings = {
  notifications: {
    follow: true,
    alerts: true,
    unfollow: false
  },
  color: {
    theme: "dark"
  }
};


// 기존 코드
const { notifications: { follow = false } = {} } = settings;

// 명명한 코드
const { notifications: { follow: followStatus = false } = {} } = settings;

console.log(followStatus);

 

Object에서 데이터를 불러올 때 해당 데이터의 이름 그대로 가져오는것도 좋지만 본인만의 변수명으로 바꾸고 싶을 때는 Renaming을 하면 된다. 방법은 간단하게 대상 데이터에 콜론만 붙여주고 바꿀 변수명을 적어주면 된다

(Ex: follow : followStatus)

 

 

2. Array Destructuring

const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

const mon = days[0];
const tue = days[1];
const wed = days[2];
console.log(mon, tue, wed);

const [a, b, c, d="Wow"] = days;
console.log(a, b, c, d);

배열에서 특정 값을 호출할 때 내가 기존에 쓰던 방식은 첫번째 방식처럼 하나 하나 변수를 선언해서 꺼내쓰던 방식이었다. 하지만 Array Destructuring을 이용해서 호출하면 배열 데이터 순서에 맞게 const [불러올 배열 데이터] = 경로; 순으로 선언하면 배열값이 호출이 된다. 만약에 배열에 없는 데이터를 넣고 싶을 땐 default 값을 설정해주고 호출하면 된다.

 

 

3. Function Destructuring

function savesettings1(follow, alert, mkt, color){
  console.log(follow, alert, mkt, color);
}

savesettings1(true, true, true, "blue")


///////////////////////////////////////////////////////////


function saveSettings2({ notifications, color: {theme} }) {
  console.log(notifications, {theme});
}

saveSettings2({
  notifications: {
    follow: true,
    alert: true,
    mkt: true
  },
  color: {
    theme: "blue"
  }
});

함수에서 Destructuring을 하는 이유는 코드가 엄~청 많은 경우에 막상 함수 정의를 해놓으면 그 값이 어떤건지 알수가 없다. 위에서만 봐도 코드가 엄청 길었다면 savesetting1(true, true, true, "blue")의 값이 어떤걸 나타내는지 알아보기 힘들었을수도 있다. 그래서 아래와 같이 follow, alert, mkt 라는 값을 하나로 묶고, color는 따로 묶어줬다. saveSetting2에서는 Setting1에서처럼 하나하나 다 불러올 필요 없이 notification만 호출해주면 해당 obj 전체를 불러와서 출력할수 있다.