구조 분해 할당(Destructing assginment) - JavaScript

구조 분해 할당(Destructing assginment)

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

let x = [1, 2, 3, 4, 5];
//일반적인 객체 및 배열 리터럴 표현식

let [y, z] = x;
//구조 분해 할당은 위와 비슷하지만 할당문의 좌변에서 사용해서 
//원래 변수에서 어떤 값을 분해해 할당할지 정한다.
//y는 x에 할당된 배열의 첫 번째 요소로 정의된다.
//z는 x에 할당된 배열의 두 번째 요소로 정의된다.

console.log(y); // 1
console.log(z); // 2

 

 

배열 구조 분해 할당

 

변수의 선언이 분리되어도 구조 분해 할당으로 값을 할당할 수 있다.

let a, b;

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

 

변수에 기본값을 할당해 사용할 수도 있다.

let a, b;

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

 

변수를 교체할 때 구조 분해 할당으로 편리하게 교체할 수 있다.

let a = 1;
let b = 3;

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

 

함수가 반환한 배열도 편리하게 분석할 수 있다.

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

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

 

일부 반환값을 무시할 수 있다.

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

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

//혹은 전부 무시할 수도 있다.
[,,] = f();

 

Rest 파라미터를 사용할 수 있다.

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

//단 마지막에 ,가 나오면 SyntaxError가 발생한다.
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

 

 

객체 구조 분해 할당

 

객체로부터 속성을 해체하여 객체의 원래 속성명과는 새로운 이름의 변수에 할당할 수 있다.

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

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

 

객체로부터 해체된 값이 undefined인 경우, 변수에 기본값을 할당할 수 있다.

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

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

 

새로운 이름의 변수에 할당하기와 기본값 할당하기를 동시에 할 수도 있다.

let {a: aa = 10, b: bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5

 

중첩된 객체 및 배열의 구조 분해

let 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"
};

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

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

 

for of 반복문과 구조 분해

let people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (let {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

 

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

//user 객체로부터 id, displayName 및 firstName을 해체해 출력한다고 할 때
function userId({id}) {
  return id;
}

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

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

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

 

계산된 속성 이름과 구조 분해

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

 

객체 구조 분해에서 Rest

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10 
b; // 20 
rest; // { c: 30, d: 40 } Rest 파라미터는 객체로 리턴된다는 것을 주의

 

속성 이름이 유효한 JavaScript 식별자명이 아닌 경우

const foo = { 'fizz-buzz': true };
const { 'fizz-buzz': fizzBuzz } = foo;

console.log(fizzBuzz); // "true"

 

 

참고 MDN

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

구조 분해 할당