24
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

null + null = 0 になるんだけど in JavaScript

Last updated at Posted at 2023-02-11

JavaScriptを使って画面側で文字列を結合させて、サーバ側で更新処理をしようとしたらなぜか数値の0として受け取っていたのでなぜか調べてみたら、データがどちらもnullで算術演算子の+を使ったら数値に変換されていることがわかりました。
同じことで詰まる人がこれからいなくなるように発生する理由と対策を紹介します。

コメント欄に沢山有益なことが書かれているので、そちらの方も是非見てください!
コメントをいただきありがとうございました!!

null + null = 0 (int型) になる訳

JavaScriptでは、null値は空または存在しない値を表します。
null値と+演算子を使用すると、数値加算として評価されます。
null0と評価されるため、2つのnull値を加算すると0になります。

let sFirstName = null
let sLastName = null
let sFullName = sFirstName + sLastName
console.log(sFullName) // 出力: 0 (integer)

対策

  1. 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) // 出力: ''

おわりに

この振る舞いを理解することは、安全で安全なコードを書くために必要なことだと思います!

24
9
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?