[자바스크립트] 배열 구조 분해

구조 분해 할당

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 한다.
• 대괄호를 사용한다.
• 나머지 연산자 (...) 를 사용해서 남은 요소들을 배열로 할당 할 수 있다.
• 다차원 배열도 가능하다.

const [num1, num2, num3, num4] = [1, 2, 3, 4];
console.log({ num1, num2, num3, num4 });
// 출력: {num1: 1, num2: 2, num3: 3, num4: 4}

const [num1, num2] = [1, 2, 3, 4];
console.log({ num1, num2 });
// 출력 : {num1: 1, num2: 2}

 

- 처음 예제와 다르게 배열 요소만큼 변수를 선언하지 않으면, 앞에서부터 차례대로 할당된다.

 

const [num1, ...rest] = [1, 2, 3, 4];
console.log({ num1, rest });
// 출력: { num1: 1, rest: [2, 3, 4]}

- 위의 예제처럼 나머지 연산자를 사용하여, 남은 요소들을 배열로 할당 할 수 있다. 

- 나머지 연산자는 맨 뒤에서 선언해야한다.

 

const [[num1, num2], [[num3, num4], [num5, num6]]] = [[1, 2], [[3, 4], [5, 6]]];
console.log({ num1, num2, num3, num4, num5, num6 });
// 출력: {num1: 1, num2: 2, num3: 3, num4: 4, num5: 5, num6: 6}