JS 디스트럭처링 할당

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

배열 디스트럭처링 할당

ES5 디스트럭처링 할당

ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하기 위해서는 아래와 같다.

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

ES6의 배열 디스트럭처링 할당

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

• 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다.
• 할당 기준은 배열의 인덱스이다. (순서대로 할당됨)
• 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당 받을 변수를 선언해야 한다. 이때 여러 개의 변수를 배열 리터럴 형태로 선언한다.
• 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.
• 배열 디스트럭처링 할당은 배열에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.
• 배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소(Rest element) …을 사용할 수 있다. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 한다.

Date 객체에서 년도, 월, 일을 추출하는 예제

const today = new Date();
// Mon Sep 16 2019 02:03:42 GMT+0900 (한국 표준시)
const formattedDate = today.toISOString().substring(0, 10);
// "2019-09-15"

// 문자열을 분리하여 배열로 변환한 후
// 배열 디스트럭처링 할당을 통해 필요한 요소를 취득한다.
const [year, month, day] = formattedDate.split('-');
console.log([year, month, day]); // ['2019', '09', '15']

객체 디스트럭처링 할당

ES5 디스트럭처링 할당

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

// ES5
var user = { firstName: 'Minjee', lastName: 'Kim' };
var firstName = user.firstName;
var lastName  = user.lastName;
console.log(firstName, lastName); // Minjee Kim

ES6의 객체 디스트럭처링 할당

const user = { firstName: 'Minjee', lastName: 'Kim' };
const { lastName, firstName } = user;
console.log(firstName, lastName); // Minjee Kim

• 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
• 할당 연산자 왼쪽에 값을 할당 받을 변수를 선언해야 한다.
• 여러 개의 변수를 객체 리터럴 형태로 선언한다. 순서는 의미가 없으며 변수 이름과 프로퍼티 키가 일치하면 할당된다.
• 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받으려면 아래와 같이 변수를 선언한다.

  const user = { firstName: 'Minjee', lastName: 'Kim' };
  const { lastName: ln, firstName: fn } = user;
  console.log(fn, ln); // Minjee Kim

• 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.
• 프로퍼티 키로 객체에서 필요한 프로퍼티 값만을 추출할 수 있다.
• 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.
• 보다 간단하고 가독성 좋게 표현이 가능하다.
• 배열의 요소가 객체인 경우, 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.
• 객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 프로퍼티 …을 사용할 수 있다. Rest 프로퍼티는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 한다.

---

REFERENCE
https://poiemaweb.com