2019-07-13 es6(3) - destructuring

디스트럭처링은 구조화된 배열 또는 객체를 비구조화하여 개별 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당하거나 반환할 때 유용하다.

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

// ES6 using destructuring
const arr = [1, 2, 3];

// 배열의 인덱스를 기준으로 배열로부터 요소를 추출하여 변수에 할당
const [one, two, three] = arr;
// 디스트럭처링을 사용할 때는 반드시 초기화하고 할당해야한다.
// const [one, two, three]; // Error.
console.log(one, two, three);

// Ex2
const arr = [1,2,3,4,5,6];
const [one, two, three, ...rest] = arr;
console.log(one, two, three);
console.log(rest);
// result
1 2 3
[4,5,6]

디스트럭처링은 할당 기준은 배열의 인덱스이다.

let x, y, z;

[x, y] = [1, 2];
console.log(x, y);

[x, y] = [1];
console.log(x, y);

[x, , z] = [1, 2, 3];
console.log(x, y, z);

// using default value
[x, y, z=3] = [1, 2];
console.log(x, y, z);

[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z);

// spread operator
[x, ...y] = [1, 2, 3];
console.log(x, y);
//result
1 2
1 undefined
1 undefined 3
1 2 3
1 2 3
1 [ 2, 3 ]

//Date Ex
const today = new Date();
const formattedDate = today.toISOString().substring(0, 10);
const [year, month, day] = formattedDate.split("-");
console.log(year, month, day);
//2019 07 10

객체 디스트럭처링

ES5에서 객체의 각 프로퍼티를 객체로부터 비구조화하여 변수에 할당하기 위해서는 프로퍼티의 이름(키)를 사용해야 했다.

var obj = { firstName : "KIM", lastName : "jaeyeon" }

var firstName = obj.firstName;
var lastName = obj.lastName;
console.log(firstName, lastName);

// ES6 Destructuring

const obj = { firstName: 'KIm', lastName: 'jimmy'};

const {lastName, firstName} = obj;
console.log(firstName, lastName);

객체 비구조화는 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당한다. 이때 기준은 프로퍼티(키)이다.

const { prop1, prop2 } = { prop1: 'a', prop2: 'b'};
console.log(prop1, prop2);
console.log({prop1, prop2});
//result
a b
{ prop1: 'a', prop2: 'b' }

// 중첩일경우
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 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"

정규표현식의 exec()는 일치하는 부분을 찾으면 정규식과 일치하는 부분 전체를 배열로 반환한다.

for of반복문과 구조분해

const 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}`);

//result
Name : Mike Smith, father Harry Smith
Name : Tom Jones, father Richard Jones

Written on July 13, 2019