디스트럭처링(Destructuring)

비구조화 할당이란

• 디스트럭처링은 비구조화 할당/구조분해 할당 이라고도 한다.
• 배열[]이나 객체{}의 값을 개별로 변수에 담을 수 있게하는 표현식(expression)

기본문법(배열)

[a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(a1); // 1
console.log(a2); // 2
console.log(a1,a2); // 1 2
console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9]
console.log([a1,a2,rest_a]); // [1, 2, Array(7)]

//전개 연산자 이후 변수 입력 / 다른 속성일 경우 에러 발생
//[a1, a2, ...rest_a, a3] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // error
//[a1, a2, ...rest_a] = {a1 : 10, a2: 20}; // error

 

기본문법(객체)

let {b1, b2, ...rest_b } = { b1 : 10, b2 : 20, b3 : 30, b4 : 40 };
console.log(b1); // 10
console.log(b2); // 20
console.log(b1,b2); // 10 20
console.log(rest_b); // { a3: 30, a4: 40 }
console.log([b1,b2,rest_b]); // [10, 20, {…}]
console.log({b1,b2,rest_b}); // {b1: 10, b2: 20, rest_b: {…}}

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

var { c1 : name, c2 : animal , ...rest_c } = { c1 : '코코', c2 : 'dog', c3 : 30, c4 : 40 };
console.log(name); // 원빈!
console.log(animal); // dog
console.log(rest_c); // {c3: 30, c4: 40}

1. 우항의 key값에 변수명으로 사용 불가능한 문자열이 있을경우(비구조화)

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

• 다만 이 경우에는 'an-apple'과 매칭할 변수명(an_apple)을 작성하지 않으면 에러가 발생

1. 변수 선언(var / let / const)이 없을 경우 괄호를 사용해야된다. (비구조화 주의점)

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

 

기본값 할당

[a, b] = [10];
console.log(a); // 10
console.log(b); // undefined

var {c, d} = { c : 20};
console.log(c); // 20
console.log(d); // undefined

• 비구조화의 범위를 벗어나는 값 할당을 시도하면 undefined를 반환

[a=10, b=20] = [10];
console.log(a); // 10
console.log(b); // 20

var {c = 30, d : new_name = 40} = { };
console.log(c); // 30
console.log(new_name); // 40

• 이런 경우를 방어하기 위해 호출될 변수명들에 기본값 할당을 할 수 있다.

 

복사

let arr = [1,2,3];
let copy1 = arr;
let [...copy2] = arr;
let 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 ]

• 전개 연산자를 사용하여 배열, 객체의 깊은 복사를 할 수 있다.
• 얕은 복사인 copy1은 arr을 참조하기 때문에 0번 요소가 변경
• 전개 연산자를 사용한 copy2, copy3는 깊은 복사가 된 것을 볼 수 있다.

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 }

• 객체 역시 전개 연산자로 깊은 복사를 사용 가능(복사와 함께 새로운 값을 할당 가능)
• ...prevState를 사용하여 기존 객체를 복사함과 동시에 age키에 새로운 값(23)을 할당할 수 있다

 

함수에서의 사용

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

• 함수의 파라미터 부분에서도 비구조화 할당을 사용
• 이러한 문법은 특히 API 응답 값을 처리하는데에 유용하게 사용

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

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

• 마찬가지로 map함수의 파라미터에도 바로 사용 가능

 

for of 문

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

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

• 배열 내 객체들은 for of 문을 사용하여 비구조화 가능

 

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

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

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

kim.friends.map(function({name, age, addr}){
    console.log(name);
});
//joe1
//joe2
//joe3
//joe4
//miko

 

 

마무리

React를 하면서 복사 부분을 사용해봐서 이해는 가는데 2가지 잘 모르는 부분은 찾아볼 예정이다.

1. for of 문 (사용을 안해봤다) - 해보고 정리 해보자
2. 얕은 복사 / 깊은 복사(처음 들어본다) - 찾아보고 정리하자

 

 

 

 

 

참고 사이트

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

 

[JavaScript] 비구조화(구조분해) 할당