자바스크립트의 배열은 여러 개의 원소를 하나의 변수에 담을 수 있는 강력한 데이터 구조입니다. 배열의 원소를 하나씩 접근하는 것 외에도, Destructuring(구조 분해) 문법을 사용하여 배열의 요소를 쉽게 분리할 수 있습니다. 이를 통해 배열의 값을 간편하게 할당하거나 다른 변수에 복사할 수 있습니다.

배열 요소 분리하기

Destructuring을 사용하여 배열의 요소를 분리하는 방법은 아래와 같습니다.

const arr = [1, 2, 3, 4, 5];

const [first, second, ...rest] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

위의 예제에서는 arr이라는 배열을 선언하고, const [first, second, ...rest] = arr 문법을 사용하여 배열의 요소를 분리했습니다. first 변수에는 배열의 첫 번째 요소인 1이 할당되고, second 변수에는 두 번째 요소인 2가 할당됩니다. 나머지 요소는 rest 변수에 배열 형태로 할당됩니다.

Destructuring의 다른 활용 방법

배열의 요소를 서로 교환하기

Destructuring을 사용하면 두 변수 간의 값을 간단하게 교환할 수 있습니다.

let a = 1;
let b = 2;

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

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

위의 예제에서는 a와 b 변수의 값을 서로 교환하기 위해 Destructuring을 사용했습니다. 배열 [b, a]를 [a, b]와 같이 분리하여 변수 간의 값을 교환할 수 있습니다.

기본값 설정하기

Destructuring을 사용하여 기본값을 설정할 수도 있습니다. 이 기능을 사용하면 배열의 요소가 undefined인 경우에 기본값을 사용할 수 있습니다.

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

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

위의 예제에서는 배열 arr에서 요소가 누락된 상태에서 Destructuring을 사용하여 second 변수에 기본값 2를 할당했습니다. 따라서 arr의 두 번째 요소가 undefined인 경우에는 second 변수에 기본값인 2가 할당됩니다.

마무리

Destructuring을 활용하여 자바스크립트에서 배열의 요소를 간편하게 분리할 수 있습니다. 위의 예제들을 참고하여 해당 문법을 익히고, 코드를 더욱 간결하고 가독성 있게 작성해보세요. #자바스크립트 #배열분리