모던 자바스크립트 - Destructuring(구조 분해) With 배열

Destructuring(구조 분해) ES2015

배열과 객체는 여러 값을 담는 데 유용하며, 이를 분해하는 문법

배열과 객체는 구조가 다르므로, Destructuring 문법도 적용 방법이 다르다.

배열 - 인덱스로 여러 값의 순서가 있음

객체 - 프로퍼티 네임으로 여러 값의 이름이 있음

---

Destructuring(구조 분해) - 배열

코드 설명 : 등수에 따라 상품을 나누기 위해, 상품 이름으로 만든 변수에 배열의 요소를 순서대로 할당

const rank = ['효준','재하','수민','상훈'];

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

 

처음부터 상품이름에 멤버 이름을 할당해도 되지만, 배열의 인덱스를 사용하면, 요소들의 순서가 변경되어도 자연스럽게 값이 할당되는 유연성을 가진다. 이런 상황에서 Destructuring을 사용할 수 있다.

 

할당 연산자 왼쪽에 변수 이름들을 배열의 형태로 선언하고, rank 배열 자체를 할당

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

 

동작 방식 : 배열을 분해해서 요소들을 순서대로 변수 이름에 할당

주의 : 할당되는 값이 배열 형식이 아니거나 아무것도 할당하지 않으면 오류 발생 

---

더 알아보기

1. 변수의 갯수와 배열의 길이는 같지 않아도 된다.

변수에 할당되는 요소는 인덱스에 따라 순서대로 할당되기 때문에, 길이가 넘치는 요소는 어느 변수에도 할당되지 않는다. 따라서 배열의 요소 순서나 할당받을 변수들의 순서를 잘 정리해야 한다.

const rank = ['효준','재하','수민','상훈']

const [macbook, ipad, airpods] = rank;

 

2. 할당할 배열의 길이 > 변수의 수 - 할당받지 못한 변수는 undefined값 할당

함수의 파라미터와 비슷하게 기본값을 작성해서. undefined 값이 할당될 때 대신 기본값이 할당된다.

const rank = ['수민','상훈','길동'];

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

 

3. 가장 마지막 변수 앞에 ...을 붙여 주면, 함수의 Rest파라미터처럼 앞 쪽에 있는 변수의 순서대로 요소를 할당하고, 나머지 요소들을 마지막 변수에 배열로 할당할 수 있다.

const rank = ['효준','재하','수민','상훈','길동'];

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

4. 변수에 할당된 값을 서로 교환할 때도 활용

let macbook = '수민';
let ipad = '상훈';

[macbook, ipad] = [ipad, macbook];

//배열의 Destructuring문법 사용하지 않고 교환
let temp = macbook  //임시로 담아둘 변수
macbook = ipad;
ipad = temp

동작 방식 - 할당연산자처럼 오른쪽의 ipad값이 macbook에 할당, 오른쪽의 macbook값이 ipad에 할당