Destructuring (구조분해)

Destructuring (구조분해)

- 배열이나 객체를 구조분해

 

배열 구조분해

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

const macbook = rank[0];
const ipad = rank[1];
const airpods = rank[2];
const coupon = rank[3];

console.log(macbook); // 효준
console.log(ipad); // 유나
console.log(airpods); // 민환
console.log(coupon); // 재하

const rank = ['유나', '효준', '민환', '재하'];
const [macbook, ipad, airpods, coupon] = rank;

console.log(macbook); // 유나
console.log(ipad); // 효준
console.log(airpods); // 민환
console.log(coupon); // 재하

 

- rest parameter 사용 가능

- rest parameter는 가장 마지막에 사용해야 함

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

console.log(macbook); // 유나
console.log(ipad); // 효준
console.log(airpods); // 민환
console.log(coupon); // ["재하", "규식"]

 

- 할당하는 길이가 선언되는 배열보다 적을 경우

- undefined 반환

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

console.log(macbook); // 유나
console.log(ipad); // 효준
console.log(airpods); // 민환
console.log(coupon); // undefined

 

- 기본값 작성 가능

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

console.log(macbook); // 유나
console.log(ipad); // 효준
console.log(airpods); // 민환
console.log(coupon); // 없음

 

- 변수에 할당된 값을 서로 교환할 때도 사용가능

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

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

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

[macbook, ipad] = [ipad, macbook];

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

 

실습

주어진 템플릿 속의 코멘트를 참고해서 제시된 문제들을 해결해주세요.

 

// 1. Destructuring 문법을 활용해서 numbers 배열의 각 요소를 one, two, three라는 변수에 할당
const numbers = [1, 2, 3];

const one = numbers[0];
const two = numbers[1];
const three = numbers[2];


// 2. Destructuring 문법을 활용해서 TV는 livingRoom, 나머지 요소들(배열)은 kitchen 변수에 할당
const products = ['TV', '식탁', '냉장고', '전기밥솥', '전자레인지', '오븐', '식기세척기'];

const [livingRoom, ...kitchen] = products;

// 3. Destructuring 문법을 활용해서 두 변수의 값을 서로 바꾸기
let firstName = 'Kang';
let lastName = 'Young';

[firstName, lastName] = [lastName, firstName];


// 테스트 코드
console.log(one);
console.log(two);
console.log(three);
console.log(livingRoom);
console.log(kitchen[1]);
console.log(firstName);
console.log(lastName);

 

실습 결과

1
2
3
TV
냉장고
Young
Kang

 

---

객체 구조분해

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

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

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

 

-> destructuring 문법으로 변환

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

const {title, price} = macbook;

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

 

- 객체에 존재하지 않는 프로퍼티 이름을 넣는다면 undefined을 반환

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

const {title, color} = macbook;

console.log(title); // 맥북 프로 16형
console.log(color); // undefined

 

- 할당 연산자를 통해 기본값도 지정가능

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

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

console.log(title); // 맥북 프로 16형
console.log(color); // silver

 

- 프로퍼티 이름과 다른 새로운 이름의 변수 선언가능

- 프로퍼티 이름이 변수로 사용불가능한 경우 유용하게 사용

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

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

console.log(product); // 맥북 프로 16형
console.log(rest);
// {price: 3690000, memory: "16GB", storage: "1TB SSD 저장 장치", display: "16형 Retina 디스플레이"}

 

실습

주어진 템플릿 속의 코멘트를 참고해서 제시된 문제들을 해결해주세요.

 

// 1. Destructuring 문법을 사용해서 title, artist, year, medium 변수에 myBestArt 객체의 각 프로퍼티를 할당해 주세요
const myBestArt = {
	title: '별이 빛나는 밤에',
	artist: '빈센트 반 고흐',
	year: 1889,
	medium: '유화',
};

const {title, artist, year, medium} = myBestArt;

// 2. Destructuring 문법을 활용해서 myBestSong의 프로퍼티 중 title과 artist는 각각 songName과 singer라는 변수에, 나머지는 rest라는 변수에 객체로 할당해 주세요
const myBestSong = {
	title: '무릎',
	artist: '아이유(IU)',
	release: '2015.10.23.',
	lyrics: '모두 잠드는 밤에...'
};

const {title: songName, artist: singer, ...rest} = myBestSong;

// 3. printMenu 함수 안에 잘못 작성된 Destructuring 코드를 수정해 주세요
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}'입니다.`);
}



// 테스트 코드
console.log(title);
console.log(artist);
console.log(year);
console.log(medium);
console.log(songName);
console.log(singer);
console.log(rest);
printMenu(menu1);
printMenu(menu2);
printMenu(menu3);

 

실습 결과

별이 빛나는 밤에
빈센트 반 고흐
1889
유화
무릎
아이유(IU)
{ release: '2015.10.23.', lyrics: '모두 잠드는 밤에...' }
주문하신 메뉴는 '아이스 아메리카노'입니다.
주문하신 메뉴는 '아이스 바닐라 라떼'입니다.
주문하신 메뉴는 '따뜻한 카페 모카'입니다.