Destructuring Object - Javascript ES6

Destructuring은 Object에서도 유용하게 사용할 수 있다.

 let obj = {
   name : "swoo",
   address : "Seoul",
   age : 29
 }
 let {name:myName, age:myAge} = obj;
 console.log(myName, myAge);  // "swoo", 29 . obj의 name과 age key의 value에 해당하는 것들이 myNmae과 myAge에 할당된다.
 

1) Destructuring을 활용한 JSON 파싱
Ajax 등을 통해서 받은 정보를 파싱하는 경우에도 활용할 수 있다.

 var channel = [  
   {  
     "title" : "kbs",  
     "number" : "7"  
   },  
   {  
     "title" : "mbc",  
     "number" : "11"  
   }  
 ];

 /*  
 let [,mbc] = channel; // channel의 1번째 인덱스 값의 내용을 불러옴  
 let {title, number} = mbc; // 위에서 지정한 변수 mbc의 각 value 값을 변수에 지정해 줌  
 */

 //위의 과정을 한번에 할 수 있는 방법은 두 과정을 합치면 된다  
 let [, {title, number}] = channel;
 

2) Event 객체의 전달

//div 태그로 둘러쌓인 어떤 내용에 대하여, 클릭 event 시에 실행되는 함수를 구성해본다

document.querySelector("div").addEventListenr("click", function(event){
  console.log(event.target)
});
//위와 같이 코드를 짜면 event 객체 전체가 불러와질 것이다.
//하지만 이 때, 필요한 부분만을 불러오고자 한다면 Desctructuring을 통해서 가능해진다.
//아래에는 click 되는 target에 대해서만 불러오는 경우이다.
document.querySelector("div").addEventListenr("click", function({target}){
  console.log(target.tagName)
});

//여러가지 정보를 한번에 불러오는 경우
document.querySelector("div").addEventListenr("click", function({type, target}){
  console.log(type, target.tagname)