🌼 구조분해할당
배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해 줍니다.
// 객체 -> 순서 x , 이름 중요!
const child = {
name : “철수”,
age : 12,
school : “도토리초등학교”
}
const name = child.name
const age = child. age
const school = child. school
-> const {name, age, school} = profile;
// 배열 -> 순서 중요!
const classmates = [“철수”,”영희”,”훈이”]
const child1 = classmates[0]
const child2 = classmates[1]
const child3 = classmates[2]
-> const {child1, child2, child3 } = classmates
// 직접 데이터를 할당도 가능
-> [child1, child2, child3] = [“철수”,”영희”,”훈이”]
// spread를 이용하면 나머지 요소를 담을 수도 있다.
-> const {child1, ...child2} = classmates
console.log(child1) // ["철수"]
console.log(child2) // [”영희”,”훈이”]
함수()의 매개변수와 인자를 객체를 구조분해할당하게 되면 순서가 봐뀌더라도 변수명이 같은 것 끼리 값을 전달한다.
function createUser({ name, age, school, email, createdAt }) { // 인자
const myTemplate = `
<html>
<body>
<h1>${name}님 가입을 환영합니다!!!</h1>
<hr />
<div>이름 : ${name}</div>
<div>나이 : ${age}</div>
<div>학교 : ${school}</div>
<div>가입일 : ${createdAt}</div>
</body>
</html>
`;
}
const name = '철수';
const age = 8;
const school = '도토리초등학교';
const email = 'a@a.com';
const createdAt = '2023-01-10';
createUser({ name, age, school, email, createdAt }); // 매개변수
코린이 열심히 배우자!