Destructuring Assignment (구조분해할당)

---

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

1️⃣ 객체 구조분해할당

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

user 객체에 일일이 하나하나 변수명을 재할당한 부분과 구조분해할당을 사용해 변수를 재할당한 부분입니다. 이처럼 반복되는 변수 선언을 구조분해할당을 통해 좀 더 간결한 코드로 작성할 수 있습니다.

2️⃣ 배열 구조분해할당

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;

classmates 배열을 구조분해할당을 해보았습니다. 여러번 재할당해야하는 변수 선언 부분이 한줄로 정리되었습니다.

---

🗒 출처

---

• https://velog.io/@dooreplay/%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4%ED%95%A0%EB%8B%B9-destructuring-%EC%A0%95%EB%A6%AC%ED%95%B4%EB%B3%B4%EA%B8%B0 - 구조분해할당 정리해보기 | Vlog
• 2일차 노션 강의 자료 참고 - codecamp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment - MDN | Destructuring assignment