JavaScript の && 演算子の落とし穴

以下のコードを見てください。

let foo = "foo";
if (foo) console.log("bar");  // => "bar"
foo = null;
if (foo) console.log("bar");  // => 出力なし

foo = "foo";
console.log(foo && foo.length === 3);  // => true
foo = null;
console.log(foo && foo.length === 3);  // => null

最後の行は false を期待していたのですが、null が表示されます。

どういうことか

論理演算子 - JavaScript | MDN より引用：

しかし、&& および || 演算子は、実際には、指定された演算対象の一方を返します。ですから、それらの演算子が、真偽値ではない値とともに用いられた場合、真偽値ではない値を返す可能性があります。

なるほど。つまり、null && null.length === 3 は、null が false とみなされて右側は評価されず、しかし実際には false ではなくその値自体を返すため null が返される、ということです。

期待通りに動かすには

以下のようにします。

console.log(foo !== null && foo.length === 3);

まとめ

if (foo) {} とか foo && foo.length とかは使わずに、比較演算子を用いて厳密に比較しましょう。falsy な値は null や undefined だけではなく、"" や NaN なども
当てはまります。特に "" は比較演算子を用いて評価しないと予期せぬ動作になるケースが多そうです。