[자바스크립트 필기] #20 - 디스트럭처링 할당

 

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 

 

디스트럭처링 할당은 배열이나 이터러블 객체등을 비구조화해서 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 간단히 말해서 배열의 요소나 객체의 프로퍼티 값같은걸 다른 변수에 저장하는 것이다. 

 

1. 배열 디스트럭처링 할당 

const arr = [1, 2, 3];

// ES5 
var one = arr[0];
var two = arr[1];
var three = arr[2];
console.log(one, two, three); // 1 2 3 

// ES6 배열 디스트럭처링 할당
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3

ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출해 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(우변)은 이터러블이어야 하며, 순서대로 할당된다. 

배열 디스트럭처링 할당을 위해서 왼쪽에 할당받을 변수를 선언해야하는데 이때 변수를 저렇게 배열 리터럴 형태로 선언한다. 

 

2. 객체 디스트럭처링 할당

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

//ES6 객체 디스트럭처링 할당 
const { lastName, firstName } = user;
console.log(firstName, lastName); // Ungmo Lee

객체의 경우도 비슷한데 할당 기준이 순서대로가 아니라 프로퍼티 키이다. 따라서 선언한 변수 이름과 프로퍼티 키 이름이 일치해야 할당된다. 

 

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!