JavaScript - 구조 분해 할당

구조 분해 할당(Destructuring Assignment)?

• 배열이나 객체의 구조를 분해하여 분해된 값을 개별 변수에 담는 표현식

 

 

 

배열 구조 분해

• 변수를 선언하고 할당하는 과정 한 번에 가능
• one, two, three는 우변에 위치한 arr의 값을 차례대로 할당받음

const arr = [1, 2, 3, 4, 5]

const [one, two, three] = arr

console.log(one, two, three)

1 2 3

 

 

객체 구조 분해

• 객체를 할당할 때는 분해하려는 프로퍼티의 키 사용

const obj = {
  x: 10,
  y: 20,
  z: 30
}

const { x, y, z } = obj

console.log(x, y, z)

10 20 30

 

 

변수 이름 변경

• 분해한 키에 :(콜론)을 붙이고 사용할 이름 지정

const obj = {
  x: 10,
  y: 20,
  z: 30
}

const { x: a, y: b, z: c } = obj

console.log(a, b, c)

10 20 30

 

 

중첩된 객체의 구조 분해

const obj = {
  item: {
    user: {
      name: 'hjkang'
    }
  }
}

const { item: { user: { name } } } = obj

console.log(name)

hjkang

 

 

함수 인자 구조 분해

const obj = {
  name: 'hjkang',
  job: 'developer',
  hobby: ['game', 'baseball']
}

function print({ name, job, hobby }) {
  console.log(`name: ${name} / job: ${job} / hobby: ${hobby}`)
}

print(obj)

name: hjkang / job: developer / hobby: game,baseball