DESTRUCTURING [구조분해할당]

DESTRUCTURING

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

Object Destructuring (객체 디스트럭처링)

객체 디스트럭처링은 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당한다.
이때 할당 기준은 키

// ES6 Destructuring
const obj = { firstName: 'Jone', lastName: 'Smith' };

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
// 변수 lastName, firstName가 선언되고 obj(initializer(초기화자))가 Destructuring(비구조화, 파괴)되어 할당된다.
const { first , lastName} = obj;
console.log(first, lastName); // Jone Smith

중첩형

const person = {
  name : "Jone",
  address : {
    zipcode : '12345',
    city : 'New York'
  }
};

const {address: {city}} = person;
console.log(city); //New York

변수명 변경

const settings = {
  color : {
    font_color : "blue"
  }
}

/*
const { color: { font_color: fontColor = "light" }} = settings;
console.log(fontColor);
*/

let fontColor = "red";
console.log(fontColor); // red

({color:{font_color : fontColor}} = settings);

console.log(fontColor); // blue

Array Destructuring (배열 디스트럭처링)

ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다.
이때 추출/할당 기준은 배열의 인덱스

const arr = [1, 2, 3];

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

function Destructuring

function saveInfo({alert, permit:{result}}) {
  console.log(alert);  // {valid: true, error: false, data: true}
  console.log(result); // true
}

saveInfo({
    alert: {
        valid : true,
        error : false,
        data : true
    },
    permit: {
        result : true
    }
});