JavaScriptを使って画面側で文字列を結合させて、サーバ側で更新処理をしようとしたらなぜか数値の0として受け取っていたのでなぜか調べてみたら、データがどちらもnullで算術演算子の+を使ったら数値に変換されていることがわかりました。
同じことで詰まる人がこれからいなくなるように発生する理由と対策を紹介します。
コメント欄に沢山有益なことが書かれているので、そちらの方も是非見てください!
コメントをいただきありがとうございました!!
null + null = 0 (int型) になる訳
JavaScriptでは、null
値は空または存在しない値を表します。
null
値と+
演算子を使用すると、数値加算として評価されます。
null
が0
と評価されるため、2つのnull
値を加算すると0
になります。
let sFirstName = null
let sLastName = null
let sFullName = sFirstName + sLastName
console.log(sFullName) // 出力: 0 (integer)
対策
- Null合体演算子(??)を使用してnullなら空文字を入れる
Null合体演算子(??)を使用して、演算子の両側の値がnull
の場合にデフォルト値を提供することもできます。
let sFirstName = null
let sLastName = null
let sFullName = (sFirstName ?? '') + (sLastName ?? '')
console.log(sFullName) // 出力: ''
2.アロー関数で変数を初期化する
const getFullName = (first = '', last = '') => {
if (first === null || first === undefined) first = ''
if (last === null || last === undefined) last = ''
return `${first} ${last}`
}
let sFirstName = null
let sLastName = null
let sFullName = getFullName(sFirstName,sLastName)
console.log(sFullName) // 出力: ''
おわりに
この振る舞いを理解することは、安全で安全なコードを書くために必要なことだと思います!