순회에 필요한 메서드

• keys(),values(),entries()를 사용할 수 있는 자료구조

• Map
• Set
• Array
  👉 일반 객체에도 순회 관련 메서드가 있지만 keys(),values(),entries()와는 문법에 차이가 있음

일반 객체에 사용할 수 있는 메서드

• Object.keys(obj) : 객체의 key만 담은 배열을 반환
• Object.values(obj) : 객체의 value만 담은 배열을 반환
• Object.entries(obj) : [key, value]쌍을 담은 배열을 반환

구조 분해 할당 (destructuring assignment)

• 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 > 객체나 배열을 변수로 분해할 수 있게 해준다

배열 분해하기

let arr = ['Jinju', 'Baek']

let [firstName, lastName] = arr;

alert(firstName); // Jinju
alert(lastName); // Baek

인덱스를 이용하지 않고도 변수로 이름과 성을 사용할 수 있다

쉼표 사용해서 요소 무시하기

// 두 번째 요소는 필요하지 않음
let [a, ,c] = ['One', 'Two', 'Three', 'Four'];

alert(c); // Three

• 두 번째 요소는 생략되고 세 번째 요소는 c라는 변수에 할당
• 네 번째 요소는 할당할 변수가 없으므로 생략

할당 연산자 우측에는 모든 iterable 사용 가능

let [a, b, c] = 'abc'; // ["a","b","c"]
let [one, two, three] = new Set([1, 2, 3]);

• 배열 뿐만 아니라 모든 iterable에 구조 분해 할당 적용 가능

할당 연산자 좌측엔 모두 가능

let user = {};

[user.name, user.surname] = 'Jinju Baek'.split(' ');

alert(user.name); // Jinju

• 할당 연산자 좌측엔 assignables 이라면 어떤 것이든 올 수 있다
• 위처럼 객체 프로퍼티도 가능

.entries()로 반복하기

let user = {
	name: 'Jinju',
  	age: 26
};

// 객체의 key value 순회하기
for (let [key, value] of Object.entries(user)) {
	alert(`${key}:${value}`); // name:Jinju, age:26 차례로 출력
}

// 맵에도 메서드 활용가능

let user = new Map();
user.set('name', 'Jinju');
user.set('age', '26');

for(let[key, value] of user) {
	alert(`${key}:${value}`); // name:Jinju, then age:26
}

변수 교환 트릭

let guest = 'Jane';
let admin = 'Pete';

[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane

'...'로 나머지 요소 가져오기

let [name1, name2, ...rest] = ['p1', 'p2', 'p3', 'p4'];

alert(name1); // p1
alert(name2); // p2

// rest는 배열이다
alert(rest[0]); // p3
alert(rest[1]); // p4
alert(rest.length); // 2

• 배열 앞 쪽에 위치한 값 몇 개만 필요하고 나머지 이어지는 값은 모아서 저장하고 싶을 때
• 변수 앞의 점 세 개(...)와 변수가 가장 마지막에 위치해야 한다

기본값

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지 않음

// 디폴트 값
let [name = 'Guest', surname = 'Anonymous'] = ['Jinju'];

alert(name); // Jinju
alert(surname);	// Anonymous

=을 이용하면 할당할 값이 없을 때 디폴트 값을 정해줄 수 있다

let [surname = prompt('성을 입력하세요.'), name = prompt('이름을 입력하세요.')] = ['백'];

alert(surname); // 백 (배열에서 받아온 값)
alert(name); // prompt에서 받아온 값

객체 분해하기

구조 분해 할당으로 객체도 분해할 수 있다

let {var1, var2} = {var1: ..., var2: ...}

좌측에는 상응하는 객체 프로퍼티의 패턴을 넣고 우측엔 분해하고자 하는 객체를 넣는다

let options = {
	title: 'Menu',
  	width: 100,
  	height: 200
};

let {title, width, height} = options;

alert(title); // Menu
alert(width); // 100
alert(height); // 200

// 위의 코드와 아래 코드는 같다

// let {...} 안의 순서가 바뀌어도 동일하게 동작함
let {height, width, title} = { title: 'Menu', height: 200, width: 100 }

순서는 중요하지 않다

• 할당 연산자 좌측에는 더 복잡한 패턴이 올 수 있다
• 분해하려는 객체의 프로퍼티와 변수의 연결을 원하는 대로 조정가능

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

let options = {
	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
}

👉 콜론은 '분해하려는 객체의 프로퍼티: 목표 변수'와 같은 형태로 사용

중첩 구조 분해 (nested destructuring)

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

let options = {
	size: {
    	width: 100,
      	height: 200
    },
  	items: ['Sleep', 'Cigarette'],
  	extra: true          
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
	size: { // 사이즈는 이곳에
    	width,
      	height
    },
  	items: [item1, item2], // items는 이곳에 할당
  	title = 'Menu' // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값 사용
}= options;

alert(title); // Menu
alert(width); // 100
alert(height); // 200
alert(item1); // Sleep
alert(item2); // Cigarette