Destructuring Assignment (구조분해할당)

// ...생략
// 4. 객체 구조분해할당 방식으로 전달하기 + shorthand-property
function zzz({ apple, banana }){ // const { apple, banana } = basket
    console.log(apple) // 3
    console.log(banana) // 10
}
const apple = 3
const banana = 10
// const basket = {
//     apple: apple,
//     banana: banana
// }
// Shorthand property 적용
// const basket = { apple, banana }
zzz({ apple, banana }) // 객체 그대로 넘기기

**
중괄호{} 안에 넣어서 객체로 넘겨주게되면, 순서와 상관없이 이름으로 인수와 매개변수가 매칭되기 때문에 소괄호() 안에 넣어서 넘겨주는것 보다 안전한 코드 작성을 할 수 있습니다.

따라서, 구조분해할당을 통해 데이터 상의 오염을 막을 수 있는 것입니다.**

(1) 객체 구조분해할당(Destructuring)

기존에는 함수 내부에서 Object(객체)의 데이터를 가져오기 위해서 객체명.key값을 사용해서 value값을 가져왔는데 이번에는 Destructuring(구조분해할당)을 사용해 변수명 재할당해 보겠습니다.

const user = {
    name: '철수',
    age: 13,
    school: '다람쥐초등학교',
    createdAt: '2010-09-07',
}
const name = user.name
const age = user.age
const school = user.school
const createdAt = user.createdAt
// 구조분해할당
const {name, age, school, createdAt} = user

(2) 배열 구조분해할당(Destructuring)

const classmates = ['철수', '영희', '훈이'];
const child1 = classmates[0];
const child2 = classmates[1];
const child3 = classmates[2];
// 구조분해할당을 이용해
// child1엔 arr[0]
// child2엔 arr[1]
// child3엔 arr[2]을 할당하였습니다.
const [child1, , child2, child3] = classmates;

• 객체 안의 존재하는 key값의 이름으로 재할당을 해야하고 순서는 상관없이 할당됩니다.
• 이와 다르게 배열은 구조분해할당 시, 배열의 순서가 매우 중요합니다.