<aside> 💡 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.[1]

</aside>

구조 분해 할당 - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

11-1. 배열 구조 분해 할당

구조 분해 할당 구문에서 배열의 속성을 해체하여 할당하는 배열 구조 분해 할당을 알아보자.

11-1-1. 이전의 배열 분해 할당 방법(ES5)

구조 분해 할당 구문이 없었던 ES5에서는 어떻게 배열을 분해해서 할당했는지 알아보자.

// 배열의 인덱스를 활용하여 요소에 접근하는 방법을 쓴다.
var categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열

// n개의 할당을 해주고자 하면, 가독성을 위해 n줄의 코드 작성이 필요하다.
var category1 = categories[0];
var category2 = categories[1];
var category3 = categories[2];

console.log(category1, category2, category3);
// IT life TIL

위의 코드는 지금도 사용함에 있어서 문법적인 오류가 없는 코드이다. 하지만 더 간결하고 빠르게 작성할 수 있는 구문이 있다면 좋을 것이다.

11-1-2. 배열 변수 할당하기

ES6에서는 배열의 요소들을 새로 선언한 다른 변수에 할당이 가능하다. 위에서는 3줄에 걸쳐 할당을 했었던 구문을 1줄로 처리가 가능해졌다.

const categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열

// 아래의 두 코드는 동일하게 작동한다.
const [category1, category2, category3] = ['IT', 'life', 'TIL'];
const [category1, category2, category3] = categories;

console.log(category1, category2, category3);
// IT life TIL

코드에서 알 수 있는 배열 구조 분해 할당의 기본적인 형태는 다음과 같다.