[JavaScript] 디스트럭처링(Destructuring) 구조 분해 문법

 디스트럭처링이란?

 

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

 

배열 구조 분해

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

var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

객체 구조 분해

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

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

 

 디스트럭처링 예제 코드

 

function fetchData() { // 함수 선언
  return {
    data: {
      name: 'ian',
      age: 30
    },
    config: {},
    statusText: '',
    headers: {}
  }
}

var result = fetchData(); // 함수를 호출하여 result에 담는다
result.data // result의 data 접근 {name: "ian", age: 30}

 

디스트럭처링 문법을 이용하면 값에 한 번에 접근할 수 있다.

// 객체안의 속성들을 하나하나 꺼내서 접근
var { data } = fetchData();
data // {name: "ian", age: 20}

 

다른 이름으로 바꾸려면 :를 이용한다.

var { data: info } = fetchData();
info // {name: "ian", age: 20}