JavaScript_함수와 구조분해

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

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

console.log(el1); // 컴퓨터
console.log(el2); // 냉장고
console.log(el3); // 세탁기

가장 간단한 상황은 함수가 리턴하는 값이 배열일 때 그 리턴값을 활용하는 것이다. 그러면 배열의 요소들이 하나씩 순서대로 전달된다.

function printWinners(...arg) {
  const [macbook, ipad, airpods, ...coupon] = arg;
  
  console.log('이벤트 결과를 알려드립니다!'); // 이벤트 결과를 알려드립니다!
  console.log(`맥북의 주인공은 '${macbook}'님 입니다.`); // 맥북의 주인공은 '효준'님 입니다.
  console.log(`아이패드의 주인공은 '${ipad}'님 입니다.`); // 아이패드의 주인공은 '효신'님 입니다. 
  console.log(`에어팟의 주인공은 '${airpods}'님 입니다.`); // 에어팟 주인공은 '재훈'님 입니다.
  console.log('코드잇 3개월 수강권 주인공은'); // 코드잇 3개월 수강권 주인공은 '소원'님 '현승'님 '종훈'님 이상 총 3명 입니다. 
  
  for (let user of coupon) {
    console.log(`${user}님`);
  }
  
  console.log(`이상 총 ${coupon.length}명 입니다.`);
}

printWinners('효준', '효신', '재훈', '소원', '현승', '종훈');

때로는 이렇게 Rest Parameter로 Destructuring 문법을 활용할 수도 있다. 그런데 조금만 더 응용하면 파라미터 부분에서 Destructuring 문법을 바로 활용할 수도 있다.

function printWinners([macbook, ipad, airpods, ...coupon]) {
   console.log('이벤트 결과를 알려드립니다!'); 
  console.log(`맥북의 주인공은 '${macbook}'님 입니다.`); 
  console.log(`아이패드의 주인공은 '${ipad}'님 입니다.`); 
  console.log(`에어팟의 주인공은 '${airpods}'님 입니다.`); 
  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); // 2017
console.log(job); // 프로그래밍 강사

그런데 객체의 경우에는 이렇게 객체를 리턴하는 함수보다는 이런식으로

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

function printSummary(object) {
  const {title, color, price} = object;
  
  console.log(`선택한 상품은 '${object.title}'입니다.`);
  console.log(`색상은 ${object.color}이며,`);
  console.log(`가격은 ${object.price}원 입니다.`);
};

printSummary(macbook);

파라미터를 객체의 형태로 작성한 함수에서 좀 더 유용하게 활용된다. 함수 내부에서 이 프로퍼티들을 활용할 때 매번 이 객체에 접근하는 게 아니라 Destructuring 문법을 활용하게 되면 프로퍼티들을 좀 더 간결하게 사용할 수 있는 것이다.

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

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

printSummary(macbook);

그런데 여기서 함수 내에서 딱 프로퍼티들만 사용할 거라면 파라미터 부분에서 바로 Destructuring 문법을 활용할 수도 있다.

이런 점은 특히 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');
});