배열의 구조분해 - 선언 시 중괄호{}, 대괄호[] 사용

구조 분해 관련해서 MDN을 보고 남긴다.

JS 소스들을 보면 선언부에 괄호를 사용한 소스들이 있다.

var [a,b] = [10,2,30,40];
var {c,d} = {c:40,d:60};

우선 대괄호는 배열의 인자값을 순서대로 가져 온다.

console.log(a)를 실행하면 10이 a에 할당된것을 알수 있다. b는 2이다. 

그리고 나머지 가져오기도 가능하고 기본값 지정 값을 버리는 것도 가능하다.

var [a,...b] = [10,2,3,5];
a는 10이고 b는 [2,3,5] 값을 가지는 배열이 된다.
나머지 가져오기 ... 사용할 경우 뒤에 ,이 있으면 에러가 나니 주의.

var [a,,b] = [1,2,3];
이렇게 버림도 가능하다 
a는 1 이고 b는 3이고 2는 버려진다.

var [a=4,b=5,c=6] = [1,2];
이렇게 하면 c는 할당되는 값이 없어서 기존할당한 6이 된다.
a는 1 이고 b는 2

함수에서 return한 배열도 사용이 가능

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

var a, b;
[a, b] = f();
a는 1 이고 b는 2

 

객체의 구조분해는 속성명이 달라지면 안된다.

var {c,d} = {c:40,d:60};
var {c,d} = {d:60,c:40};
var {c,d} = {d:60,cs:40,c:40};

다 같은 결과로 c는 40 d는 60을 가져 온다.
배열에서는 순서대로 가져왔는데 객체에서는 
속성값으로 가져오는것 같다.

var {c,d} = {dd:60,cc:40};
이렇게 하면 c와 d는 값이 할당이 되지 않는다.

아래 개시글에서 소괄호를 사용한 선언이 없는 구문에 대해 글을 남겼는데

var {c,d} = {c:40,d:60};

를 아래와 같이 사용 가능하다.

({c,d} = {c:40,d:60});

단 {c,d} = {c:40,d:60}; 이경우는 오류가 발생하니 주의

 

객체에서 속성이름이 다르면 인식이 안되는데 속성이름을 변경이 가능하다.

var {a: aa,b: bb}={a:40,b:50};

aa 에는 40 bb에는 50이 할당 된다.

기본값 할당이 가능하며 속성변경 같이 사용이 가능하다.

var {a = 10, b = 5} = {a: 3};
a는 3이고 b는 5
var {a: aa = 10, b: bb = 5} = {a: 3};
aa는 3이고 bb는 5

 

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN