구조 분해 할당 문법

구조 분해 할당을 사용해 배열이나 객체를 각각의 변수로 분해하여 연결할 수 있음

let nameArr = ["Gildong", "hong"];

// let firstName = nameArr[0];
// let lastName = nameArr[1];
let [firstName, lastName] = nameArr;

console.log(firstName);
console.log(lastName);

해당 예시에서는 nameArr 배열 선언 후 해당 배열의 인덱스 값에 접근하여 값을 추출하는 방식이 기존의 방식이었으면 구조 분해 할당 문법은 변수 선언 시 배열 형태로 선언하여 nameArr 배열을 각각 변수로 분해하여 값을 담았다.

< 쉼표를 활용하여 필요하지 않은 배열 요소를 버릴 수 있다 >

let [firstName3, , lastName3] = ['firstName', 'middleName', 'lastName'];

console.log(firstName3); // firstName
console.log(lastName3);  // lastName

다양한 사용법

1. 객체의 프로퍼티에도 값을 담을 수 있다.
   • 객체의 프로퍼티 뿐 아니라 대입할 수 있는 대상이면 좌측은 상관 없음

let user = {};
[user.firstName, user.lastName] = "Gwansoon Yu".split(" ");

console.log(user.firstName); // Gwansoon
console.log(user.lastName);  // Yu
console.log(user);           // { firstName: 'Gwansoon', lastName: 'Yu' }

1. 나머지 요소를 한번에 가져오기(rest parameter)

let [sign1, sign2, ...rest] 
           = ["양자리", "황소자리", "쌍둥이자리", "게자리", "사자자리"];

console.log(sign1); // 양자리
console.log(sign2); // 황소자리
console.log(rest);  // [ '쌍둥이자리', '게자리', '사자자리' ]

• 받는 변수에 전개 문법을 사용하여 나머지 값들을 한번에 받아올 수 있음

1. 변수 교환 용도로도 사용할 수 있다.
2. 기본 값을 설정하고 사용 할 수 있다.