はじめに

JavaScript, TypeScriptで論理演算子を利用するときにいつもどっちがどっちだっけ？とわからなくなってしまうのでちゃんと理解するためにまとめようと思います

この記事に登場するコードはNode.js v21.4.0で確認しています

JavaScriptにおける論理演算子

最初に論理積（&&）や論理和（||）を習う時は以下のように考えがちですが厳密には違います。

論理積: どちらもtrueの場合trueが返却される
論理和: どちらか一方でもtrueの場合trueが返却される

実際に実行してみると以下のようになります。

const test = 10 || true;
console.log(test); // 10

どちらもTruthyなデータのため上記のように考えているとtrueが返却されるように思われますが、実際には10が返却されます。

また論理積で試してみると以下のようになります。

const test = 10 && 20;
console.log(test); // 20

こちらもtrueが返却されるように思われますが、実際は20が返却されます。

本来の論理積、論理和演算子の意味は以下の通りです。

論理積: AがFalsyなデータの場合その時点で返却される
論理和: AがTruthyなデータの場合その時点で返却される

これを踏まえていくつかパターンを見てみましょう。

// 論理積
console.log(10 && 20) // 20
console.log(null && 20) // null
console.log(10 && null) // null
console.log(null && null && 30) // null
console.log((null && null) && 30) // null
console.log((null && 20) && 30) // null
console.log((null && null) && (30 && 40)) // null
console.log((10 && 20) && (30 && 40)) // 40

// 論理和
console.log(10 || 20) // 10
console.log(null || 20) // 20
console.log(10 || null) // 10
console.log(null || null) // null
console.log(null || null || 30) // 30
console.log((null || null) || 30) // 30
console.log((null || 20) || 30) // 20
console.log((null || null) || (30 || 40)) // 30
console.log((10 || 20) || (30 || 40)) // 10

その他の論理演算子

NULL合体演算子(`A ?? B`)

Aがnullまたはundefinedの場合にBを返却し、それ以外の場合にAを返却します。
論理和との違いとして論理和はAがFalsyの場合にBを返却しますが、NULL合体演算子はAがnullまたはundefinedの場合にBを返却します。

console.log((null || 0) || 10) // 10 0はFalsyなデータになるので0を返却したい場合は??を利用する必要があります
console.log((null || 0) ?? 10) // 0

論理否定(`!A`)

基本的にはみなさんが学んだ通りの使い方で真値を取ると偽値になり、偽値を取ると真値になります。
二重否定(!!)をすることでboolean型以外のデータ型をboolean型に変換できます。

ちなみに

これらの演算子は基本的に左から順に実行され、trueまたはfalseがあった時点でそれ以降の処理は行いません
ただ論理演算子も四則演算のように実行順があるため注意が必要です

参考資料