Record

개념

비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)
배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법

기본 문법 (배열)

좌항이 호출될 변수명 집합, 우항이 할당할 값 입니다.
좌항의 각 요소에는 같은 index를 가지는 배열값이 할당됩니다.
또한 전개 연산자( … )를 사용하여 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용할 수 있습니다.

    const [d1, d2, ...rest_d] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(a1);    // 1
    console.log(a2);    // 2
    console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9]
    console.log(rest_a[0]); // 3
    console.log(rest_a[1]); // 4

함수가 반환한 배열 분석

구조 분해를 사용하면 반환된 배열에 대한 작업을 더 간결하게 수행할 수 있습니다.

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

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

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

정규 표현식의 exec() 메서드는 일치하는 부분를 찾으면 그 문자열에서 정규식과 일치하는 부분 전체를 배열의 맨 앞에, 그리고 그 뒤에 정규식에서 괄호로 묶인 각 그룹과 일치하는 부분을 포함하는 배열을 반환합니다. 구조 분해 할당은 필요하지 않은 경우 일치하는 전체 부분은 무시하고 필요한 부분만 쉽게 빼올 수 있습니다.

    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"

기본 문법 (객체)

객체의 경우에는 우항의 key 값이 좌항의 변수명과 매칭됩니다.

    var { a1, a2, ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
    console.log(a1); // 10
    console.log(a2); // 20
    console.log(rest_a); // { a3: 30, a4: 40 }

원래의 key 값과 다른 이름의 변수를 사용하는 방법

    var { a1 : awesome_name, a2 : dumb , ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
    console.log(awesome_name); // 10
    console.log(dumb); // 20

우항의 key값에 변수명으로 사용 불가능한 문자열이 있을경우 아래와 같은 방식으로 비구조화 할 수 있습니다.

    var key = 'it is key';
    var { 'an-apple':an_apple, [key]:it_is_key } = { 'an-apple' : 10, 'it is key' : 20};
    console.log(an_apple); // 10
    console.log(it_is_key); // 20

객체 비구조화에서 주의해야 할 점은 변수 선언에 대한 명시(var, let, const)가 없을 경우 괄호를 사용하여 묶어주어야 한다

    ({ a, b } = { a : 10, b : 20});
    console.log(a); // 10
    console.log(b); // 20
    { c, d } = { c : 30, d : 40}; // error

복사

    var arr = [1,2,3];
    var copy1 = arr;
    var [...copy2] = arr;
    var copy3 = [...arr];

    arr[0] = 'String';
    console.log(arr); // [ 'String', 2, 3 ]
    console.log(copy1); // [ 'String', 2, 3 ]
    console.log(copy2); // [ 1, 2, 3 ]
    console.log(copy3); // [ 1, 2, 3 ]

…prevState를 사용하여 기존 객체를 복사함과 동시에 age키에 새로운 값(23)을 할당할 수 있습니다. 리액트의 props나 state처럼 이전 정보를 이용하는 경우 유용하게 사용할 수 있습니다.

    var prevState = {
        name: "yuddomack",
        birth: "1996-11-01",
        age: 22
    };

    var state = {
    ...prevState,
    age: 23
    };

    console.log(state); // { name: 'yuddomack', birth: '1996-11-01', age: 23 }

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

계산된 속성 이름(computed property name)은, 객체 리터럴과 비슷하게 구조 분해에도 사용될 수 있습니다.

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

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

함수에서의 사용

함수의 파라미터 부분에서도 비구조화 할당을 사용할 수 있습니다.

    function renderUser({name, age, addr}){
        console.log(name);
        console.log(age);
        console.log(addr);
    }

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

    users.map((user) => {
        renderUser(user);
    });

map함수의 파라미터에도 바로 사용할 수 있습니다.

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

    users.map(({name, age, addr}) => {
        console.log(name);
        console.log(age);
        console.log(addr);
    });

for of 문

배열 내 객체들은 for of 문을 사용하여 비구조화 할 수 있습니다.

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

    for(var {name : n, age : a} of users){
        console.log(n);
        console.log(a);
    }

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

중첩된 객체 및 배열 역시 비구조화 할 수 있습니다.

    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


    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"

Record

개념

기본 문법 (배열)

함수가 반환한 배열 분석

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

기본 문법 (객체)

복사

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

함수에서의 사용

for of 문

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

mamma1234