【JavaScript】論理演算子「&&」で条件分岐させる時の動きを理解した話

これまでの論理演算子「&&」の理解

論理積 (AND)は与えられた複数の命題のいずれもが例外なく真であることを示す論理演算であり、所謂、「X かつ Y」や「X そして Y」というイメージ。
https://ja.wikipedia.org/wiki/%E8%AB%96%E7%90%86%E7%A9%8D

本題

フロントエンドの開発において、
バックエンドから取得するデータによって表示条件を分岐させる機能があったが、
取得しているデータがかなりネストされたオブジェクトとなっていて扱い辛い形となっていた。

//（例）
var human = {
  name : 'taro',
  hometown: {
    country : 'Japan',
    city :'Tokyo'
  }
};

※ここではバックエンド側の改修をせずに解決する前提の話となる。

例えば、ここで Vue.js で上記オブジェクトの国情報の存在チェックで条件分岐させたい場合、単純に以下のような書き方をすると失敗する。

// isEmptyは空判定をBooleanでするメソッドだと思ってみてください
<div v-if="!isEmpty(human.hometown.country)">国情報がある</div>

これだと country が存在する時は良いが、hometown が存在しないケースがある場合はエラーになってしまう。なので、ここで「&&」を使って条件式を作る。

<div v-if="!isEmpty(human.hometown) && !isEmpty(human.hometown.country)">国情報がある</div>

冒頭の理解だと、これが何故成り立つのかふんわりとしか理解出来ないが、それは「&&」「かつ」について同時に成り立っていると言うイメージを持ってしまっているのが良くなかった。

expr1 && expr2

expr1 を false と見ることができる場合は、expr1 を返します。そうでない場合は expr2 を返します。したがってブール値を用いた場合、両被演算子が true であれば && は true を返し、そうでなければ false を返します。

これが答えであるが、今回の例で言うとまず !isEmpty(human.hometown) で hometown が空でないかどうかを判定し、空である場合はこの段階でfalseが返り、空でない場合は次に !isEmpty(human.hometown.country) を判定し、存在チェックを行う、という流れになっている。なので問題ない。

ちなみに今回はBooleanが返るような想定で例を上げたが、MDNからの引用にもあるように、
「&&」については、左辺を評価しfalsy(偽値)であれば、その値を返し(右辺は評価しない)
左辺がtruthyであったら右辺を評価し、その値を返す。

なので文字列なども返す事が出来るので、そう言う使い方も出来るみたい。詳しくは参考記事を貼っておく。

##　以下、参考にさせて頂いた記事
・JavaScriptの「&&」「||」について盛大に勘違いをしていた件
・【JavaScript】”&”と”＆＆”、”|”と”||”のメモ