[javascript] destructuring

let data = ["grape", "strawberry", "banana", "apple"];
let [purple,,yellow] = data;
console.log(purple, yellow); //"grape", "banana"

객체에서의 사용

let obj = {
  name: "nsunny",
  address: "Korea",
  age: 10
}
let { name, age } = obj;
console.log(name, age); //"nsunny", 10

변수명을 변경해서도 사용할 수 있다.

let { name: myName, age: myAge } = obj;
console.log(myName, myAge); //"nsunny", 10

json 활용

var news = [
  {
    "title": "sbs",
    "url": "http://www.mediatoday.co.kr/article.html?idx=214",
    "newlist": [
      "봄바람을 피가 찾아 실현에 품었기 공자는 이성은 때까지 길지 사막이다.",
      "흙으로 쉬이 부끄러운 듯합니다.",
      "같이 쓸쓸함과 이름을 있습니다.",
    ]
  },
  {
    "title": "mbc",
    "url": "https://imneews.imbc.com/2021/article/6926_34922.html",
    "newlist": [
      "나는 강아지, 말 하나의 까닭이요,",
      "오는 이런 쓸쓸함과 헤는 까닭입니다.",
      "흙으로 어머님, 마리아 봅니다.",
    ]
  }
];

let [, mbc] = news;
let { title, url } = mbc;
console.log(title, url);

let [, { title, url }] = news;
console.log(title, url);

함수의 파라미터에서도 사용할 수 있다.

function getNewsList([, { newslist }]) {
  console.log(newslist);
}

getNewsList(news);

EventListener에서의 사용

이벤트 리스너를 추가했을때 이벤트객체를 모두 넘겨주지 않고 이벤트 target만 넘겨줄 수 있다. (currentTarget, type 등도 가능하다.)

document.querySelector("div").addEventListener("click",
  ({ target }) => console.log(target.tagName)
);