【JavaScript】if文条件式の中の「||」とは何か？縦線(パイプ)２つ。||と&&の違いを実例で解説

JavaScriptを使っていると、if文の中の条件式などで、縦線（パイプ）を2本つなげた||を使っていることがあります。

ここでは、「||」と合わせてよく見かける「&&」の違いと合わせて、実例で処理内容を解説しています。

||と&&の違い

「||」縦線(パイプ)２つと「&&」アンドマーク２つの違いをまとめると以下のようになります。

||とは何か？

• 前方の処理結果が「false」「null」「0」「””」「undefined」以外なら、そこで処理を強制終了し、その値や式の結果を返す。
• 前方の処理結果が「false」「null」「0」「””」「undefined」なら、後方の処理に移動する。

式や値を一つ一つ実行して評価し、次の式へと移っていきます。

このため「A && B」であれば、「A」と「B」は完全に独立しています。

ポイントは、前方の処理結果が「false」「null」「0」「””」「undefined」以外なら、そこで処理を強制終了するところです。

&&とは何か？

• 前方の処理結果がtrueなら、後ろの式を実行し、その結果を返す処理。
• 処理結果が「false」「null」「0」「””」「undefined」ならそこで処理を強制終了し、その値を返す。

こちらも「||」と同じく、式や値を一つ一つ実行して評価し、次の式へと移っていきます。「A && B」であれば、「A」と「B」は完全に独立しています。

処理結果が「false」「null」「0」「””」「undefined」ならそこで処理を強制終了するところがポイントです。

||（パイプ２つの場合）

処理内容

「&&」と似た処理に、条件式の中で「||」パイプ２つを使うことがあります。

A || B

これは、値や式の評価結果が「false」「null」「0」「””」「undefined」以外なら、そこで処理を強制終了して、その結果を返す処理です。

もし、評価結果が「false」「null」「0」「””」「undefined」の場合は、後ろの処理に移ります。

一番後ろの処理結果が「false」「null」「0」「””」「undefined」のいずれかの場合は、その値をそのまま返します。

前方の式や値が存在する場合

前方の式や値が「false」「null」「0」「””」「undefined」以外の場合は、前方の処理結果が返ります。

後ろの処理は実行されません。

trueの場合

true || 10

//処理結果
true

数値の場合

5 || 10

//処理結果
10

3 || true

//処理結果
3

5 || false

//処理結果
5

式の場合

5*10 || 3*2

//処理結果
50

前方の式や値が存在しない場合

前方の式や値が「false」「null」「0」「””」「undefined」となり存在しない場合は、後方の値や式に移ります。

falseの場合

false || true

//処理結果
true

false || 5

//処理結果
5

nullの場合

null || true

//処理結果
true

null || 5

//処理結果
5

undefinedの場合

undefined || true

//処理結果
true

undefined || 5

//処理結果
5

空文字の場合

"" || true

//処理結果
true

"" || "a"

//処理結果
"a"

0の場合

0 || true

//処理結果
true

0 || "a"

//処理結果
"a"

前方も後方も式や値が存在しない場合

前方と後方のどちらもの式と値が「false」「null」「0」「””」「undefined」となり存在しない場合は、後方の値や式の結果が返ります。

null || false

//処理結果
false

0 || null

//処理結果
null

null || undefined

//処理結果
undefined

null || 0

//処理結果
0

複数の式や値を||でつなげる

「A || B」だけでなく、「A || B || C || D,,,,」といったように「||」で式や値をつなげることもできます。

変数Aが存在しなければ、変数Bを見る。変数Bが存在しなければ、式Cを評価する、、、といった条件の判断をしたい場合に使えます。

最初に、「false」「null」「0」「””」「undefined」以外の結果になった時点で評価を強制終了します。

5 || 10 || "a" || "b"

//処理結果
5

false || 0 || null ||  "" || undefined

//処理結果
undefined

false || 0 || null ||  "" || undefined || 5*10

//処理結果
50

処理自体は単純に前の式を評価して、後ろの式に1つ1つ移動していくだけです。

&&の処理内容（アンド２つの場合）

処理内容

「&&」のように「&」が２つつく場合は、前方の処理結果がtrueなら、後ろの式を実行し、その結果を返す処理になります。

前方の処理結果がfalseなら、そこで処理を停止してfalseを返します。

A && B

上記の「A」や「B」は「true」「false」といった真偽値でも、「5*1」といった式でも、「1」「”a”」といった値でもどれでも使うことができます。

false以外で処理を強制終了する場合

値や式の結果が「false」になる場合は、当然そこで処理を終了し「false」を返します。

一方、「null」「0」「空文字列 (“”)」「undefined」もそこで処理を強制終了します。（後ろの式の評価に移りません）

上記の場合、返る値は「false」ではなく、それぞれの値が返ります。（「undefined」なら「undefined」が返る）

以下で実例を示しておきます。

falseの場合

false && 5

//処理結果
false

nullの場合

null && 5

//処理結果
null

0の場合

0 && 5

//処理結果
0

5*0 && 5

//処理結果
0

undefinedの場合

undefined && 5

//処理結果
undefined

&&の実例

前方がtrueの場合

true && 5*10

//処理結果
50

前方の評価をパスし、後方の処理結果を返します。後方が式ではなく、値の場合は、その値を返します。

true && 5

//処理結果
5

前方が式の場合

5*10 && 30 

//処理結果
30

前方が四則演算などの式で値が、「null」「0」「undefined」「false」「””」以外の場合は、後ろの式の処理結果を返します。

5*10 && "a" 

//処理結果
'a'

複数の式や値を&&でつなげる

「A && B」だけでなく、「A && B && C && D,,,,」といったように「&&」で式や値をつなげることもできます。

変数Aが存在して、かつ変数Bが存在して、かつ式Cの結果がfalseなどではなくて、、、などという条件の判断をしたい場合に使えます。

5 && 10 && "a" && "b"

//処理結果
'b'

処理自体は単純に前の式を評価して、後ろの式に1つ1つ移動していくだけです。

参考リンク