🔵 내용요약

디스트럭처링이란?

구조 분해 할당과 같은 말이다. 구조화된 배열과 같은 이터러블 또는 객체를 디스트럭처링(비구조화, 구조파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.

• 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

배열 디스트럭처링 할당

• 배열 디스트럭처링 할당의 대상은 (=우변) 이터러블이어야 하며 할당 기준은 배열의 인덱스이다.
• 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다.
  우변에 이터러블을 할당하지 않으면 에러가 발생한다.
  변수를 배열 리터럴 형태로 선언한다.

const arr = [1,2,3];

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

• 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.

const [a,b] = [1,2];
console.log(a,b) // 1 2

const [c,d] = [1];
console.log(c,d) //1 undefined 

const [e, f] = [1, 2, 3];
console.log(e, f)

const [g, ,h] = [1, 2, 3];
console.log(g, h); //1 3

• 변수에 기본값 설정 가능 하지만 기본값보다 할당된 값을 우선시 한다.

//기본값 
const [a, b, c = 3] = [1, 2];
const [e,f = 10, g = 3] = [1,2];

• 배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을때 유용하다.

• 배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소를 사용할수 있다.

  • Rest 요소는 반드시 마지막에 위치해야한다.

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

객체 디스트럭처링 할당

객체 디스트럭처링 할당 기준은 프로퍼티 키다. 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

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

const {lastName, firstName} = user;

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

🔵 느낀점

디스트럭처링은 ES6의 주요 문법 중 하나로, 모던 JavaScript 프로젝트에서 거의 필수적이다. 배열과 객체 데이터 처리에 유용하여 많은 데이터들을 다룰때 간결한 코드로 작성에 도움을 받을 수 있다.