함수와 Destructuring

배열

함수가 배열일 때 return값 활용하기

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

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

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

 

- rest parameter가 배열인 점을 참고하여 destructuring 문법 활용하기

function printWinners(...arg) {
  const [macbook, ipad, airpods, ...coupon] = arg;
  
  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}명 입니다.`);
}

printWinners('효준', '효신', '재훈', '소원', '현승', '종훈');
/*
이벤트 겨과를 알려드립니다.
맥북의 주인공은 '효준'님 입니다.
아이패드의 주인공은 '효신'님 입니다.
에어팟 주인공은 '제훈'님 입니다.
코드잇 3개월 수강권 주인공은
'소원'님
'현승'님
'종훈'님
이상 총 3명 입니다.
*/

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);
/*
이벤트 겨과를 알려드립니다.
맥북의 주인공은 '효준'님 입니다.
아이패드의 주인공은 '효신'님 입니다.
에어팟 주인공은 '제훈'님 입니다.
코드잇 3개월 수강권 주인공은
'소원'님
'현승'님
'종훈'님
이상 총 3명 입니다.
*/

 

객체

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) {
  console.log(`선택한 상품은 '${object.title}'입니다.`);
  console.log(`색상은 ${object.color}이며,`);
  console.log(`가격은 ${object.price}원 입니다.`);
}

printSummary(macbook);
/*
선택한 상품은 '맥북 프로 16형'입니다.
색상은 silver이며,
가격은 3690000원 입니다.
*/

 

- 파라미터를 객체의 형태에서 유용하게 사용

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

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

printSummary(macbook);
/*
선택한 상품은 '맥북 프로 16형'입니다.
색상은 silver이며,
가격은 3690000원 입니다.
*/

 

- HTML DOM 이벤트를 다룰 때도 유용하게 사용

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

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

-> destructuring 문법으로 수정

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

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

 

QUIZ 01

다음 코드를 실행했을 때 콘솔에 출력되는 결과로 올바른 보기를 선택해주세요.

const numbers = [5, undefined, null, 3, 1, 7, 0];
const [a, b=4, c=2, ...d] = numbers;

console.log(a); // 5
console.log(b); // 4
console.log(c); // null
console.log(d[2]); // 7
console.log(d[4]); // undefined