[모던 자바스크립트 Deep Dive] 36. 디스트럭처링 할당

36. 디스트럭처링 할당

• 디스트럭처링 할당 (구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 디스트럭팅(비구조화,구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다
• 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

 

36.1 배열 디스트럭처링 할당

var arr = [1,2,3];

var one = arr[0];
var two = arr[1];
var three = arr[2];

console.log(one,two,three);

 

• 배열 디스트릭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. => 순서대로 할당 됌
• 우변에 이터러블을 할당하지 않으면 에러발생

const [x,y];
const [a,b] = {}

• 선언과 할당 분리 가능, const 키워드는 변수 선언 할 수 없으므로 권장 하지 않음
• Rest 파라미터와 유사하게 Rest 요소를 사용할 수 있다
• Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야한다.

//Rest 요소
const [x, ...y] = [1,2,3];
console.log(x,y); //1[2.3]

 

36.2 객체 디스트럭처링 할당

• ES5 = 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.

var user = {firstName : 'Ungmo' , lastName: 'Lee'};

var firstName = user.firstName;
var lastName = user.lastName;

console.log(firstName,lastName); // Ungmo Lee

• ES6 = 
• 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당
• 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티 키다. 
• 순서는 의미가 없으며, 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

var user = {firstName : 'Ungmo' , lastName: 'Lee'};

//ES6 객체 디스트릭처링 할당
//변수 lastName, fristName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
//이ㄸ 프로퍼티키를 기준으로 디스트릭처링 할당이 이루어진다
const{lastName, firstName} = user;
console.log(firstName,lastName )

• 할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언해야한다. 변수를 객체 리터럴로 선언
• 우변에 객체 또는 표현식을 할당하지 않으며 에러발생
• 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

const {firstName = 'Ungmo' , lastName} = {lastName: 'Lee'};
console.log(firstName,lastName); // Ungmo Lee */
const {firstName : fn = 'Ungmo' , lastName: ln} = {lastName: 'Lee'};
console.log(fn,ln); // Ungmo Lee */

 

• 객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.
• 할당 혼용 가능 
• 객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ...을 사용할 수 있다.