Javascriptの中級レベルが知っておくべき便利な演算子「||」と「&&」と「??」

こんにちわ。
他の人が書いたプログラムの不明点があれば、調べずには居られなくなる、下駄です。
論理演算子として、普段からよく使っている「||」と「&&」は、if文などで使いますが、変数代入で三項演算子よりも便利に使えるという事をこれまでなんとなくしか知らなかったので、今回ちゃんと使えるように理解してみたいと思います。
倫理演算子「||」の変数代入の使い方
三項演算子で以下のように書く場合に、
1 2 3 4 5 |
var aa = "テキスト"; var bb = "文章"; var res = aa ? aa : bb; > res : "テキスト" |
aaに値が入っていない場合にbbが代入されます。
これを、論理演算子でもっと簡潔に書くことができます。
1 2 3 4 5 |
var aa = "テキスト"; var bb = "文章"; var res = aa || bb; > res : "テキスト" |
ほんの少しの軽量化ですが、使ってみると、aaを2回書かないという点がかなり楽なので、使い始めるともう止まりません。
ただし、三項演算子のように、がっつりと条件が書けるわけではなく、aaに値が入っていない場合にbbを代入してくれるという限定的な使い方になるので、用途が合えば使うというのがいいでしょう。
これは「論理和」と言うようですよ。
これをif文で書くと、
1 2 3 4 5 6 7 8 9 |
var aa = "テキスト"; var bb = "文章"; var res =""; if(aa){ res = aa; } else{ res = bb; } |
これまでこうやって書いていたかと思うと、スッキリできるこの書き方使わないほうが損じゃね?
倫理演算子「&&」の変数代入の使い方
「||」の使い方を覚えたら、if文でもおなじみの「&&」も気になると思います。
普通に考えたら、||がorで、&&はandという風に理解してみると訳がわからなくなるので、
||の逆という風に考えるといいでしょう。
なので・・・
1 2 3 4 5 |
var aa = "テキスト"; var bb = "文章"; var res = aa && bb; > res : "文章" |
このようになります。
aaに値が入っている場合に、bbを代入するという事になるんですが、aaに値がない場合(nullやfalseや0の場合)に、それを代入するという事なんですが、
実際には、この条件でプログラムする事は無さそうなので、「||」を使うほうが頻度高そうですね。
ちなみに、これは「論理積」と言うようです。
「??」の使い方
そして、不明点が多い「??」も代入演算子として使えるか試してみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var aa = ""; var bb = ""; var res = aa ?? bb; > "" var aa = null; var bb = ""; var res = aa ?? bb; > "" var aa =""; var bb = null; var res = aa ?? bb; > "" var aa = null; var bb = null; var res = aa ?? bb; > null |
これ、わかりにくいですよね〜、null合体とい論理演算子なんですが、
aaとbbが共にnullの時だけ、nullが代入されるということなんですけど、
ビット操作などをやりたいときは、知っておくと便利に使えるかもしれません。
まとめ
プログラムの書き方を、複雑にするようにも思える論理演算子ですが、とにかくシンプルに書けるという効率重視のプログラミングなので、初心者にはハードルが高いようですが、何度も同じ様な構文で書いていると、より効率を求めたくなるはずです。
そこには、プログラマーとしてのスキルアップがあったと考えるのが一般的なので、読みづらいとか、わかりにくいという周囲の言葉があっても、無視していいかもしれませんね。
プログラムは、分かったもん勝ち、わからない人はレベルが低いと判断するだけでいいです。
人のプログラムを読んで勉強になる点は、そういう意識を持っている人だけなのかもしれません。