【JavaScript】if文条件式の「&&」と「&」の違いは何か？（アンパサンド１つと２つの注意点。アンドの数で処理が変わる）| 2進数の掛け算方法

JavaScriptでif文などの条件式を記述するときに、trueかfalseの判定を「&」や「&&」を使って記述することがあります。

この「&」アンパサンド（アンドマーク）は１つか２つかで、処理が大きく違います。この違いを理解していないと混乱が発生することがあるので注意が必要です。

ここでは、「&」と「&&」の違いについてまとめています。

&&と&の違い

&&と&の違いは以下のようになります。

&&とは何か？

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

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

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

&とは何か？

• 2進数の掛け算の結果を10進数で返す。

「2進数の掛け算の結果を10進数で返す」という表現を聞いて「??」と思った方もいるかもしれませんが、その通りなかなかややこしい処理をしています。

このため条件式の中で「&」１つだけを使うことはあまりないと思います。

＆を使った処理の詳細は後方でまとめています。

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

処理内容

「&&」のように「&」が２つつく場合は、前方の処理結果が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つ移動していくだけです。

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

処理内容

「＆」のようにアンド１つの場合は、2進数の掛け算をし、その結果を10進数で返す処理になります。

基本的には、数値どうしを掛け合わせる場合に使用します。

なお、true, falseや文字列は2進数で以下のように換算されます。

2進数の数値とは何か？

2進数とは各数値を「0」と「1」で表したものです。

10進数を2進数に読み替えると以下のようになります。

このように、桁が全て「1」で埋まると、１桁増ずつ増えていきます。

2進数の掛け算とは何か？

この2進数を使った掛け算では、同じ桁どうしを掛け合わせます。掛け合わせの組み合わせは以下の4パターンしかありません。

掛け合わせる数値がどちらも「1」の場合のみ、処理結果は「1」になります。それ以外は「0」になります。

なお、掛け合わせるときに存在しない桁には「0」が入ります。

1 * 7 の場合

例えば1 * 7 の場合は以下のようになります。

１は2進数で「1」、7は「111」です。

001  <- 1
111  <- 7
---
001  <- 回答

結果は「001」です。

2進数の「001」は10進数で「１」なので、最終的に「１」が返ります。

1 & 7

//処理結果
1

４ * 7 の場合

例えば4 * 7 の場合は以下のようになります。

4は2進数で「100」、7は「111」です。

100  <- 4
111  <- 7
---
100  <- 回答

結果は「100」です。

2進数の「100」は10進数で「4」なので、最終的に「4」が返ります。

4 & 7

//処理結果
4

8 * 7 の場合

例えば8 * 7 の場合は以下のようになります。

8は2進数で「1000」、7は「111」です。

0001  <- 1
1000  <- 8
----
0000  <- 回答

結果は「0000」です。

2進数の「0」は10進数で「0」なので、最終的に「0」が返ります。

8 & 7

//処理結果
0

文字列との掛け合わせ

文字列は2進数で「0」とみなされます。このため、前方か後方のどちらかに文字列を含む場合、結果は常に「0」となります。

"a" & 2

//処理結果
0

4 & "b"

//処理結果
0

"aaa" & "bbb"

//処理結果
0

ややこしいですね。

こんなわけで、JavaScriptの条件式の中で、「&&」をよく使うことはあっても、「&」はほとんど使わないと思います。

「&&」と「&」は全く違うので混同しないように注意しましょう。

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

処理内容

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

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つ移動していくだけです。