&& の使い方：Logical Conjunction Operator

今回は&&についてまとめる。そんなに複雑なものではないのだが、Booleanではないものと合わせて使用する場合の挙動はちゃんと理解していなかった。

全てtrueかどうかを確認する

一番馴染みのある形だと、なんとなくこうifの中でcondition1がtrueで「かつ」condition2もtrueの場合という条件の指定に使っているイメージ。３つ以上のconditionを&&で繋げていって、全ての条件がtrueとなる場合を指定することも可能。

const condition1 = true
const condition2 = true

if (condition1 && condition2) {
  console.log("both are true")
}

non-Boolean valuesの場合

今回注目したいのは真偽値以外の値の場合。例えば文字列とか、数値とかと一緒に使うとどうなるか。
例えば以下の例でresultは何になるか？パッと答えられなかった。

const result = "platypus" && "kamonohashi"
console.log(result) 

上記の場合、”kamonohashi”がOutputされる。
これは&&の左辺がtrue以外のtruthyな値だった場合、右辺の条件式を評価し、その結果を返すという特性によるもの。

左辺がfalsyの場合

const resultA = false && "kamonohashi"
console.log(resultA) // Output: false

const resultB = "" && "kamonohashi"
console.log(resultB) // Output: ""

もし左辺の条件式がfalseまたはfalseに評価できる値(falsy)である場合、&&演算子は左辺の結果を返す。このとき右辺の条件式は評価されずにスキップされる。

右辺がfalsyの場合

const resultB = "platypus" && 0
console.log(resultB) // Output: 0

なるほど、そうきたか。falseが返ると思いきや、falsyの0がそのまま返ってきた。
&&は左から右へ順にtruthyかfalseかを評価していき、最初にfalsyに当たったところでそのfalsyの値を返し、もしも最後までfalsyに当たらず、最後までtruthyだった場合には、最後の値を返す、というのが本質らしい。

わかったところで本日は以上！

秋を感じる爽やかな一枚をどうぞ。