[JS] 배열 비구조화 할당

배열 비구조화 할당은 배열의 요소를 효과적으로 처리하는 javascript의 ES6 문법이다.

기본형

const num = [10,20,30];

// 배열 비구조화 할당
const [one,two,three] = num;

console.log(one); // 10
console.log(two); // 20
console.log(three); // 30

one two three에 각각 순차적으로 10 20 30이 들어간다.

예외사항

const num = [10,20];

// 배열 비구조화 할당
const [one,two,three] = num;

console.log(one); // 10
console.log(two); // 20
console.log(three); // undefined

• 배열의 크기가 작아 선언받지 못한 변수는 undefined가 된다.
• 이러한 경우, 활용 2의 초기값 설정을 통해 초기값을 지정해줄 수 있다.

활용

1. 값 대입 건너뛰기

• , ,을 통해 값 해당 위치에 해당하는 값을 건너뛸 수 있다.

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

const [one, , ,four] = num;

console.log(one); // 1
console.log(four); // 4

2. 초기값 설정

• 배열의 요소가 없는 경우 초기값을 설정해줄 수 있다.

const fruits = [apple, banana];

const [red, yellow, purple = "grape"] = fruits;

console.log(red); // apple
console.log(yellow); // banana
console.log(purple); // grape

3. 나머지 요소 할당

• ...를 통해 나머지 요소들을 하나의 요소에 전부 할당할 수 있다.

const animals = [rabbit, bear, tiger, lion];

const [herbivore, ...carnivore] = animals;

console.log(herbivore); // rabbit
console.log(carnivore); // [bear, tiger, lion]

4. 배열아이템 교체

let arr = [1, 2, 3, 4];

// arr의 0번째와 2번째 데이터를 교환
[arr[0], arr[2]] = [arr[2], arr[0]];

console.log(arr);  // [3, 2, 1, 4]