🤔 구조 분해 할당 구문

배열이나 객체의 속성을 해체한 값을 개별 변수에 담을 수 있게 하는 JS 표현식 이다.

✅ 기본 변수 할당

//숫자 1,2,3,4,5를 요소로 가지는 배열 x
var x = [1,2,3,4,5];

구조분해 할당은 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

var [y,z] = s;
console.log(y); //1
console.log(z); //2

❗️ 쉼표를 사용하여 요소를 무시할 수 있다.

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

console.log( title );//Consul

❗️ 변수에 배열의 나머지를 할당

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
console.log(b.length); //2
console.log(b[0]); //2
console.log(b[1]); //3

❗️ 기본값

✨할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지 않는다. 할당할 값이 없으면 undefined로 취급되기 때문
✨ = 을 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 기본값을 설정 할 수 있다.

var [x, y] = [];

console.log(x); // undefined
console.log(y); // undefined

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

✅ 선언에서 분리한 할당

//변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있다.
var a, b;

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

✅ 변수 값 교환하기

//구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요(low level 언어에서 봄)
var a = 1;
var b = 3;

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

✅ 함수가 반환한 배열 분해

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

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

✅ 객체 분해

let {var1, var2} = {var1:…, var2:…}

할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티를 넣는다

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

✅ 중첩 구조 분해

객체나 배열이 다른 객체나 배열을 포함하는 경우, 중첩 배열이나 객체의 정보를 추출할 수 있다.

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"

✅ 함수 매개변수로 전달된 객체에서 해체하기

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

//user 객체로부터 id,displayName,firstName을 해체해 출력한다.
console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"