JavaScriptのNull合体演算子!変数が定義済(データあり)か、null or undefinedかの判定をするのに便利

JavaScriptのNull合体演算子!変数が定義済(データあり)か、null or undefinedかの判定をするのに便利

今回は、JavaScriptのNull合体演算子についてブログに記録として残しておきたいと思います!

JavaScriptのNull合体演算子とは何か?

Null合体演算子は、見出しの通り、とある編数が定義済(データあり)かnull or undefinedかを判定するのに便利な演算子です!

たとえば、JavaScriptを使って何かの検索システムを作るとします。検索キーワードボックスを用意した上で、

  • 検索キーワードボックスにキーワードが入力されたとき
  • キーワードが空になったとき

で、それぞれ実行したいプログラム(キーワード設定の有無を変えるだけでもOKです)を変えたいときなどに便利です!

JavaScriptのNull合体演算子の例

それでは、JavaScriptのNull合体演算子を使うとどんな感じにコードを書けるのかを見ていきましょう!

例えば、下記のコードをご覧ください!

let userImage;

console.log(userImage ?? '');

変数userImageというものを宣言した後、特に何もせずにいきなりconsole.log()を使ってuserImageを出力しています。

ここでuserImage ?? ”というコードが登場していますが、これはどのように解釈されるかというと

  • 変数userImageがnullかundefinedのいずれでもない場合はuserImage(をconsole.log()で出力)
  • 変数userImageがnullかundefinedのいずれかだった場合は、?? の右にある”(空文字)(をconsole.log()で出力)

といったようになります。もし

let userImage;

console.log(userImage ?? 'https://kosugelian.net/images/stamp25.png');

といったコードになっていれば、変数userImageがnullかundefinedのいずれかだった場合https://kosugelian.net/images/stamp25.pngを出力することになるので、アプリケーションなどを作成する際にデフォルト値を設定するのにも便利そうです!

Null合体演算子を使わないで同じことを表現しようとすると

let userImage;

console.log(userImage ? userImage : 'https://kosugelian.net/images/stamp25.png');

などのように三項演算子を使って表現することもできますが、同じuserImageという変数名が複数回同じ行に登場することになるので、少し読みにくいですし面長ですよね。。。

そう考えると、可読性にもつながる演算子なのではないかと個人的には考えています!

まとめ

ということで、今回はNull合体演算子についてブログに書いてみました!

JavaScriotも年々進化を遂げていたり新たな記法が登場していたりするので、勉強し続けないと置いて行かれてしまいますね!w

でも、一生懸命勉強し続けることがこの仕事の楽しいところでもあるので、これからも楽しんでプログラムに触れ合っていきたいと思います!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする