Destructuring Assignment (구조분해할당)

구조분해할당이란 무엇일까.............?

일단 구조분해할당의 설명을 보자면 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다 라고 하는데 설명만 봐서는 무슨 말인지 이해가 잘되지 않는다.

그래서 일단 배열 구조분해할당의 예시를 보면서 생각해보자

const arr = ["짱구", "철수", "맹구"]

const name1 = arr[0]
const name2 = arr[1]
const name3 = arr[2]

console.log(name1,name2,name3) // '짱구' '철수' '맹구'

우리가 배열의 각 요소를 불러오려면 위의 코드처럼 변수에 배열의 인덱스를 이용해 하나씩 저장하여 사용했었다.

const arr = ["짱구", "철수", "맹구"]

const [name1,name2,name3] = arr

console.log(name1,name2,name3) // '짱구' '철수' '맹구'

하지만 ES6에서 구조분해할당이 나오게 되었고 간편하게 코드를 작성할 수 있게 되었다.
위의 코드를 보게되면 첫번째 코드에서 배열을 만들어 주었고 두번째 코드에서 배열의 인덱스를 기준으로 변수에 [ ] 안에 name1,name2,name3가 선언되었고 arr이 Destructuring(비구조화, 파괴)되어 할당되었다.
그래서 console.log(name1,name2,name3)을 찍어보게 되면 name1에는 순서대로 "짱구"가 name2에는 "철수"가 name3에는 "맹구"가 출력되는걸 볼 수 있다.

배열을 구조분해 할 때는 중요한점이 있는데
1. 이름이 꼭 name1,name2,name3일 필요가 없다. 배열의 인덱스대로 할당되기 때문에 내가 원하는 이름으로 지어줄 수 있다.
2. 배열의 인덱스대로 할당되기 때문에 순서가 매우 중요하다
내가 만약 "짱구"는 필요없고 "철수"와 "맹구"만 가져오고 싶다고
const [name2,name3] = arr 이라고 해버리면 "철수","맹구"를 가져오는게 아닌 배열의 인덱스 즉, 순서대로 "짱구","철수"를 가져온다.
그래서 저런식으로 작성하는게 아닌 const [,name1,name2] = arr처럼 앞을 비워주고 ,(콤마)를 작성해야한다.

다음으로 객체 구조분해할당을 알아보자

const obj = {
  name: "짱구",
  age: 7,
  school: "떡잎유치원"
}

const name = obj.name
const age = obj.age
const school = obj.school

console.log(name,age,school)

우리가 객체의 값을 가져오려면 위의 배열의 경우처럼 각각 변수에 저장하여 사용하였다.

하지만 객체도 배열과 마찬가지로 ES6이후 쉽게 변하였다.

const obj = {
  name: "짱구",
  age: 7,
  school: "떡잎유치원"
}

const {name, age, school} = obj

console.log(name,age,school)

배열과 비슷한데 { }안에 키 인 name, age, school이 선언되었고 obj가 Destructuring(비구조화, 파괴)되어 할당되었다.

객체구조분해도 배열과 마찬가지로 중요한 점이 있는데
1. 배열과 다르게 { }안에 이름을 내 맘대로 짓는게 아닌 내가 구조분해할 객체의 키와 이름이 같아야 한다.
2. 배열은 순서가 중요하였지만 객체는 키를 적기때문에 순서가 상관없다. 예를들어 const {age, name, school} = obj 이런식으로 순서를 바꿔도 age에 값에 "짱구"가 들어가는게 아닌 그대로 7이 들어가게 된다.

참고한 사이트
https://poiemaweb.com/es6-destructuring
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment