구조 분해 할당(Destructuring Assignment)

구조 분해 할당이란?

구조 분해 할당, 쉽게 말해 이름 그대로 구조를 분해하고 다시 할당해주는 것을 의미한다.

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 해주는 Javascript 표현식이다.

간단하게 예를 들어 보자

1 . 배열

const x = [10,20,30,40,50]

const [y,z,삼십,...rest] = x
console.log(y)  // 10
console.log(z)  // 20
console.log(삼십) // 30
console.log(rest) // [40,50] // rest는 제일 마지막에 있을 때만 사용 가능

위 x 라는 배열을 분해하여 y , z, 삼십, 그리고 rest 변수에 값을 새롭게 할당을 해주었다. 위에서 알 수 있듯이 변수명은 크게 중요하지 않고 순서가 중요하다.

그렇다면 x 의 2번째 값만 변수에 할당하고 싶다면 어떻게 하면 될까?

const x = [10,20,30,40,50]
const [,z] = x
console.log(z) // 20

이렇게 ' , '를 입력함으로써 해당 순서에 맞춰주면 원하는 값만 변수에 할당하는 것이 가능하다!

2 . 객체

const x = {name:"철수",age:8,school:"서울"}

const {school,name,age} = x

console.log(school)  // "서울"
console.log(name)    // "철수"
console.log(age)     //   8

이미 배열과의 차이점을 눈치챘을지도 모르겠지만!
순서가 중요했던 배열과는 달리 객체는 변수명이 중요하다!!
그렇기에 순서를 다르게 할당을 하더라도 원하는 값을 해당 변수에 할당할 수 있었던 것이다.

그렇다면 변수명을 꼭 객체의 key값으로만 지정을 해야하는가? 그건 또 아니다

const x = {name:"철수",age:8,school:"서울"}
const {school:학교,name:이름,age:나이} = x

console.log(학교)
console.log(이름)
console.log(나이)

위처럼 원하는 변수명을 객체 key값뒤에 ' : '와 넣어주면 원하는 변수명 설정도 가능하다!