JavaScript - 디스트럭처 (구조 분해 할당)

디스트럭처링은 배열, 객체에서 사용 가능한 자바스크립트 문법이다. 

 

배열 혹은 객체 내부의 값을 변수에 쉽게 할당 가능하다.

 

1. 배열 

 

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

 

 

디스트럭처링 할당을 위한 변수에 디폴트값을 지정할 수도 있다.

 

const arr = [1, 2];
 
const [one, two, four = 4] = arr;
 
console.log(one, two, four); // 1 2 4
 

 

2. 객체

 

할당 기준은 '프로퍼티 키' 이다.

 

'프로퍼티 키'로 '프로퍼티 값'을 할당 받는 것.

 

const user = { firstName: 'Elon', lastName: 'Musk' };
 
const { lastName, firstName } = user;
 
console.log(firstName, lastName); // Elon, musk
 

중괄호 내부의 프로퍼티 키 순서는 상관 없음.

 

프로퍼티 키가 아닌 다른 변수명으로 프로퍼티 값을 할당받고 싶으면 아래와 같이 할 수 있다.

 

 

const user = { firstName: 'Elon', lastName: 'Musk' };
 
const { lastName: ln, firstName: fn} = user;
 
console.log(fn, ln); // Elon, musk