자바스크립트 - 구조분해 Destructing

배열이나 객체를 분해하는 문법

배열과 객체 구조가 달라서 적용하는 방법도 조금 다르다.

 

배열에 적용해보기

 

 

기존에 배열 인덱스를 이용해서 변수에 값을 할당해주는 방법

const rank = ['첫째','둘째','셋째','넷째'];

const no1 = rank[0];
const no2 = rank[1];
const no3 = rank[2];
const no4 = rank[3];

console.log(no1);//첫째
console.log(no2);//둘째
console.log(no3);//셋째
console.log(no4);//넷째

개별 변수를 선언하고 값을 할당하는 대신 rank 배열 자체를 할당해서 배열을 분해시켜서 할당할 수 있다

const [no1, no2, no3, no4] = rank; 

 

주의~ 오른쪽에 배열이 아닌게 할당되거나 아무것도 할당하지 않으면 오류가 발생한다

 

rank 내의 요소 개수가 변수보다 많아져도? 순서대로 할당된다

const [no1, no2, no3, ...no4] = rank; 

rest 파라미터를 사용하면 나머지는 배열로 할당된다 (항상 마지막 파라미터에 사용하자)

 

 

rank 내의 요소 개수가 변수보다 적어지면? undefined가 할당된다 

 

const [no1, no2, no3, no4 = '기본값'] = rank; 

값을 지정해주면 undefined 대신 출력된다

 

const [no1, no2, no3, ...no4] = rank;

---

변수 끼리 값을 교환할때 기존에는 임시 변수를 이용했다

let no1 = '첫째';
let no2 = '둘째';

console.log('1등:', no1); //첫째
console.log('2등:', no2); //둘째

let temp = no1;
no1 = no2;
no2 = temp;

console.log('1등:', no1); //둘째
console.log('2등:', no2); //첫째

 

구조 분해를 이용하면 아래와 같이 간단히 쓸 수 있다 

[no1, no2] = [no2, no1];

console.log('1등:', no1); //둘째
console.log('2등:', no2); //첫째

---

객체에 적용하기 

 

const macbook = {
  title :'맥북갖고싶다',
  price :'비싸겠지',
  memory : '적당하면될걸',
  storage: '1테라바이투',
  display: '큰걸룽',
}

// const title = macbook.title; 
// const price = macbook.price;
const {title, price} = macbook;

console.log(title);
console.log(price);

배열이랑 거의 비슷하다 [ ] 대신 { } 를 사용한다

 

const {title, color} = macbook; 

객체에 존재하지 않는 프로퍼티를 넣으면 -> undefined

 

const {title, color = 'silver'} = macbook; 

undefined대신 값 지정이 가능하다 

 

const{title, ...rest} = macbook;

console.log(rest); => price ~ display 까지의 프로퍼티를 담은 객체가 출력됨 

 

macbook 객체가 가지고 있는 프로퍼티가 아닌 다른 변수명을 쓰고싶다면?

const {title: product} = macbook;

console.log(title);  -> title 이라는 변수가 선언되지 않았다는 에러 발생 

console.log(product); -> 기존 title 에 담겨있던 값이 출력된다 

ex. 'serial-num': 'ASDGQDDDSF'

파라미터 이름에 하이픈(-) 있는 경우 따옴표''를 이용해서 사용이 가능하다.

이 경우 destructing 할때 새로운 변수 이름으로 선언해야 한다  

 

computed 변수도 사용이 가능하다

const propertyName = 'title';

const { [propertyName] : product } = macbook;

console.log(product);

 

예제

const menu1 = { name: '아메리카노' };
const menu2 = { name: '바닐라 라떼', ice: true };
const menu3 = { name: '카페 모카', ice: false };

function printMenu(menu) {
	//  menu 파라미터로 전달되는 객체에 ice 프로퍼티가 없을 경우 기본값은 true여야 합니다
	const {name, ice = 'true'} = menu;

	console.log(`주문하신 메뉴는 '${ice ? '아이스' : '따뜻한'} ${name}'입니다.`);
}

---

함수에 활용하기 

 

1. 배열 

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

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

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

console.log(el1);
console.log(el2);
console.log(el3);


//rest 파라미터 = 배열 이라는 점을 활용
function printWinner(...arg){
  const [macbook, ipad, airpods, ...coupon] = arg;
  
  console.log(`맥북 주인 '${macbook}'`);
  console.log(`아이패드 주인 '${ipad}'`);
  console.log(`에어팟 주인 '${airpods}'`);
  
  for (let user of coupon){
    console.log(`'${user}'`);
  }
}

printWinner('맥북', '아이패드', '에어팟', '쿠폰1', '쿠폰2', '쿠폰3');


//파라미터에 destructing 구문을 바로 활용할 수 있다 
function printWinner([macbook, ipad, airpods, ...coupon]){
  console.log(`맥북 주인 '${macbook}'`);
  console.log(`아이패드 주인 '${ipad}'`);
  console.log(`에어팟 주인 '${airpods}'`);
  
  for (let user of coupon){
    console.log(`'${user}'`);
  }
}
const ranks = ['맥북', '아이패드', '에어팟', '쿠폰1', '쿠폰2', '쿠폰3'];
printWinner(ranks);

 

2. 객체

///기존 작성 방법
const macbook = {
  title: 'title',
  price: 'price',
  color: 'color',
  memory: 'memory',
};

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

printSummary(macbook);

// destructing 사용  > 프로퍼티 이름을 간결하게 사용
function printSummary(object){
  const {title, color, price} = object;
  
  console.log(`선택한 상품은 ${title}이며`);
  console.log(`색상은 ${color}이며`);
  console.log(`가격은 ${price}이며`);
};

//파라미터에 직접 객체를 넣기
function printSummary(title, color, price){

  console.log(`선택한 상품은 ${title}이며`);
  console.log(`색상은 ${color}이며`);
  console.log(`가격은 ${price}이며`);
};


//html DOM 이벤트 다룰때 활용

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

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

//이벤트 핸들러 작성할때 파라미터로 이벤트 객체 전달, target 프로퍼티만 사용하므로
btn.addEventListener('click', ( {target} ) => {
  target.classList.toggle('checked');
});

// target 도 객체니까 한번 더 분해 = 중첩 객체 구조 분해 (Nested Object Destructing)
btn.addEventListener('click', ( {target : {classList} ) => {
  target.classList.toggle('checked');
});

//아니면 함수 안에서 한번 더 분해해줄 수 있다 
btn.addEventListener('click', ( {target} ) => {
  const {classList} = target;
  target.classList.toggle('checked');
});

 

null 값을 가질때는 기본값='' 로 지정해줘도 null을 반환한다 

기본값은 할당된 값이 없거나, undefined 일때만 사용이 됨!! 

 

---

예제

 

원하는 출력값을 얻기 위해 함수를 작성하기 

const music1 = { title: '난치병', singer: '하림' };
const music2 = { title: '너의 모든 순간', singer: '성시경' };
const music3 = { title: '무릎', singer: '아이유' };
const music4 = { title: '옛사랑', singer: '이문세' };
const music5 = { title: '한숨', singer: '이하이' };
const music6 = { title: '추억의 책장을 넘기면', singer: '이선희' };

function printFavoriteSong(name, music) {
  const { singer, title } = music;
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${singer}'의 '${title}'이라는 노래입니다.`);
}
function printFavoriteSong(name, music) {
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${music.singer}'의 '${music.title}'이라는 노래입니다.`);
}
function printFavoriteSong(name, { title, singer }) {
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${singer}'의 '${title}'이라는 노래입니다.`);
}

printFavoriteSong('영훈', music4);
printFavoriteSong('동욱', music1);
printFavoriteSong('대위', music3);
printFavoriteSong('소원', music2);
printFavoriteSong('우재', music5);
printFavoriteSong('영준', music6);

//콘솔
최근 '영훈'님이 즐겨듣는 노래는 '이문세'의 '옛사랑'이라는 노래입니다.
최근 '동욱'님이 즐겨듣는 노래는 '하림'의 '난치병'이라는 노래입니다.
최근 '대위'님이 즐겨듣는 노래는 '아이유'의 '무릎'이라는 노래입니다.
최근 '소원'님이 즐겨듣는 노래는 '성시경'의 '너의 모든 순간'이라는 노래입니다.
최근 '우재'님이 즐겨듣는 노래는 '이하이'의 '한숨'이라는 노래입니다.
최근 '영준'님이 즐겨듣는 노래는 '이선희'의 '추억의 책장을 넘기면'이라는 노래입니다.

 

 

function printFavoriteSong(name, music) {
  const { singer, title } = music;
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${singer}'의 '${title}'이라는 노래입니다.`);
}

 

function printFavoriteSong(name, music) {
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${music.singer}'의 '${music.title}'이라는 노래입니다.`);
}

 

 

function printFavoriteSong(name, { title, singer }) {
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${singer}'의 '${title}' 이라는 노래입니다.`);
}