[JavaScript] 구조 분해 Destructuring (배열)

[Destructuring 문법]

 

배열과 같이 내부에 여러가지 값을 갖고있는 데이터 타입을 다룰 때, 배열의 요소나 객체의 프로퍼티 값을 개별적인 변수에 할당해 다룰 수 있는 문법

 

const rank = ['철수', '짱구', '훈이', '맹구'] // 배열

const macbook = rank[0];
const ipad = rank[1];
const airpods = rank[2];
const coupon = rank[3];

console.log(macbook); // 철수
console.log(ipad); // 짱구
console.log(airpods); // 훈이
console.log(coupon); // 맹구

 

상품 이름으로 만든 변수에 배열의 요소를 순서대로 할당하면, 랭크 순위가 변동되어도 자연스럽게 배열의 순서에 따라 값이 할당 됨.

 

const rank = ['짱구', '철수', '훈이', '맹구'] // 배열

const macbook = rank[0];
const ipad = rank[1];
const airpods = rank[2];
const coupon = rank[3];

console.log(macbook); // 짱구
console.log(ipad); // 철수
console.log(airpods); // 훈이
console.log(coupon); // 맹구

 

Destructuring 문법을 사용하면 다음과 같이 나타낼 수 있는데,

 

const rank = ['짱구', '철수', '훈이', '맹구'] // 배열

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

console.log(macbook); // 짱구
console.log(ipad); // 철수
console.log(airpods); // 훈이
console.log(coupon); // 맹구

 

변수의 이름들이 배열의 형태로 선언되어 있고, 랭크 배열 자체를 할당하여 배열들이 순서대로 할당 하는 원리로, 할당되는 오른쪽 값은 항상 배열의 형식이어야 함.

 

 

const rank = ['짱구', '철수', '훈이', '맹구', '유리'] // 배열

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

console.log(macbook); // 짱구
console.log(ipad); // 철수
console.log(airpods); // 훈이
console.log(coupon); // 맹구

 

배열의 길이가 길면 순서대로 할당되며, 넘치는 요소는 할당되지 않음.

 

 

const rank = ['짱구', '철수', '훈이', '맹구', '유리'] // 배열

const [macbook, ipad, airpods, ...coupon] = rank;

console.log(macbook); // 짱구
console.log(ipad); // 철수
console.log(airpods); // 훈이
console.log(coupon); // [ '맹구', '유리' ]

 

마지막 변수를 rest parameter 처럼 사용하면 앞쪽에 있는 변수의 순서대로 요소를 할당하고, 남은 요소들은 배열의 형태로 마지막 변수에 할당 됨. 이는 항상 마지막 변수에만 사용할 수 있음.

 

 

const rank = ['짱구', '철수', '훈이'] // 배열

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

console.log(macbook); // 짱구
console.log(ipad); // 철수
console.log(airpods); // 훈이
console.log(coupon); // undefined

 

배열의 길이가 선언된 변수의 개수보다 적으면, 할당되지 않은 변수에는 undefined 가 출력됨. 또한, rest parameter 처럼 사용할 경우에  할당되지 않은 변수에는 [] 빈 배열이 출력됨.

 

 

const rank = ['짱구', '철수', '훈이'] // 배열

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

console.log(macbook); // 짱구
console.log(ipad); // 철수
console.log(airpods); // 훈이
console.log(coupon); // 없음

 

이처럼 undefind가 출력되기 전에 기본값을 설정하면, 기본값으로 출력됨.

 

---

[변수에 담긴 값 교환]

 

let snack = '짱구';
let book = '철수';

console.log('snack 당첨자:', snack); // snack 당첨자: 짱구
console.log('book 당첨자:', book); // book 당첨자: 철수

let temp = snack;
snack = book;
book = temp;

console.log('snack 당첨자:', snack); // snack 당첨자: 철수
console.log('book 당첨자:', book); // book 당첨자: 짱구

 

기존에는 변수에 담긴 값을 교환하려면 임시저장소인 temp 변수를 만들어 할당하는 방식을 이용함.

 

 

let snack = '짱구';
let book = '철수';

console.log('snack 당첨자:', snack); // snack 당첨자: 짱구
console.log('book 당첨자:', book); // book 당첨자: 철수

[snack, book] = [book, snack];

console.log('snack 당첨자:', snack); // snack 당첨자: 철수
console.log('book 당첨자:', book); // book 당첨자: 짱구

 

Destructuring 문법을 이용하면 간단하게 두 변수에 할당된 값을 교환할 수 있음.