구조분해 할당

비구조화 할당(Destructuring assignment)이라고도 표현되며 Template Literals과 더불어 ES6에서 추가된 문법 중 하나이다.
https://webclub.tistory.com/651
위의 블로그를 참고해보니 해체 할당이라고도 표현한다고 하는데 나에게는 구조분해 할당/ 비구조화 할당 보다

해체 하였다가 해체 했던 것을 모두 할당 한다는 의미 를 가진 해체 할당이 이해하기 쉬웠다.

디테일한 구조와 정의는

MDN에 나와 있으나,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

아직 MDN만 보고는 이해가 잘 되지 않기 때문에 수업 때 배운 내용과 여러 사이트들에서 참고한 정보를 바탕으로 기본적인 내용만 정리해보고 여러가지로 활용해보는 건 이 후 좀 더 제대로 파악된 후 이어 작성해보도록 하겠다.

구조분해 할당은 배열과 객체 모두 적용시킬 수 있는데,

우선 배열에서의 구조분해 할당에 관해 정리해보자면,

몇가지 주의해야될 사항이 있는데, 객체와 달리 배열에는 각 데이터의 위치를 지정해주는 값이 없어서 각 index의 위치가 매우 중요하다.
즉 구조분해 할당을 해줄 때 순서가 매우 중요해진다.

const arr = ['aaa', 'bbb', 'ccc'];
const [aaa, bbb, ccc] = pupil;

console.log(aaa);
console.log(bbb);
console.log(ccc);

"aaa"
"bbb"
"ccc"

다음은 객체에서의 구조분해 할당에 대해 정리해보겠다.

구조 분해를 사용하여 일부 값만 추출하여 지정된 변수에 넣을 수 있다.
즉, 배열을 구조분해 할당 할 때 처럼
객체 또한 구조분해 할당을 통해 더 간결하게 개별 변수로 선언이 가능하다.

const { name, age, school} = object;

console.log(name); // 이름
console.log(school); // 학교

const { name, age: level, school } = object;
//  이런 식으로 객체 내에 기존에 만들어 줬던 key 값을 
새로 선언 해줄 수도 있다.

아직 확실히 활용할 수 있는 문법이 아니기 때문에 자주 연습해서 익숙해지도록 해야겠다.