Destructuring

Destructuring

검색해보니 구조 분해, 비 구조화, 구조 파괴 등 여러가지로 불리우고 있었다

이건 뭐 설명을 못 하겠다 그냥 예제 코드로 살펴보자

배열

const data = [1,2,3,4,5];
const [a,,,b] = data;

console.log(a,b);

두번째 줄에 배열 형식으로 변수 a와 b를 선언하고 data를 할당해주는데

a와 b의 위치에 있는 data의 값과 매치해서 할당된 것을 볼 수 있다

객체

객체도 사용이 가능하다

const obj = {
    name : 'obj',
    age : 13,
    sayHello : function () {
        console.log('hi');
    }
}
const {name ,sayHello} = obj;

console.log(name);
sayHello();

객체는 배열과는 조금 다르게 위치와 매치하지않고 이름과 매치해서 변수를 할당시켜준다

활용

이벤트 핸들러의 이벤트 객체에서 활용이 가능하다

addEventListener

const bodyElem = document.querySelector('body');

bodyElem.addEventListener('click', function ({clientX,clientY}){
    console.log(clientX, clientY);
})

이 코드는 body태그에서 마우스 클릭시 마우스의 좌표를 콘솔에 출력하는 코드인데

원래라면 event객체를 받아와서 event.clientX , event.clientY로 사용했지만

event객체가 넘어오는 자리에 Destructuring을 사용해 evnet객체의 clientX,clientY 값만 뽑아온 것이다