구조분해 할당(Destructuring)

📖 구조분해 할당 : 배열 또는 객체의 구조를 분해한 후 필요한 데이터를 할당하는 개념이다.

 

✏️ [배열] 구조분해할당 

 

const Friend = ["짱구","훈이","철수"]

const friend1 = Friend[0]
const friend2 = Friend[1]
const friend3 = Friend[2]

기존에는 각 배열의 인덱스 번호를 대입하여 원하는 값을 추출하였다 하지만 구조분해 할당으로 사용하게 되면 코드도 더 간결해지면서 편리하게 이용 가능하다.

const Friend = ["짱구","훈이","철수"]
//구조분해할당
const [friend1,friend2,friend3] =Friend

✏️ {객체} 구조분해할당 

const Profile ={
Name:"짱구",  // key :
Age:7,
School:"떡잎마을유치원"
}

//기존방식
const name = Profile.name
const Age = Profile.Age
const School = Profile.School

//짱구,7,떡잎마을유치원

객체 구조분해할당은 배열과 다르다 배열의 경우 각 인덱스 번호를 대입하고 출력하였다 하지만 객체에 경우 프로퍼티 키 이름으로 값을 추출한다. 또한 각 키 이름을 중괄호로 감싸서 할당 받게 되면  각 키 이름으로 변수가 선언되고 값이 할당된다.

 

const Profile ={
Name:"짱구",  // key : value
Age:7,
School:"떡잎마을유치원"
}

//구조분해할당
const {Name,Age,School} = Profile
//Name: "짱구"
//Age: 7
//School:"떡잎마을유치원"