키를 가진 데이터 여러 개를 하나의 Entity에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용합니다.
가끔은 배열이나 객체의 데이터 일부가 필요한 경우도 있습니다.
이럴 때 구조 분해 할당을 사용하면 됩니다.
배열 분해
let arr = ["Bora", "Lee"]
let [firstName, surName] = arr;
console.log(firstName); // Bora 출력
console.log(surName); // Lee 출력분해는 파괴를 뜻하는 것이 아닙니다.
우선적으로 복사한 후 분해(destructurize)해준다는 의미입니다.
쉼표를 사용한 요소 무시
// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert( title ); // Consul두 번째 요소는 생략되었지만, 세 번째 요소는 title이라는 변수에 할당된 것을 확인할 수 있습니다.
할당 연산자 좌측엔 뭐든지 올 수 있습니다.
할당 연산자 좌측엔 "할당할 수 있는(assignables)"것이라면 어떤 것이든 올 수 있습니다.
let user = {}
[user.name, user.surname] = "Bora Lee".split(' ');
console.log(user.name); // Bora.entries()로 반복하기
구조 분해를 조합하면 객체의 키와 값을 순회해 변수로 분해 할당할 수 있습니다.
let user = {
name: "John",
age: 30
};
for(let[key,value] of Object.entries(user)){
console.log(`${key}:${value}`);
}'...'을 통한 나머지 요소 가져오기
배열 앞쪽에 위치한 값 몇 개만 필요하고 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때 ... 점 세개를 붙인 매개변수 하나를 추가해 rest 요소를 가져올 수 있습니다.
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]
console.log(name1); // Julius 출력
console.log(name2); // Caesar 출력
console.log(rest[0]); // Consul 출력
console.log(rest[1]); // of the Roman Republic 출력
console.log(rest.length); // 2 출력rest는 나머지 배열 요소들이 저장된 새로운 배열이 됩니다. rest 대신에 다른 이름을 사용해도 됩니다. (...)은 나머지 배열 요소를 담기 위한 필수 요소입니다.
기본값
할당할 값이 없으면 undefined로 취급됩니다.
let [firstName, surName] = [];
console.log(firstName); // undefined
console.log(surName); // undefined= 을 이용해 할당할 값이 없을 때 기본으로 할당해 줄 값인 '기본값(default value)'를 설정할 수 있습니다.
ex)
let [name = "Guest", surName="Anonymous"] = ["Julius"];
console.log(name); // Julius 출력
console.log(surName); // Anonymous 출력 (기본값)객체 분해하기
구조 분해 할당을 통해 객체도 분해할 수 있습니다.
기본 문법도 같습니다.
분해하려는 객체 프로퍼티의 키 목록을 패턴으로 사용하면 됩니다.
let options = {
title: "Menu",
width: 100,
height: 200
};
let {title, width, height} = options;
console.log(title); // Menu 출력
console.log(width); // 100 출력
console.log(height); // 200 출력객체를 구조 분해 할당 할 경우, 순서가 중요한 게 아닙니다. 객체의 키 값이 중요합니다.
객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 저장할 수 있습니다. 콜론(:)을 사용하면 원하는 키로 변경할 수 있습니다.
ex)
let options = {
title: "Menu",
width: 100,
height: 200
};
let {width: w, height: h, title} = options;
console.log(title); // Menu
console.log(w); // 100
console.log(h); // 200콜론을 통해 키 변수를 적용 할 수 있습니다. title은 기본값을 유지했기 때문에 title에 저장됩니다.
프로퍼티가 없는 경우를 대비하여 = 을 사용해 기본값을 설정하는 것도 가능합니다.
let options = {
title: "Menu"
};
let {width = 100, height = 200, title} = options;
console.log(title); // Menu 출력
console.log(width); // 100 출력
console.log(height); // 200 출력프로퍼티가 많은 복잡한 객체에서 원하는 정보만 뽑아오는 것도 가능합니다.
let options = {
title: "Menu",
width: 100,
height: 200
};
let {title} = options;
console.log(title);나머지 패턴 '...'도 사용 가능합니다.
배열에서 했던 것처럼 나머지 프로퍼티를 어딘가에 할당하는 게 가능합니다.
let options = {
title: "Menu",
height: 200,
width: 100
};
let {title, ...rest} = options;
console.log(rest.height); // 200 출력
console.log(rest.width); // 100 출력중첩 구조 분해
객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있습니다. 이를 중첩 구조 분해(nested destructuring)라고 부릅니다.
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요약
- 구조 분해 할당을 사용하면 객체가 배열을 변수로 연결할 수 있습니다.
