구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
in ES5
ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같다.
var arr = [1, 2, 3];
var one = arr[0];
var two = arr[1];
var three = arr[2];
console.log(one, two, three); // 1 2 3
in ES6
ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이 때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 즉 순서대로 할당된다.
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3
배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다. 이 때 변수를 배열 리터럴 형태([ ... ])로 선언한다.
배열 디스트럭처링 할당의 기준은 배열의 인덱스라서 순서대로 할당된다. 이 때 변수의 개수와 이터러블의 요소 개수(우변의 요소 개수)가 반드시 일치할 필요는 없다.
'Language > Javascript' 카테고리의 다른 글
[JS] 단축 평가 (0) | 2023.02.10 |
---|