배열 디스트럭처링 할당 (구조분해할당)

디스트럭처링 할당(구조분해할당) : 
구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당함을 의미한다.

-> 배열과 같은 이터러블(반복되는 것) 또는 객체 리터럴(그냥 { }이렇게 객체 만드는 거)에서 필요한 값만 추출하여 변수에 할당할 때 유용

 

배열 디스트럭처링 할당

할당문의 우변은 이터러블이러야 하며, 할당 기준은 배열의 인덱스이다.

//ES5

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

//ES6

const arr = [1, 2, 3];
const [one, two, three] = arr;
// 변수 선언 = 배열

console.log(one, two, three); //1 2 3

 

특징 ( 1 )

변수의 개수와 이터러블의 요소 개수가 일치할 필요는 없다.

//이터러블과 변수의 개수가 일치하는 경우
const [a, b] = [1, 2]
console.log(a, b) // 1 2

//이터러블과 변수의 개수가 불일치하는 경우 - 1
const [c, d] = [1];
console.log(c, d); // 1 undefined

//이터러블과 변수의 개수가 불일치하는 경우 - 2
const [e, f] = [1, 2, 3]
console.log(e, f) // 1 2

 

특징 ( 2 )

배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

이때, 기본값보다 할당된 값이 우선시 된다.

//변수에 기본값을 설정하는 경우
const [a, b, c = 3] = [1, 2]
console.log(a, b, c) // 1 2 3

//기본값보다 할당된 값이 우선시 되는 경우
const [d, e = 8, f = 9] = [1, 2]
console.log(d, e, f) // 1 2 9

특징 ( 3 )

배열 디스트럭처링 할당을 위한 변수에 Rest 요소를 사용할 수 있다.

단, Rest 요소는 반드시 마지막에 위치해야 한다.

// Rest 요소 사용
const [x, ...y] = [1, 2, 3];
console.log(x, y) // 1 [2, 3]