배열 분해

const arr = [1, 2, 3];
const [x, y, z] = arr;
console.log(x, y, z); // 1 2 3
console.log(arr); // [1, 2, 3]

위 코드에서 신기한 문법이 보인다. 변수를 배열처럼 선언하는 부분인데, 저할당은 자동으로 배열 순서대로 각 변수이름에 해당 원소를 순서대로 할당하는 것이다. 이러한 할당 방법은 구조화 할당이라고 한다. 이때 원래배열은 영향이 없습니다. 그냥 압축을 풀듯이 순서대로 변수를 할당할 뿐입니다.

const testObj = {
  arr: [1, 2, 3],
};

const [first, , third] = testObj.arr;
console.log(first, third); // 1 3

구조화 할당은 이렇게 순서를 뛰어넘는 표현이 가능하다. 굳이 순서대로 모든 변수를 생성하지 않아도 저렇게 순서를 뛰어 넘어서 배열의 구조화 할당이 가능하다.

swap 구조화

// 기존방식
let [a, b] = [1, 2];
console.log(a, b); // 1, 2
const temp = a;// 임시변수를 이용해서 swap을 처리했다.
a = b;
b = temp;
console.log(a, b); // 2, 1

→

// 기존방식
let [a, b] = [1, 2];
console.log(a, b); // 1, 2
[a, b] = [b, a]; // 한줄로 끝나버린다.
console.log(a, b); // 2, 1

이중 구조화 할당

const arr = [1, 2, [3, 4]];
const [one, , [, four]] = arr;
console.log(one, four);

위 코드와 같은 형태로

함수값을 여러개 반환받을때

const testObj = {
  arr: [1, 2, 3],
  testFunc: function (start, end) {
    return [this.arr[start], this.arr[end]];
  },
};

const [start, end] = testObj.testFunc(0, testObj.arr.length - 1);
console.log(start, end);// 1 3

함수가 여러개의 변수를 배열로 반환해서 구조화 할당으로 변수를 할당 할수 있다.

❗️ 구조화 할당의 변수가 할당될 배열의 값보다 많다면 undefined가 할당된다. 비단 함수반환일때 뿐만 아니라 모든 일반적인 경우에도 그렇다.

const testObj = {
  arr: [1, 2, 3],
  testFunc: function (start, end) {
    return [this.arr[start], this.arr[end]];
  },
};
const [start, ,end] = testObj.testFunc(0, testObj.arr.length - 1);
console.log(start, end);// 1 undefined

구조화 할당시 값 기본 값 선언

상단의 undefined 할당을 예방하기 위해서 기본값을 넣는 구조화 할당이 있다.

const arr = [1, 2];
const [one = 1, two = 1, three = 1] = arr;
console.log(one, two, three); // 1 2 1

원래 three 값에는 undefined 값이 할당되었어야 하지만 할당시 바로 = 1이라는 기본값을 넣어줬기 때문에 위코드와 같이 undefined 할당을 예방할 수 있다. 이러한 예방법은 실제 API에서 값을 가져올때 유용할 수 있다.