구조 분해 (Destructuring) - 배열

구조 분해 (Destructuring)

배열과 객체는 여러 개의 값을 다룰 때 유용하게 활용된다. ES2015에 등장한 배열과 객체를 다룰 때 사용할 수 있는 유용한 문법

배열의 구조 분해

배열을 유연하게 사용하는 방법

기존 방식

const rank = ['효준', '유나', '민환', '재하'];

// 처음부터 이름에 할당할 수 있지만 등수가 바뀔 수도 있는 경우를 고려한 방법
const macbook = rank[0];    // 효준
const ipad = rank[1];       // 유나
const airpotds = ranks[2];  // 민환
const coupon = rank[3];     // 재하

구조 분해 방식

할당연산자 왼편에 변수의 이름들이 배열의 형태로 선언 되어있고 배열자체를 할당한 방식이다.
배열의 형태로한 각각의 변수들에 할당한 배열의 요소들이 순서대로 할당되는 원리로 동작한다.
배열을 할당하지 않거나 아무것도 할당하지 않으면 오류가 발생한다.

const rank = ['효준', '유나', '민환', '재하'];

// Destructuring, 
const [macbook, ipad, airpotds, coupon] = rank;

console.log(macbook);    // 효준
console.log(ipad);       // 유나
console.log(airpotds);   // 민환
console.log(coupon);     // 재하

배열의 길이가 꼭 같지 않아도 상관없다. 인덱스의 순서대로 할당된다.
또한 rest parameter를 이용하면 남은 나머지 요소들을 모두 할당한다. 항상 마지막 변수에만 활용할 수 있다.

const rank = ['효준', '유나', '민환', '재하', '규식'];

// rest parameter
const [macbook, ipad, airpotds, ...coupon] = rank;

console.log(macbook);    // 효준
console.log(ipad);       // 유나
console.log(airpotds);   // 민환
console.log(coupon);     // ['재하', '규식']

할당되는 배열이 길이가 더 짧을 때는 undefined가 할당된다.

const rank = ['효준', '유나', '민환'];

const [macbook, ipad, airpotds, coupon] = rank;

console.log(macbook);    // 효준
console.log(ipad);       // 유나
console.log(airpotds);   // 민환
console.log(coupon);     // undefined

함수의 파라미터와 같이 기본값을 할당할 수도 있다.

const rank = ['효준', '유나', '민환'];

const [macbook, ipad, airpotds, coupon = '없음'] = rank;

console.log(macbook);    // 효준
console.log(ipad);       // 유나
console.log(airpotds);   // 민환
console.log(coupon);     // 없음

변수의 할당된 값을 교환할 때

기존 방식

let macbook = '효준';
let ipad = '유나';

console.log('MacBook 당첨자:', macbook);   // MacBook 당첨자: 효준
console.log('iPad 당첨자:', ipad);         // iPad 당첨자: 유나

let temp = macbook;
macbook = ipad;
ipad = temp;

console.log('MacBook 당첨자:', macbook);   // MacBook 당첨자: 유나
console.log('iPad 당첨자:', ipad);         // iPad 당첨자: 효준

구조 분해 방식

let macbook = '효준';
let ipad = '유나';

console.log('MacBook 당첨자:', macbook);   // MacBook 당첨자: 효준
console.log('iPad 당첨자:', ipad);         // iPad 당첨자: 유나

// Destructuring
[macbook, ipad] = [ipad, macbook];

console.log('MacBook 당첨자:', macbook);   // MacBook 당첨자: 유나
console.log('iPad 당첨자:', ipad);         // iPad 당첨자: 효준