[JSInfo] 구조 분해 할당

키를 가진 데이터 여러 개를 하나의 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

요약

• 구조 분해 할당을 사용하면 객체가 배열을 변수로 연결할 수 있습니다.