DESTRUCTURING - Function Destructuring

출처 : Nomadcoders ES6의정석

함수에서도 구조분해할당을 활용할 수 있다.
정확히는 객체 구조분해할당을 함수에 적용하는 것이 더 맞을것 같다.

우리는 평소에 함수를 작성하여 인수를 받을 때 아래와 같이 전달하고는 한다.

function saveSettings(settings){
  if(!settings.mrkAlert){
  	/// something
  }
}

saveSettings({
  follwAlert:true,
  unFoolwAlert:true,
  mrkAlert:true,
  themeColor:"green"
})

간혹 인자를 줄때 값만 집어넣는 경우가 있는데, 다른사람이 코드를 볼때 함수를 파악하고있어야만 이해가 되기에, 키를 모두 써주길 권장한다.

// 인자가 뭘뜻하는지 파악하기 어려움
saveSettings(true,true,true,"green")

또한 만약 오브젝트의 데이터 중 몇개는 A파트에 다른 몇개는 B파트에 각각 다른 api로 보내야 한다면 어떻게 될까

function saveSettings(settings) {
  if (!settings.mktAlert) {
    /// A파트
  }
  //B파트로 보내기위해 추가로 함수작성
  saveColor(settings.themeColor)
}

saveSettings({
  follwAlert:true,
  unFoolwAlert:true,
  mrkAlert:true,
  themeColor:"green"
})

이런식으로 해당값을 식별하기위해 추가로 함수가 작성될 것이다.
객체 구조분해할당 표현식을 사용하여 수정해보자.

function saveSettings({notification, color:{themeColor="light"}}) {
  /// something
}

saveSettings({
  notification:{
    follwAlert:true,
    unFoolwAlert:true,
    mrkAlert:true
  },
  color:{
    themeColor:"green"
  }
})

이전에도 학습했듯 구조분해할당은 구조를 더 직관적으로 확인할 수 있게해주며, 기본값을 지정하여, 데이터가 없을때를 방지하며, 목적에 따른 데이터를 구분하게 해주는 이점이 있다.