자바스크립트 - 구조 분해 할당

구조 분해 할당

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

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

 

 

 

기본 변수 할당

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

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

 

 

 

선언에서 분리한 할당

var a, b;

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

 

 

 

기본값 할당

var a, b;

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

 

 

 

변수값 교환하기

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

 

 

 

일부 반환 값 무시하기

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]

 

 

 

정규 표현식과 일치하는 값 해체하기

function parseProtocol(url) {
  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

  var [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"

 

 

 

 

 

for of 반복문과 구조 분해

var 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 (var {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"

 

 

 

 

중첩된 객체 및 배열의 비구조화

const kim = {
  name: 'kim',
  age: 10,
  addr: 'kor',
  friends: [
    {name: 'joe', age: 20, addr:'usa'},
    {name: 'miko', age: 30, addr:'jp'}
  ]
};

var { name: userName, friends: [ ,{ name: jpFriend }] } = kim;
console.log(userName); // kim
console.log(jpFriend); // miko

 

 

 

 

{ .. } [ ... ] 문법

const option = require('../services/option');

cosnt control = { 
 start: option.start(),
}[menu];

// option.start를 실행
control(start);

 

 

 

 

Refference

구조 분해 할당 - JavaScript | MDN

 

자바스크립트 {...} [...] 문법 (비구조화 할당/구조분해 할당)