Last Updated: 2024-04-24

I had some trouble getting JavaScript objects arguments to have defaults at certain keys. Here's what I was using:

function doRawCalculation1({cashAmount, assetAmount} = {cashAmount: 0}) {
  return cashAmount + assetAmount
}

doRawCalculation1({assetAmount: 7})
// => NaN

WTF? Let's add some logging:

 function doRawCalculation1Log({cashAmount, assetAmount} = {cashAmount: 0}) {
   console.log("cash", cashAmount)
   console.log(assetAmount)
   return cashAmount + assetAmount
 }

 doRawCalculation1Log({assetAmount: 7})
  // cash undefined
  // 7

 // i.e. The log show that cashAmount remains undefined.

Is it possible that the default set using that syntax only applies if the whole object is missing?

doRawCalculation1Log()
// cash 0
// undefined

This show that cashAmount is set this time, confirming that the default only works if the whole object is omitted...

The fix is to use an alternative syntax ("inline") to set the defaults

function doRawCalculation2({
   cashAmount = 0,
   assetAmount
 }) {
    console.log("cash amount", cashAmount)
    console.log(assetAmount)
   return cashAmount + assetAmount
}
doRawCalculation2({assetAmount: 7})
// cash amount 0
// 7

// => 7

Lesson

When settings defaults on an object, ask yourself whether you want to defaults to apply when even single key is missing or only the whole object is missing.