[Level up] 데이터(5) - 구조 분해 할당

01.구조 분해 할당(Destructing assignment)

• 비구조화 할당을 의미하며, 배열이나 객체의 데이터 구조를 분해하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 (비구조화)
• 배열 또는 객체에서 데이터를 구조 분해해서 내가 원하는 것만 골라서 사용할 수 있는 것을 의미

• 객체 데이터

onst user = {
  name: 'Heropy',
  age: 24,
  email: "wlsdnjs156@naver.com"
}
const { name, age, email, address, nationality = 'Korean' } = user;
// user 객체의 속성들을 구조 분해하여 새로운 객체 데이터에 할당한다. (user 객체의 구조 분해 할당)
// user.address, user[age] 와 같은 의미라고 생각하면 됨

console.log(`사용자의 이름은 ${name}입니다.`) // 사용자의 이름은 Heropy입니다.
console.log(`${name}의 나이는 ${age}세입니다.`) // Heropy의 나이는 24세입니다.
console.log(`${name}의 이메일 주소는 ${email}입니다.`) // Heropy의 이메일 주소는 wlsdnjs156@naver.com입니다.
console.log(address) //  undefined
console.log(nationality) // Korean, 할당 연산자를 통해 기본값 지정 가능

const { name: heropy }  = user;
// 만약 내가 name이라는 Key값 말고 다른 Key값의 이름으로 사용하고 싶다면?
// name: herpoy 처럼 뒤에 내가 원하는 key값 이름을 적으면된다. (콜론을 통해 속성에 개별 변수 지정 가능)
console.log(heropy); // Heropy
console.log(name); // ReferenceError: name is not defined

• 배열 데이터
• 배열 데이터는 객체 처럼 이름으로 추줄하는 것이 아니라 인덱스의 순서대로 추출합니다.

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