ES6문법 | 구조분해할당 (Destructure Assignment)

구조 분해 할당(Destructuring Assignment) 구문은 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 

var foo = ["one", "two", "three"];

var [one, two, three] = foo;


console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

 

---

배열 구조 분해

 

변수에 기본 값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용한다. (객체도 동일)

var a, b;

[a=5, b=7] = [1];


console.log(a); // 1
console.log(b); // 7

 

 

 

필요하지 않은 반환 값을 무시할 수도 있다.

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();


console.log(a); // 1
console.log(b); // 3

 

 

 

배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다.  (객체도 동일)

var [a, ...b] = [1, 2, 3];

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

---

객체 구조 분해

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

 

** 참고

변수 선언과 분리해서 객체 리터럴 비구조화 할당을 할수는 없다. 그리하려면 괄호를 사용해야 함.

// 잘못된 예
{a, b} = {a:1, b:2}

//올바른 예
var a, b;

({a, b} = {a: 1, b: 2});

 

 

 

새로운 변수 이름으로 할당하기

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

** ex) 함수 컴포넌트에서 component 인자를 받아오고 활용할 때 대문자로 시작하는 'Component' 로 써야 한다면,

function App({component:Component}){
  return(
    <Component />
  )
}

 

 

 

변수에 기본 값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용한다. (배열도 동일)

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

 

 

 

rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모은다.

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}

a; // 10
b; // 20
rest; // { c: 30, d: 40 }

 

 

 

*참고문헌 - MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

 

 

---

배열 디스트럭쳐 간편 정리

 

let x, y, z;


/* Basic */
[x, y] = [1, 2];
console.log(x, y); // 1 2


/* 배열의 개수 - 적은 경우 */
[x, y] = [1];
console.log(x, y); // 1 undefined


/* 배열의 개수 - 더 많은 경우 */
[x, y] = [1, 2, 3];
console.log(x, y); // 1 2


// 기본값
[x, y, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3


/* 재할당 */
[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3


/* spread 문법 */
[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

---

디스트럭쳐링 사용 예시

 

** ES6의 배열 디스트럭처링은 배열에서 필요한 요소만 추출하여 변수에 할당하고 싶은 경우에 유용하다.

아래의 코드는 Date 객체에서 년도, 월, 일을 추출하는 예제이다.

const today = new Date(); // Tue May 21 2019 22:19:42 GMT+0900 (한국 표준시)
const formattedDate = today.toISOString().substring(0, 10); // "2019-05-21"
const [year, month, day] = formattedDate.split('-');
console.log([year, month, day]); // [ '2019', '05', '21' ]

 

객체 디스트럭쳐링 예시

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

 

 

 

 

** 참고

 

객체 디스트럭쳐링

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

 

poiemaweb.com/es6-destructuring