null+nullは0だったんか事件

何が起きた

JavaScriptにて

let postal1 = '123'
let postal2 = '4567'

fullPostal() {
  return  postal1 + postal2
}

みたいに、「郵便番号をハイフン区切りで入力させた後結合させる」をしたかったのである

postal1、postal2の初期値はどちらも""にしており、この状態のときは空文字を返すので良かった

問題はフォームリをリセットしたとき。 Vuetifyのthis.$refs.form.reset()を使うと文字列はnullになるのだけど、このときに文字列結合すると0が返ってくる

なんでやねん

null + nullは文字列結合じゃなくて数値加算になってしまうらしい nullを数値型にキャストすると0なので、0+0=0ということ

じゃあ変数展開にしたら解決するんじゃね？

fullPostal() {
  return  `${postal1}${postal2}`
}

"nullnull"

違うそうじゃない

最終的に

単純に、未入力のときは空文字を返すようにしてあげた

isInputPostal() {
  return !!postal1 || !!postal2
}

fullPostal() {
  if (!isInputPostal) return ''
  return  postal1 + postal2
}

こういうところ、ちゃんと確認しないとバグが生まれるので怖いわね