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데이터를 받을때 사용하면 좋다.
<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);