1. 구조 분해 할당이란?

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조입니다.
키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용합니다.
개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 합니다.
이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment)을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘합니다.

2. 표현법

const arr = ["구조", "분해", "할당"];
let [ a, b, c ] = arr;
// a = "구조"
// b = "분해"
// c = "할당"

let [ d, e ] = arr;
// d = "구조"
// e = "분해"

쉽게 첫 번째 변수에 배열 첫 번째가 값이 들어가고 두 번째 변수에 배열 두 번째 값이 들어간다고 생각하면 될 것 같습니다.

====================================================================
쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있습니다.

// 두 번째 요소는 필요하지 않을 때
let [f, , g] = ["구조", "분해", "할당", "이다"];

// f = "구조"
// g = "할당"

두 번째 요소는 생략되었지만, 세 번째 요소는 g이라는 변수에 할당된 것을 확인할 수 있습니다. 할당할 변수가 없기 때문에 네 번째 요소 역시 생략 되었습니다.

====================================================================
배열뿐만 아니라 모든 이터러블(iterable, 반복 가능한 객체)에 구조 분해 할당을 적용할 수 있습니다.

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

====================================================================
할당 연산자 좌측엔 ‘할당할 수 있는(assignables)’ 것이라면 어떤 것이든 올 수 있습니다.

아래와 같이 객체 프로퍼티도 가능합니다.

let user = {};
[user.lastName, user.firstName] = "DongHun Kim".split(' ');

// user.lastName = DongHun

====================================================================
두 변수에 저장된 값을 교환할 때 구조 분해 할당을 사용할 수 있습니다.

let first = "first";
let second = "second";

// 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함
[first, second] = [second, first];

// first = "second"
// second = "first"

====================================================================

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

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있습니다. 이럴 때는 점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있습니다.

let [name1, name2, ...rest] = ["짱구", "철수", "훈이", "영희", "맹구"];

// name1 = "짱구"
// name2 = "철수"

// `rest`는 배열입니다.
// rest[0] = "훈이"
// rest[1] = "영희"
// rest[2] = "맹구"
// rest.length = 3

rest는 나머지 배열 요소들이 저장된 새로운 배열이 됩니다. rest 대신에 다른 이름을 사용해도 되는데, 변수 앞의 점 세 개(...)와 변수가 가장 마지막에 위치해야 한다는 점은 지켜주시기 바랍니다.