Destructuring(구조 분해 할당)

📌 Destructuring

🔎 개념

👉 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javscript 표현식

  let data = ["crong", "honux", "jk", "jinny"];
  // data 배열의 0번째 index의 값을 jisu에, 1번째는 건너뛰기, 2번째 index의 값을 jung에 저장
  let [jisu, ,jung] = data;

  console.log(jisu, jung) // crong jk

🔎 Destructuring Object

  let obj = {
    name: "crong",
    adress: "korea",
    age: 10
  }
  // name 변수에 obj의 name 속성의 값 저장, age 변수에 age 속성의 값 저장
  let {name, age} = obj;
  console.log(name, age); => crong 10

  // 객체의 속성의 이름을 다른 이름으로 수정해서 사용할 수 있다.
  let{name: myName, age: myAge} = obj;
  console.log(myName, myAge) => crong 10

🔎 Destructuring 활용 JSON파싱

news = [
  { title: "hello", imgurl: "https://naver.com" },
  { title: "good bye", imgurl: "https://google.com", newslist: "list great!" },
];
// news 배열의 2번째 객체의 title, imgurl 속성 값 가져와 각 변수에 저장
let [, { title, imgurl }] = news;

// good bye https://google.com
console.log(title, imgurl);

🔎 Destructuring 활용 Event 객체전달

// news 배열에서 두 번째 객체의 newslist 속성 값 가져와서 매개변수로 사용
function getNewsList([, { newslist }]) {
  // list great!
  console.log(newslist);
}

// news는 객체로 구성된 배열(위에 "Destructuring 활용 JSON파싱" 참고)
getNewsList(news);

👉 주로 작업 할때 객체 전체를 인자로 전달하는데 Destructuring 활용해서 target 속성만 전달함으로 필요한 것만 전달할 수 있다.

// Destructuring 사용x
Element.addEventListener("click", function (event) {
  console.log(event.target.innerHTML);
});

Element.addEventListener("click", function ({ target }) {
  console.log(target.innerHTML);
});