[ JS ] Destructuring

🔴  Object Destructuring

⚪  큰 오브젝트에서 특정 변수나 그 안에 속한 작은 오브젝트에 접근할 수 있도록 하는 기법

 

const settings = {
  notifications: {
    follow: true,
    alerts: true,
    unfollow: false
  },
  color: {
    theme: "dark"
  }
};
// const 변수 생성
const {
  notifications: { follow },
  color
} = settings;

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

 

const settings = {
  notifications: {
    alerts: true,
    unfollow: false
  },
  color: {
    theme: "dark"
  }
};
// follow 값이 없다면 false로 설정하여 생성하고, notifications 자체가 없다면 빈 object 생성
const { notifications: { follow = false } = {} } = settings;

console.log(follow);  // false
console.log(color);  // {theme: "dark"}

 

🟠  Array Destructuring

 

const days = ["Mon", "Tue", "Wed"];

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

console.log(mon, tue, wed, thu);  // Mon Tue Wed Thu

 

🟡  Destructuring Renaming

 

// [ Rename with const ]
const setting = {
  color: {
    chosen_color: "dark"
  }
};
// chosen_color 속성을 chosenColor 이름의 const 변수로 저장
const {
  color: { chosen_color: chosenColor = "light" }
} = settings;

console.log(chosenColor);  // dark

 

// [ Rename with let ]
const setting = {
  color: {
    chosen_color: "dark"
  }
};

let chosenColor = "blue";

console.log(chosenColor);  // blue

({
  color: { chosen_color: chosenColor = "light" }
} = settings);

console.log(chosenColor);  // dark

 

🟢  Function Destructuring

 

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

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

 

🔵  Value Shorthands

⚪  중복되는 변수명을 하나로 적어줌으로써 코드를 간결하게 하는 방법이다.

 

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

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

 

🟣  Swapping and Skipping

⚪  Swapping

 

let mon = "Sat";
let sat = "Mon";

[mon, sat] = [sat, mon];

⚪  Skipping  배열의 일부 요소를 , 를 사용하여 제외하는 방법

 

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

const [, , , thu, fri] = days;

console.log(thu, fri);  // thu fri