구조 분해 할당

1. 구조 분해 할당이란?

비구조화 할당을 의미하며, 배열이나 객체의 속성을 구조분해하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

const user = {
  name: '0seo',
  age: 12,
  email: 0seo8@naver.com
}

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의 이메일 주소는 0seo8@naver.com입니다.
console.log(address)
// aderess라는 값은 user객체에 지정되어 있지 않았기 때문에 undefined가 출력됩니다.

2. 정의 되지 않은 값

console.log(address)
// aderess라는 값은 user객체에 지정되어 있지 않았기 때문에 undefined가 출력됩니다.

만약, 정의되지 않은 값을 꺼내와 사용을 하는 경우 그 값이 undefined가 됩니다.

3. 변수에 담지 않은 값

const { name, age } = user

console.log(`${name}의 이메일 주소는 ${email}입니다.`)
// ReferenceErro
console.log(address)
// ReferenceErro

만약, 변수에 담지 않은 값을 출력하게 되는 경우 ReferenceError가 나게 됩니다. 이 경우 아래와 같이 점표기법 또는 인덱싱 방법을 통해 사용할 수 있습니다.

console.log(`${name}의 이메일 주소는 ${user.email}입니다.`)
// 0seo의 이메일 주소는 0seo8@naver.com입니다.

4. default값 정하기

자바스크립트 코드가 복잡해지다보면, address가 원래는 어떠한 데이터를 가지고 있었지만 지금은 없는 상태라 undefined가 출력될 수도 있습니다.

이런 경우를 대비해 아래와 같이 할당연산자를 통해 default값을 정해줄 수 있습니다.

const { name, age, email, adrress="Korea" } = user

이렇게 default값을 정해주게 되면 만약 address에 데이터가 있는 경우 그 데이터를 사용하고, 없는 경우 기본 값을 내보내게 됩니다.

5. 변수 변경하기

const { name, age } = user

위의 경우 user라는 속성의 name이라는 값을 name이라는 변수에 담아서 사용을 하고 있습니다. 그런데 경우에 따라서는 더 적합한 변수를 사용을 해야할 수도 있습니다.

const { name, age } = user

const apple = name

console.log(`${apple}의 나이는 ${age}세입니다.`)

이런 경우 위와 같이 따로 변수를 만들어 재할당을 해 사용을 할 수도 있지만, 구조분해할당의 문법을 사용할 수도 있습니다. :기호를 사용해 원하는 변수의 이름을 명시해 아래와 같이 이용 할 수도 있습니다.

const { name: apple, age, address="Korea" } = user

정리를 하면, user라는 객체에서 데이터를 꺼내올 때는 user에 정의된 데이터의 이름을 그대로 작성을 하되 :기호를 사용해 꺼내온데이터를 원하는 변수에 담아 사용을 할 수 있는 것입니다.

※배열데이터에 구조분해할당을 사용하는 경우

배열 데이터의 경우 이름으로 값을 꺼내오는 것이 아니라 순서로 구분해 사용을 할 수 있습니다.

const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c, d] = fruits
console.log(a, b, c, d)
// Apple Banana Cherry undefined
const [, b] = b
console.log(b) = Banana
const [, , c] = c
console.log(c) = Cherry