배열의 비 구조화 할당(destructuring assignment)은
배열이나 객체에서 값을 추출하여 변수에 쉽게 할당하는 방법으로
배열의 요소를 개별 변수로 쉽게 추출할 수 있게 해주는 자바스크립트의 문법입니다.

이 문법을 사용하면 배열의 특정 요소를 간편하게 변수에 할당할 수 있습니다.

비구조화 할당의 기본 원리

• 비구조화 할당의 기본 원리

배열이나 객체의 구조를 분해하여 개별 변수에 할당하는 문법입니다.
배열의 경우, 대괄호 [ ]를 사용하여 각 요소를 변수에 순서대로 할당합니다.

• 기본 값 설정

비구조화 할당을 할 때, 특정 요소가 없거나 undefined일 경우 사용할 기본 값을 설정할 수 있습니다.
예를 들어, second 변수의 경우 배열 arr에 두 번째 요소가 없으므로 undefined가 됩니다. 하지만 기본 값 2가 설정되어 있기 때문에 second의 값은 2가 됩니다.

1. 기본적인 사용법

// 배열 선언
const arr = [1, 2, 3, 4, 5];

// 비 구조화 할당을 사용하여 배열의 첫 두 요소를 추출
const [first, second] = arr;

console.log(first); // 1
console.log(second); // 2

여기서 first 변수에는 배열의 첫 번째 요소인 1이
second 변수에는 두 번째 요소인 2가 할당됩니다.

2. 기본 값 할당

const arr = [1];
const [first, second = 2] = arr;

console.log(first); // 1
console.log(second); // 2 (기본 값)

비 구조화 할당을 할 때 기본 값을 설정할 수 있습니다.
배열에 해당 인덱스의 값이 없을 경우 기본 값이 사용됩니다.

3. 중첩 배열 비 구조화

onst arr = [1, [2, 3], 4];
const [first, [second, third], fourth] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4

배열 안에 배열이 있는 경우 중첩 구조도 비 구조화 할당할 수 있습니다.

4. 값 교환

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

비 구조화 할당을 사용하여 두 변수의 값을 쉽게 교환할 수 있습니다.

이처럼 배열 비 구조화 할당은 배열의 요소를 간편하게 추출하고
변수에 할당하는 매우 유용한 문법입니다.
이를 통해 코드의 가독성과 간결성을 높일 수 있습니다.

응용 예제

배열의 모든 요소에 기본 값 설정

const arr2 = [];
const [a = 1, b = 2, c = 3] = arr2;

console.log(a); // 1 (기본 값)
console.log(b); // 2 (기본 값)
console.log(c); // 3 (기본 값)

객체 비구조화 할당과 기본 값 설정

const obj = { name: 'Alice' };
const { name, age = 25 } = obj;

console.log(name); // Alice
console.log(age); // 25 (기본 값)

비구조화 할당은 코드를 간결하고 가독성 좋게 만드는 데 매우 유용합니다.
배열이나 객체에서 값을 추출하여 변수에 할당할 때, 기본 값을 설정할 수 있는 기능을 활용하면 더 안전하고 직관적인 코드를 작성할 수 있습니다.