JS, 구조분해할당

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS표현식이다.

배열 구조 분해

rest문법을 이용하여 배열의 나머지를 변수에 할당하기

rest문법은 파라미터 개수가 가변적일때 파라미터를 배열의 형태로 받아서 사용할 수 있다.

let a,b, rest;

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

console.log(a) // 10
console.log(b) // 20

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

console.log(rest) /// [30,40,50]

구조 분해 할당을 이용하면 쉽게 데이터 뭉치를 만들 수 있다.

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

자바스크립트는 매개변수가 초과되면 오류가 나지 않고 매치되지 않는 값을 무시한다.

 

변수값 교환하기

let a = 1

let b = 3;

[a,b] = [b,a];

console.log(a) // 3;

console.log(b) // 1;

함수가 반환한 배열 분석

function func(){
    return [1,2]
    }

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

일부 반환 값 무시하기

function func(){
    return [1,2,3];
    }
let [a, ,b] = func();
console.log(a) // 1
console.log(b) // 3

객체 구조 분해

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

console.log(p); // 42
console.log(q); // true

선언 없는 할당
구조 분해 할당을 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있다.

let a,b;
({a,x} = {a:1,b:2});
console.log(a) // 1
console.log(x) // undefined

새로운 변수 이름으로 할당하기

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

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

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

let {a:aa=10,b:bb=5} = {a:3}
console.log(aa) // 3
console.log(bb) // 5

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

let matadata = {  
title : "Scratachpad"  
translations : \[  
{  
locale : 'de',  
localization : \[ \],  
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); // 'Scratachpad'  
console.log(localeTitle); // 'JavaScript-Umgebung'