31. Array Destructuring (구조 분해 할당, 비구조화)

안녕하세요. 박기린 입니다.

이번에는 배열 구조를 뜯어서 각 배열 요소를 다른 변수에 저장하는 방식인 'Destructuring'에 대해 알아보겟습니다.

 

Array Destructuring

Destructuring은 ES6에 추가된 기능입니다. Array(배열)이나 Object(객체)에서 별도의 변수로 값을 푸는 방식을 말합니다.

그 중 배열을 Destructuring 하는 방법에 대해 알아보겠습니다.

 

 

1. 일반적인 배열 요소 접근 방식

const arr = [2, 3, 4];
const a = arr[0]; // 2
const b = arr[1]; // 3
const c = arr[2]; // 4

일반적으로는 배열에 [대괄호]를 붙인 후 index 넘버를 사용해서 배열 요소에 접근합니다.

그래서 각 요소를 다른 변수에 저장하고자 한다면, 일일이 index 넘버를 지정해주고 옮겨줘야 했습니다.

만약 배열 요소가 엄청 많고, 그 요소들을 다른 변수에 저장하고자 한다면, 엄청 코드가 길어질 것입니다.

 

2. destruturing

const arr = [2, 3, 4];
const [x, y, z] = arr; // array를 한 번에 분해 
console.log(x, y, z); // 2, 3, 4
console.log(arr); // [2, 3, 4] 원본 array 변수는 파괴되지 않는다.

destructuring은 이 과정을 한 줄로 끝냅니다.

 

const/let/var [배열의 요소들을 담고자 하는 변수 리스트] = 배열의 변수명 (포인터);

destructuring은 위의 형태로 나타납니다.

- '배열의 요소들을 담고자 하는 변수 리스트'는 먼저 선언된 순서대로 배열의 0번 요소부터 담깁니다.

- destructuring 된다고 해서 원본 배열이 삭제되거나 변경되지는 않습니다.

- 만약 '배열의 요소들을 담고자 하는 변수 리스트'가 배열의 요소 개수보다 많다면, 여분의 변수에는 undefined가 담깁니다.

 

- 반대로 '배열의 요소들을 담고자 하는 변수 리스트'가 배열의 요소 개수보다 적다면, 그냥 넘어갑니다.

 

- 순서대로 변수를 담는 게 아니라 skip 하고 싶다면 공란으로 두면 됩니다.

const [first, , second] = [1, 3, 2];
console.log(first, second); // 1, 2

 

---

Array destructuring을 이용해서 두 변수 간의 값을 쉽게 바꾸기

let main = 'second';
let second = 'main';

이렇게 두 변수가 있다고 가정을 합니다.

second에 'second', main에 'main'을 서로 바꿔서 넣어주고 싶습니다.

 

1. 기존의 방식

const temp = main;
main = second;
second = temp;

temp(temporary)와 같은 중간 연결 변수를 사용해서, 두 변수 간의 값을 바꿔줍니다.

코드 줄이 3줄이 됩니다.

 

2. Array destructuring 사용해서 바꾸기

[main, second] = [second, main];

이렇게 하면 한 줄의 코드로 변수 간의 값을 바꿔줄 수 있습니다.

 

---

중첩된 Array destructuring

const nested = [3, 4, [5, 6]];

const [i, ,j] = nested;
console.log(i, j); // 3, [5, 6]

nested처럼 중첩된 Array일 경우, destructuring을 진행해도 중첩된 Array는 여전히 Array 형태로 남아있습니다.

하지만 이것 또한 전부 destructuring 할 수 있습니다.

 

 

const nested = [3, 4, [5, 6]];

const [i, , [j, k]] = nested;
console.log(i, j, k); // 3, 5, 6

바로 destructuring 내부에 한 번 더 destructuring을 해줍니다. 중첩 Array처럼 [대괄호]를 또 중첩해서 작성합니다.

 

---

Default Value

const [p = 1, q = 1, r = 1] = [8, 9];
console.log(p, q, r); // 8, 9, 1

Array의 길이를 모르는 경우를 대비해서, 해당 값이 Array 안에 없을 경우를 대비해서 undefined 대신 Default Value (기본값)을 미리 지정해줄 수 있습니다.

destructuring 대괄호 안에 할당 연산자(=)로 기본값을 지정해줍니다.