구조 분해 할당은 말 그대로 배열이나 객체를 분해하여 배열의 특정한 원소나 객체의 특정한 자체 속성을 추출해서 변수에 저장할 수 있도록 한다.
이는 전개 구문과 유사하다고 생각할 수 있지만,
전개 구문은 모든 원소와 자체 속성을 가져와서 새 배열이나 객체 또는 함수에 전달하는 반면,
Destructuring은 특정 배열의 원소나 객체의 자체 속성을 가져와서 변수에 저장한다는 차이점이 있다.

배열 구조 분해 할당

아래의 코드는 배열을 새로 생성하는 것 처럼 보이지만 변수 a와 b에 “Hellow”와 “world!”를 각각 할당한다.

[a, b] = ["Hello", "world!"]; // 출력 시 -> 각각 Hello와 world!로 출력됨

앞서 살펴봤던 전개 구문 또한 구조 분해 할당에서 사용할 수 있는데, 각각의 배열 원소나 객체 자체 속성을 변수에 할당한 후, 남은 데이터들이 있다면 전개 구문을 통해 모두 한 곳에 저장할 수 있다.

여기서 주의할 점은 항상 구조 분해 패턴 마지막에 사용되어야 한다.

let num1, num2, spread;, 

[num1, num2, ...spread] = [1, 2, 3, 4, 5];

console.log(num1) // 1
console.log(num2) // 2
console.log(spread) // [3, 4, 5]

그렇지 않으면 아래 오류가 나타난다.

💡 [ num1, ...spread, num2 ] = [ 1, 2, 3, 4, 5 ];

---

객체 구조 분해 할당

할당 연산자 왼쪽에서 중괄호를 사용하여 자체 속성 이름을 사용하여 자체 속성을 대상으로 지정하는 구문

({ name } = { name: "choi", age: 24 });

console.log(name); // choi
console.log(age); // Error : age is not defined

객체 구조 분해 할당 시 주의할 점은 왼쪽에 선언되는 변수 명은 참조하고자하는 객체 내에 존재하는 자체 속성 이름으로 선언해야 한다.

💡 MDN, 구조 분해 할당 #선언 없는 할당
참고: 할당 문을 둘러싼 ( .. )는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다.
{a, b} = {a:1, b:2}는 유효한 독립 구문이 아닙니다. 좌변의 {a, b}이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다.
하지만, ({a, b} = {a:1, b:2})는 유효한데, var {a, b} = {a:1, b:2}와 같습니다.
( .. ) 표현식 앞에는 세미콜론이 있어야 합니다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 수 있습니다.

---

결론

배열이나 객체에서 특정 원소나 특정 속성을 추출하기 편리함