Object Destructuring

Destructuring은 object나 array, 그 외의 요소들 안의 변수을 외부에서 사용할 수 있는것이다. ES6이전에 object안의 요소값에 접근하기위해 object.property.property. …식으로 접근하였다. json으로 작성된 settting들을 JS에서 사용하면 길어진 접근법 때문에 가독성도 떨어지고 오류도 많았다.

/**
 * ES6전 object요소를 사용하기위해 if문에 변수의 요소를 접근하는 방식을 사용했다.
 * @exampl
 * if(settings1.notifications.follow1){
 * send email code...
 * }
 */
const settings1 = {
  notifications1: {
    follow1: true,
    alerts: true,
    unfollow: false,
  },
  color1: {
    theme: "dark",
  },
};

if (settings1.notifications1.follow1) {
  // send email
}

/**
 * destructuring을 사용하면 아래와 같이 변수를 오브젝트 형식으로 선언하고
 * object요소 이름을 변수로 사용한다.
 * @decription
 * destructuring의 변수가 되는 기준은 마지막 요소이다.
 */
const {
  notifications1: { follow1 },
  color1,
} = settings1;

console.log(color1);

하지만 ES6이후 변수명을 object로 선언하여 마지막으로 지목된 요소를 변수로 선언하는 방법인 destructuring이 등장하여 object를 짧은 변수명으로도 접근가능하게 되었다.

<aside> 📝 Destructuring declaration

const {property} = object

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

</aside>

Object의 선언하고자 하는 property가 없어도 one-line-statement를 사용하여 destructuring선언할때 default value를 넣어주어 추가로 정의할 수 있다.

<aside> 📌 one-line-statement를 사용한다고해서 원래의 object의 요소가 추가로 정의되는 것은 아니다.

</aside>

<aside> 📝 one-line-statement

const {property = defaultValue} = object

const {notifications = { alerts: true } } = settings
console.log(notifications);
> `{alerts:true}`

const {notifications:{follow = true}={}} = settings
console.log(follow);
> `true`

</aside>

/**
 * settings2에 notifications이 없다면 `one-line-statement`를 이용하여
 * notifications를 defualt value를 만들고 follow를 default값을 준다.
 * settings2에 notifications라는 object가 없어도 destructuring이
 * 되는걸 볼 수 있다.
 * @exsampl
 * const { notifications: { follow = true } = {} } = settings2;
 */
const settings2 = {
  color: {
    theme: "dark",
  },
};
const { notifications = { alerts: true } } = settings2;
console.log(notifications);

Array Destructuring

Array Destructuring은 값을 조작하지않고 외부로부터 array데이터를 받을때 사용하면 좋다.

<aside> 📝 Array destructuring declaration

const [index1,index2, …] = array

const [mon, tue, wed] = Array.of("Mon", "Tue", "Wed");
console.log(mon, tue, wed);
> `Mon Tue Wed`

const days = () => Array.of("Mon", "Tue", "Wed");
const [mon, tue, wed] = days();
console.log(mon, tue, wed);
> `Mon Tue Wed`

</aside>

Object destructuring와 마찬가지로 중괄호{} 대신 대괄호[]를 사용하여 array destructuring을 선언하고 사용한다.

/**
 * Array destructuring를 사용하기전 array 앞 세개의 값을 가져오기 위해선
 * 아래와 같이 코드를 구현해야 했었다.
 */
const days1 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const day = days1.filter((day, index) => {
  return index < 3 ? true : false;
});
console.log(day);

/**
 * Array destructuring를 사용하는 이후로 전달된 array 요소 갯수 이하만큼
 * 원하는 값을 변수를 선언하여 사용할 수 있다.
 * 물론 default value도 넣어서 array에 없는 값을 변수를 선언하여 사용할 수 있다.
 */
const days2 = ["Mon", "Tue", "Wed"];
const [mon2, tue2, wed2, thu2 = "Thu"] = days2;
console.log(mon2, tue2, wed2, thu2);
/**
 * 일반함수나 arrow function으로도 array destructuring을 사용할 수 있다.
 */
const days3 = () => ["Mon", "Tue", "Wed"];
const [mon3, tue3, wed3, thu3] = days3();
console.log(mon3, tue3, wed3, thu3);