구조분해할당 (배열,객체 분해하기)

전개연산자(배열합치기)와 반대되는 구조분해할당 이라고 생각하시면 이해가 쉬울겁니다

 

구조분해할당은 배열과 객체를 분리 할수 있습니다

배열 분리

 

하나씩 보겠습니다

str배열 안에 3개의 배열이 담겨 있습니다

[a,b] 는 str배열을 받는데 str의 첫번째 배열은 a가 되고 2번째 배열은 b가 담기게 되는 구조입니다

str의 'ccc'는 [a,b]의 세번째 배열을 받겠다는 선언이 없기 때문에 받아올 수 없게 됩니다

 

건너띄기

str의 2번째 배열을 건너띄고 싶으면 공백, 로 적으면 다음의 배열을 가져오게 됩니다

 

 

응용

위와 달라진 점이 있다면 str배열에 'ddd'가 추가되었고 받아오는 변수 안에 ...remain 이라는 변수가 추가되었습니다

전개연산자의 ... 를 활용하여 3번째 배열 부터 remain이라는 변수에 전부 들어가게 됩니다

 

객체분리

배열 분리와 같은 방식입니다

조금 다른 점은 받아올 객체의 키값과 받아올 객체이름이 일치해야 합니다

 

*jsbin때문에 let을 사용하였습니다

*플러그인이 있다면 let을 빼고 사용하셔도 됩니다

 

 

 

객체분리 응용

어렵지 않습니다

신경써야 할 부분은 객체 안에 배열 객체를 받아오는 방법 입니다

하나하나 내려가면 바로 이해 할수 있습니다

= data 를 사용하여 data객체를 주입시켜주고 

arr안의 title을 가져오고 싶다면 선언문과 똑같이 풀어쓰면 됩니다

다른 점은 title : 가져올 새로운 이름 으로 사용해 주셔야 합니다