TIL 18 | 구조 분해 할당

구조 분해

배열이나 객체의 구조를 분해하는 문법, 인덱스로 여러 값의 순서가 있는 배열과 프로퍼티 네임으로 여러값의 이름이 붙는 배열이 차이가 있기 때문에 구조분해 할당도 다르게 적용된다.

1. 배열의 구조 분해 할당

const rank = ['호준', '유나', '민환', '재하'];

const macbook = rank[0] // 호준
const ipad = rank[1] // 유나
const airpods = rank[2] // 민환
const coupon = rank[3] // 재하

// 위의 코드 실행을 구조 분해 할당으로 표현하면?
const [macbook, ipad, airpods, coupon] = rank;

구조분해에 할당되는 값이(위의 예시에선 rank) 배열의 형태가 아니면 오류가 발생하기 때문에 주의해야한다.
꼭 선언된 변수의 길이와 배열의 길이가 같아야할 필요는 없다. 할당되는 배열의 길이가 길더라도 인덱스의 순서에 따라 할당이 된다. 만약, 할당하는 배열의 길이가 넘치면 rest parameter를 이용 하지막 요소해 배열로 묶어 할당할 수 있다.

const rank = ['호준', '유나', '민환', '재하', '규식'];
const [macbook, ipad, airpods, ...coupon] = rank;

선언된 배열의 길이가 할당될 값의 개수보다 짧으면 undefined값이 할당되기 때문에 의도한 것이 아니라면 기본값을 넣어주는 것이 좋다.

const rank = ['호준', '유나', '민환'];
const [macbook, ipad, airpods, coupon = '없음'] = rank;

배열의 구조 분해 할당은 변수에 할당된 값을 교환할 때도 사용할 수 있다.

let macbook = '효준';
let ipad = '유나';

console.log('Macbook 당첨자:', macbook) // 효준
console.log('ipad 당첨자:', ipad) // 유나

// 위의 값을 교환한다면?
[macbook, ipad] = [ipad, macbook]

console.log('Macbook 당첨자:', macbook) // 유나
console.log('ipad 당첨자:', ipad) // 효준

2. 객체의 구조 분해 할당

간결하게 프로퍼티 네임 자체를 변수처럼 활용하고자 할 때 구조 분해 할당을 많이 사용한다.

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

const title = macbook.title;
const price = macbook.price;

구조 분해 할당 없이 프로퍼티 이름을 변수로 활용하고자 했다면 일일히 값을 선언하여 벨류 값을 할당해줘야했지만 구조 분해 할당을 사용하면 간단해진다.

const { title, price } = macbook;

console.log(title); // '맥북 프로 16형'
console.lot(price); // 3690000

객체에 존재하지 않는 프로퍼티 네임으로 변수가 선언되어 있으면 해당 프로퍼티에 undefined값이 할당되기 때문에 기본값을 설정해줄 수도 있다. 간혹 'serial-name' 처럼 프로퍼티 네임에 하이픈이 들어가있으면 변수 이름으로 활용하기 어렵기 때문에 구조 분해 할당 시 변수 이름을 바꿔서 할당한다.

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

반드시 객체의 프로퍼티 네임으로반 할당받지 않아도 된다. :새프로퍼티 이름 을 표기하여 새로운 이름에 할당할 수도 있다.

const { title: product, ...rest} = macbook;
console.log(product); '맥북 프로 16형'

3. 함수에서의 구조 분해 할당

(1) 함수의 리턴값이 배열일 때

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

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

(2) rest parameter

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('효준', '효신','재훈','소원','현승','종훈')
       
////// 위의 함수는 아래처러으로도 표현가능하다.
       
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) 함수의 리턴값이 객체일 때

function getObject() {
  return {
    name : '코드잇',
    birth : 2017,
    job : '프로그래밍 강사',
  }
}

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

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

(4) 파라미터를 객체로 사용할 때

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

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

// 위 함수를 구조 분해 할당으로 간결하게 표현하면?

// 방법1.
function printSummary(object){
  const { title, color, price } = object;

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

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

4. DOM api 에서의 활용

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

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

// 위의 이벤트 리스너를 구조 분해 할당으로 표현한 모습
// 방법 1.
btn.addEventListener('click', ({target}) => {
  target.classList.toggle('checked');
})

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

// 방법 3. 중첩 객체 구조 분해
btn.addEventListener('click', ({target : {classList}}) => {
  classList.toggle('checked');
})