[JavaScript] 구조분해할당

📌 구조분해할당이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.
(구조분해할당 = 비구조화할당 = Destructuring Assignment)

아래 예시를 보면서 확인해보자.

📌 배열에서 구조분해할당하기

오른쪽의 child 배열이 구조분해할당으로 인하여 각 friend1, friend2, friend3에 대입되는 것을 확인할 수 있다.

const child = ["철수", "영희", "훈이"]

const [friend1, friend2, friend3] = child

console.log(friend1)	//"철수"
console.log(friend2)	//"영희"
console.log(friend3)	//"훈이"

---

📌 객체에서 구조분해할당하기

다음과 같이 다양한 형태로 구조분해할 수 있다.

• case 1 : myInfo객체에 담겨있는 모든 key들을 구조분해할당하여 값을 가져올 수 있다.
• case 2 : myInfo객체의 key값이 age인 값만 구조분해할당하여 가져온다.
• case 3 : 오른쪽에 객체를 바로 입력해주어 구조분해할당된 값을 가져온다.

const myInfo = {
	name: "Annie", 
	age: 12, 
  	school: "판다초등학교"
}

const {name, age, school} = myInfo		//case 1
console.log(name)		//"Annie"
console.log(age)		//12
console.log(school)		//"판다초등학교"

const {age} = myInfo					//case 2
const {myName, myAge, mySchool} = {myName: "철수", myAge: 12, mySchool: "토끼초등학교"}	//case3

---

📌 객체와 배열에서의 구조분해할당 차이점

• 배열에서는 객체처럼 key라는 고유의 값이 없기 때문에 객체의 key값과 동일한 변수명으로 받지 않아도 된다.
• 객체에서는 key값과 받아올 변수의 이름이 같다면 받아오는 변수 순서는 상관없지만, 배열에서는 변수의 순서와 갯수가 상관있다.

---

📌 function을 사용하여 배열/객체 구조분해할당하기

/* function을 사용한 배열 구조분해할당 */
function getClassmates() {
    return ["영희", "철수"]
}
const [friend1, friend2] = getClassmates()


/* function을 사용한 객체 구조분해할당 */
function getChild() {
    return {
        name: "철수",  
        age: 13, 
        school: "판다초등학교"
    }
}
const {name, age, school} = getChild()
const {school} = getChild()