[JS] ES6 - Destructuring

이채현

💡 Javascript ES6 문법을 배워보자 - 비구조화

Destructuring

destructuring(비구조화)는 object나 array 등 안의 변수를 바깥으로 끄집어내는 것

Object Destructuring

/**
 * Object Destructuring
 */
const settings = {
  notifications: {
    follow: true,
    alerts: true,
    unfollow: false,
  },
  color: {
    theme: "dakr",
  },
};

if (settingss.notifications.follow) {
  // send email
}

// 기존에는 위와 같이 사용했다. 보기에 매우 불편하다.
// 만약 follow라는 값이 없느면 undefined오류가 발생할 것이다.

⇒

// 기본적으로 settings를 열어 notifications에 접근하여 follow를 가져오는 것

const { notifications: { follow = false } = {}, color } = settings;
// settings에 notifications가 없으면 {}, notifications에 follow가 없으면 false로
// default 값 세팅을 해준다.

console.log(follow); // true
console.log(color); // { theme: 'dark' }

// 이 때 notifications는 변수가 아님 -> notifications를 console.log에 찍으면 is not defined 오류 발생
// 이런 방식은 큰 Object에서 특정 변수나 그 안에 속한 작은 Object에 접근할 수 있도록 해주는 것
// 

Array Destructuring

array destructuring은 보통 가져온 정보를 조작하기 않을 때 쓰기 좋다.

/**
 * Array Destructuring
 */
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

const [mon, tue, wed, , , , sun, aaa = "AAA"] = days; // ,,,은 skippin

// mon 에는 "Mon" , tue에는 "Tue", wed 에는 "Wed" sun에는 "Sun"이 들어가있음
// aaa는 AAA
console.log(sun);

Renaming

api등에서 받아온 데이터의 이름이 별로일 때 바꿔보자

/**
 * Renaming
 */

const settings = {
  color: {
    chosen_color: "dark",
  },
};

const {
  color: { chosen_color: chosenColor = "light" },
} = settings;
// :를 붙혀 새로운 변수를 생성하고 그 변수에 값을 담는다.

-----------------

let chosenColor = "blue"; // 변수가 미리 있다면

console.log(chosenColor); // blue

({
  color: { chosen_color: chosenColor = "light" },
} = settings);
// 위와 같이 적어 이미 정의가 되어있는 choseColor의 값을 업데이트한다.

console.log(chosenColor); // dark

Function Destructuring

/**
 * Function Destructuring
 */
function saveSettings(followAlert, unfollowAlert, mrkAlert, themeColor) {} // argument가 너무 길다

function saveSettings({ follow, alert, color = "blue" }) {
  console.log(color); // green
}

saveSettings({
  follow: true,
  alert: true,
  mkt: true,
  color: "green",
});

----------- 더 간단히..

function saveSettings({ notifications, color: { theme = "blue" } = {} }) {
  console.log(theme); // blue
}

saveSettings({
  notifications: {
    follow: true,
    alert: true,
    mkt: true,
  },
  //   color: { theme: "green" },
});

Value shorthands

const follow = checkFollow();
const alert = checkAlert();

const settings = {
  notifications: {
    follow: follow,
    alert: alert,
  },
};

// 위 아래 같다. key와 value가 같다면...

const settings = {
    notifications:{
        follow,
        alert
    }
}