[JavaScript] 구조 분해 할당 [...] {...} 비구조화 할당 문법이란? 예시 / 자바스크립트

JavaScript [...] {...} 구조 분해 할당 , 비구조화 할당 문법 이란? 

- 배열 or 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javascript 표현식

- Perl & Python 등 다른 언어가 가지고 있는 기능이기도 함 

 

 

 

예제 1 

[a,b,...rest] = [10,20,30,40,50,60];  //a = 10 , b = 20 , rest => 나머지가 배열로 들어감 

console.log(a);   // 10   number로 return 
console.log(b);   // 20  number로 return 
console.log(rest);   // [30,40,50,60] //배열로 return  

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

console.log(A) // [10,20,30,40,50,60]
console.log(A[0])  //10

 

 

 

 

 

 

예제 2

({a,b} = {a:10, b:20});   // ( ) 전체 감싸는 괄호 필수 
console.log(a); //10 
console.log(b); //20 */

console.log('-----------------');

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

{a,b} = {a:1, b:2}     X -> 에러 발생ㅇ

{a,b} 좌변이 객체 리터럴이 아닌 블록으로 간주되기 때문 

 

({a,b} = {a:1,b:2})    O  -> OKAY  이는  

= let {a,b} = {a:1, b:2} 와 같음 

 

 

 

 

 

 

 

예제 3 

let x = [1,2,3,4,5];

let [a,b] = x;

console.log(a) // 1
console.log(b) // 2 

할당문의 좌변부터 사용하며 원래 변수에서 어떤 값을 분해해 할당할지 정의 

 

 

 

 

예제 4 : 기본 변수 할당

let foo = ['one', 'two', 'three'];

let [a,b,c] = foo;

console.log(a,b,c) // 'one' 'two' 'three'

- c 제외시켜봄 

let foo = ['one', 'two', 'three'];

let [a,b] = foo;

console.log(a,b) // 'one' 'two' 

 

 

 

 

예제 5 : 선언에서 분리한 할당

let a,b;

[a,b] = [1,2];

console.log(a); //1
console.log(b) //2

- 기본값 : 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용 

let a,b;

[a=5, b=7] = [1];

console.log(a); //1
console.log(b); //7

 

 

 

 

 

예제 6 : 변수 값 교환하기 

let a = 1; 
let b = 3; 

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

console.log(a);  //3
console.log(b);   //1

 

 

 

 

예제 7 : 함수가 반환한 배열 분석

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

let a, b;
[a,b] = f();   -> f return = [1,2]    ===    [a,b] = [1,2]

console.log(a); //1
console.log(b); //2

 

 

 

 

예제 8 : 일부 반환 값 무시하기 

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

let [a, ,c] = f();
console.log(a); //1
console.log(c); //3

- 반환값 모두 무시하기

[,,] = f(); 

 

 

 

예제 9 : 나머지 구문 이용해 남은 부분을 하나의 변수에 할당 

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

let [a,...b,] = [1,2,3]; // 나머지 요소의 끝 오른쪽에 쉼표 있으면 에러처리 

 

 

 

예제 10 : 객체 구조 분해 

let obj = {p:53, q:true};
let {p,q} = obj;

console.log(p) // 53
console.log(q) // true

- 선언 없는 할당

let a,b;

({a,b} = {a:1, b:2})

console.log(a);  //1 
console.log(b);  //2

- 변수 이름 새로 짓기 

let obj = {p:53, q:true};
let {p:foo, q:bar} = obj;

//console.log(p);  //undefined  -> 오류 
//console.log(q);  //undefined  -> 오류 
console.log(obj.p);  //53
console.log(obj.q);  //true
console.log(foo);  //53
console.log(bar);  //true



let {p,q} = obj;

console.log(p);  -> 오류 x  
console.log(q);  -> 오류 x

- 기본값 갖는 새로운 이름의 변수에 할당하기

let {a:aa = 10 , b:bb = 5} = {a:3};

console.log(aa);  //3
console.log(bb);   //5