구조 분해 할당

객체나 배열을 변수로 분해할 수 있게 해주는 문법

1. 배열 분해하기

let arr = ['Bora', 'Lee']
let [firstName, surname] = arr;
alert(firstName) // Bora
alert(surName) // Lee

(1) 쉼표를 사용하여 요소 무시하기

let [firstName, , title] = ['Julius', 'Consul', 'of the Roman Republic']
alert(title); // Consul

(2) 할당 연산자 좌측엔 뭐든지 올 수 있음

let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');
alert(user.name); // Bora

(3) .entries() 로 반복하기

let user = {
	name = 'John',
  	age = 30
};

for (let [key, value] of Object.entries(user)) {
	alert(`${key}:${value}`); // name:John, age: 30
}

(4) 변수 교환 트릭

let guest = 'Jane';
let admin = 'Pete';
[guest, admin] = [admin, guest];
alert(`${guest} ${admin}`); // Pete Jane

2.기본 값

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지않음
할당할 값이 없으면 undefined로 취급

let [firstName, surName] = [];
alert(firstName); // undefined
alert(surName); // undefined

=을 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 '기본값'을 설정할 수 있음

let [name = 'Guest', surname = 'Anontymous'] = ['Julius'];
alert(name); // Julisu
alert(surname); // Anonymous

3. 객체 분해하기

let options = {
	title: 'Menu',
  	width: 100,
  	height: 200
};
let {title, width, height} = options;
alert(title); // Menu
alert(width): // 100
alert(height): // 200

let option = {
	title: 'Menu',
  	width: 100,
  	height: 200
}
let {width: w, height: h, title} = options;
// width => w, height => h, title => title
alert(title); //Menu
alert(w); //100
alert(h); //200

객체 프로퍼티를 프로퍼티키와 다른 이름을 가진 변수에 저장

let optionss = {
	title: 'Menu'
};
let {width:w = 100, heigth:h = 200, title} = options;

alert(title); //Menu
alert(w); // 100
alert(h); // 200

4.나머지 패턴 '...'

나머지 패턴을 사용하면 해열에서 했던 것처럼 나머지 프로퍼티를 어딘가에 할당하는게 가능

let options = {
	titles: 'Menu',
  	height: 200,
  	width: 100
}
let {title, ...rest} = options;
alert(rest.height); // 200
alert(rest.width); // 100

5. 중첩 구조 분해

객체나 배열이 다른 객체나 배열을 포함하는 경우

let options = {
	size: {
    	width: 100,
      	height: 200
    },
  	items: ['cake','donut',
    extra: true
}
let {
	size: {
    	width,
      	height
    },
  	items: [item1, item2],
  	title = 'Menu'
} = options;

alert(title); //Menu
alert(width); // 100
alert(height); // 200
alert(item1); //cake
alert(item2); //donut

6.똑똑한 함수 매개변수

function showMenu({title = 'Menu', width = 100, height = 200} = {}) {
	alert(`${title} ${width} ${height}`);
}
showMenu(); //Menu 100 200 

문제

let user = {
	name: 'John',
  	years: 30
};

• name프로퍼티의 값을 변수 name에 할당
• years 프로퍼티의 값을 변수 age에 할당
• isAdmin 프로퍼티의 값을 변수 isAdmin에 할당

let {name, years:age, idAdmin = false}

최대 급여 계산하기

let salaries = {
	'John': 100,
  	'Pete': 300,
  	'Mary': 250
}

fuction