모던 자바스크립트 - Destructuring(구조 분해) With 함수

함수 + 배열 + Destructuring문법

함수가 리턴하는 값이 배열일 때

function getArray() {
  return ['컴퓨터','냉장고','세탁기']
}

const [el1,el2,el3] = getArray();

 

Rest파라미터가 배열이라는 점을 이용

function printWinners(...args){
  const [macbook, ipad, airpads, ...coupon] = args;

  console.log('이벤트 결과를 알립니다.');
  console.log(`맥북의 주인공은 '${macbook}'님 입니다.`);
  console.log(`아이패드의 주인공은 '${ipad}'님 입니다.`);
  console.log(`에어팟의 주인공은 '${airpads}'님 입니다.`);
  console.log('코드잇 3개월 수강권 주인공은')
  
  for (let user of coupon){
    console.log(`'${user}'님`);
  }

  console.log(`이상 총 ${coupon.length}명 입니다.`);
}

printWinners('효준','수민','상훈','소원','현승','정남');

 

파라미터 부분에 Destructuring문법 사용

여러 개의 아규먼트를 전달받는 함수가 아닌 배열 하나를 전달받는 함수로 구현이 가능해짐

function printWinners([macbook, ipad, airpads, ...coupon]){
  console.log('이벤트 결과를 알립니다.');
  console.log(`맥북의 주인공은 '${macbook}'님 입니다.`);
  console.log(`아이패드의 주인공은 '${ipad}'님 입니다.`);
  console.log(`에어팟의 주인공은 '${airpads}'님 입니다.`);
  console.log('코드잇 3개월 수강권 주인공은')
  
  for (let user of coupon){
    console.log(`'${user}'님`);
  }

  console.log(`이상 총 ${coupon.length}명 입니다.`);
}

const ranks = ['효준','수민','상훈','소원','현승','정남'];
printWinners(ranks);

---

객체 + 배열 + Destructuring문법

함수가 리턴하는 값이 객체일 때

function getObject() {
  return {
    name: '코드잇',
    birth: 2017,
    job: '강사',
  }
};

const { name: brand, birth, job } = getObject();

console.log(brand);
console.log(birth);
console.log(job);

 

파라미터를 객체의 형태로 작성한 함수에서 사용

const macbook = {
  title: '맥북 프로 16형',
  price: 3690000,
  color: 'silver',
  memory: '16GB',
  storage: '1TB SSD 저장 장치',
  display: '16형 Retina 디스플레이'
};

//함수내에서 매번 객체에 접근
function printSummary(object){
  console.log(`선택형 상품은 '${object.title}'입니다.`);
  console.log(`색상은 ${object.color}이며,`)
  console.log(`가격은 ${object.price}원 입니다.`)
}
printSummary(macbook);

 

---

function printSummary(object){
  const { title, color, price } = object;
  //프로퍼티 사용이 간결해짐
  console.log(`선택형 상품은 '${title}'입니다.`);
  console.log(`색상은 ${color}이며,`)
  console.log(`가격은 ${price}원 입니다.`)
}
printSummary(macbook);

만약 정해진 프로퍼티만 함수 내에서 사용할 것이라면, 함수의 파라미터에서 Destructuring 문법을 활용할 수 있다.

function printSummary({ title, color, price }){
  console.log(`선택형 상품은 '${title}'입니다.`);
  console.log(`색상은 ${color}`)
  console.log(`가격은 ${price}원 입니다.`)
}
printSummary(macbook);

---

더 알아보기

 

HTML의 DOM이벤트를 다룰 때도 유용하다

const btn = document.querySelector('#btn');

btn.addEventListener('click', (event) => {
  event.target.classList.toggle('checked');
});

이벤트 핸들러 작성 시, 파라미터로 이벤트 객체가 전달되니까 매번 이벤트 객체에 접근하는게 아니라 target프로퍼티만 사용한다면 함수 내부를 간결하게 작성할 수 있다.

const btn = document.querySelector('#btn');

btn.addEventListener('click', ({ target }) => {
  target.classList.toggle('checked');
});

 

target프로퍼티가 또 다시 객체, 충접된 객체는 :을 가지고 한번 더 분해하는 방식으로 응용할 수 있다.

const btn = document.querySelector('#btn');
//소괄호안이 복잡해지고 가독성을 해쳐서 흔한 경우가 아님
btn.addEventListener('click', ({ target: classList }) => {
  classList.toggle('checked');
});

중첩된 객체를 분해하지 않아도 필요에 따라 함수 내부에서 한번 더 Destructuring문법 사용하는 방법도 있다.

따라서 파라미터 부분에서 중첩된 객체를 분해하는 것이 가독성을 해치거나 문법 자체가 헷갈리면 이 방법 사용해 보자

const btn = document.querySelector('#btn');

btn.addEventListener('click', ({ target }) => {
  const { classList } = target;
  classList.toggle('checked');
});

---

Destructuring문법이 익숙해지면 중첩 객체 구조 분해(Nested Object Destructuring) 학습 해보기