객체 데이터, 배열 데이터의 구조 분해 할당

🌲 구조 분해 할당 (=비구조화)

🚨 객체 데이터의 속성을 구조 분해하여 각각의 변수로 사용

 

const user = { 
  name : 'kim', 
  age : 99, 
  email : 'siot@mail.com' 
} 

const { name, age, email, address } = user // 객체데이터의 구조분해

console.log(`사용자의 이름은 ${name}입니다.`)
console.log(`${name}의 나이는 ${age}세입니다.`)
console.log(`${name}의 나이는 ${email}세입니다.`)
console.log(address) // undefined

값이 할당되지 않았을 경우 기본값 삽입 가능

const { name, age, email, address = 'Korea' } = user

실제 데이터가 할당된 경우에는 기본값이 무시됨

const user = { 
  name : 'kim', 
  age : 99, 
  email : 'siot@mail.com' 
  address : 'USA'
} 

const { name, age, email, address = 'Korea' } = user // 기본값 Korea는 무시됨

console.log(address) // USA

속성명을 변경하고 싶을 때는 새로운 변수로 재할당

// 첫 번째 방법
const siot = name

// 두 번째 방법
const { name: siot, age, email, address}

 

 

 

🚨 배열 데이터를 구조 분해할 땐 [대괄호]를 사용하며, 키밸류가 아닌 순서대로

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

필요하지 않은 변수가 있을 때는 쉼표로 구분

const fruits = ['Appe', 'Banana', 'Cherry']
const [, , ch] = fruits
console.log(ch) // Cherry