비구조화 할당을 의미하며, 배열이나 객체의 속성을 구조분해하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
const user = {
name: '0seo',
age: 12,
email: [email protected]
}
const { name, age, email } = user
위와 같이 객체 데이터가 있을 때 user.name, user[name]과 같이 작성을 해 그 객체의 데이터를 꺼내올 수 있었습니다.
구조 분해 할당 역시 이와 비슷하지만 아래와 같이 객체 내부의 속성들 중에서 필요한 것만 꺼내올 수 있다는 점에서 장점이 있습니다.
const { name, age, email, address } = user
console.log(`사용자의 이름은 ${name}입니다.`)
// 사용자의 이름은 0seo입니다.
console.log(`${name}의 나이는 ${age}세입니다.`)
// 0seo의 나이는 32세입니다.
console.log(`${name}의 이메일 주소는 ${email}입니다.`)
// 0seo의 이메일 주소는 [email protected]입니다.
console.log(address)
// aderess라는 값은 user객체에 지정되어 있지 않았기 때문에 undefined가 출력됩니다.
console.log(address)
// aderess라는 값은 user객체에 지정되어 있지 않았기 때문에 undefined가 출력됩니다.
만약, 정의되지 않은 값을 꺼내와 사용을 하는 경우 그 값이 undefined가 됩니다.
const { name, age } = user
console.log(`${name}의 이메일 주소는 ${email}입니다.`)
// ReferenceErro
console.log(address)
// ReferenceErro
만약, 변수에 담지 않은 값을 출력하게 되는 경우 ReferenceError가 나게 됩니다. 이 경우 아래와 같이 점표기법 또는 인덱싱 방법을 통해 사용할 수 있습니다.
console.log(`${name}의 이메일 주소는 ${user.email}입니다.`)
// 0seo의 이메일 주소는 [email protected]입니다.
자바스크립트 코드가 복잡해지다보면, address가 원래는 어떠한 데이터를 가지고 있었지만 지금은 없는 상태라 undefined가 출력될 수도 있습니다.
이런 경우를 대비해 아래와 같이 할당연산자를 통해 default값을 정해줄 수 있습니다.
const { name, age, email, adrress="Korea" } = user
이렇게 default값을 정해주게 되면 만약 address에 데이터가 있는 경우 그 데이터를 사용하고, 없는 경우 기본 값을 내보내게 됩니다.