論理演算子

広告

関係演算子を使うことで様々な条件を記述することができますが、論理演算子を組み合わせることで「10より大きく かつ 30より小さい」や「x が 10と等しい 又は y が20と等しい」などのように複数の条件式を使ったより複雑な条件式を記述することができます。

論理演算子として用意されているのは次の通りです。

演算子使用例意味
&&a && ba と b が共にtrueの時にtrue
||a || ba か b の少なくとも1つがtrueの場合にtrue
!!aa がtrueの場合にfalse、a がfalseの場合にtrue

簡単に言ってしまうと「&&」演算子は左辺及び右辺の値が共にtrueだった場合に全体の式がtrueとなります。また「||」演算子は左辺及び右辺のどちらか1つでもtrueだった場合に全体の式がtrueとなります。「!」演算子の場合、右辺の値がtrueならば全体の式がfaleseとなり、右辺の値がfalseだった場合には全体の式がtrueとなります。

このように論理演算子は1つまたは2つの論理値を組み合わせて全体として1つの論理値を返す演算子となります。ただ実際にはもう少し複雑な処理が行われますので一つ一つ確認していきます。

論理積

「&&」は論理積とも呼ばれ、演算子の左辺及び右辺の値が共にtrueの場合だけ全体もtrueとなります。 

左辺 && 右辺

左辺と右辺の値による全体の値の一覧は次の通りです。

左辺右辺全体
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

次の例を見てください。 

var num = 10;
var b;

b = num > 5 && num <= 20;

この場合、まず「num > 5」について判定します。結果はtrueです。次に「num <= 20」を判定します。結果はtrueです。そして&&演算子の両端の値が共にtrueですので式「num > 5 && num <= 20」はtrueとなります。

このように「&&」の左辺及び右辺の値が論理値だった場合には上記のように考えて頂いて構いません。

もう1つ次の例を見てください。 

var b1, b2;

b1 = 0 && 10;
b2 = 7 && 10;

この場合、「0 && 10」は0を返します。また「7 && 10」は10を返します。これは次の手順に従います。

「&&」演算子の場合にまず左辺の式を評価します。その結果がfalse又はfalseになる値(論理値として評価した時にfalseになる値のことで、具体的には0, null, 空の文字列, 未定義値, NaNです)だった場合には右辺の式を評価せずに左辺の式を評価した値をそのまま返します。

よって「0 && 10」は右辺の式は評価をせずに全体として0を返します。

左辺の式を評価した値がfalseにならなかった場合は右辺の式を評価してその結果をそのまま返します。

よって「7 && 10」は左辺の式がfalseでないためは右辺の式を評価してその結果である10を返します。

このようにJavaScriptの論理積は式全体の評価として論理値を返すわけではありません。ただ左辺及び右辺の値が論理値だった場合には結果として論理値を返すことになります。また左辺の評価がfalseだった場合には右辺の評価は行われないことも注意して下さい。

論理和

「||」は論理和とも呼ばれ、演算子の左辺または右辺の値の少なくとも一つがtrueの場合に全体がtrueとなります。 

左辺 || 右辺

左辺と右辺の値による全体の値の一覧は次の通りです。

左辺右辺全体
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

次の例を見てください。 

var num1 = 10;
var num2 = 20;
var b;

b = num1 > 20 || num2 < 30;

この場合、まず「num1 > 20」について判定します。結果はfalseです。次に「num2 < 30」を判定します。結果はtrueです。そして||演算子の両端の値の少なくとも一つがtrueですので式「num1 > 20 || num2 < 30」はtrueとなります。

このように「||」の左辺及び右辺の値が論理値だった場合には上記のように考えて頂いて構いません。

もう1つ次の例を見てください。 

var b1, b2;

b1 = 7 || 10;
b2 = 0 || 10;

この場合、「7 || 10」は7を返します。また「0 || 10」は10を返します。これは次の手順に従います。

「||」演算子の場合にまず左辺の式を評価します。その結果がtrue又はtrueになる値(論理値として評価した時にtrueになる値のことで、具体的には空で無い文字列, 0でない数値, オブジェクト, Infinity, -Infinityです)だった場合には右辺の式を評価せずに左辺の式を評価した値をそのまま返します。

よって「7 || 10」は右辺の式は評価をせずに全体として7を返します。

左辺の式を評価した値がtrueにならなかった場合は右辺の式を評価してその結果をそのまま返します。

よって「0 || 10」は左辺の式がtrueでないためは右辺の式を評価してその結果である10を返します。

このように論理和も論理積と同じく式全体の評価として論理値を返すわけではありません。ただ左辺及び右辺の値が論理値だった場合には結果として論理値を返すことになります。また左辺の評価がfalseだった場合には右辺の評価は行われないことも注意して下さい。

論理否定

「!」は論理否定とも呼ばれ、演算子の右辺の値を反転します。 

!右辺

右辺の値による全体の値の一覧は次の通りです。

右辺全体
truefalse
falsetrue

次の例を見てください。 

var num = 10;
var b;

b = !(num > 20);

この場合、まず「num > 20」について判定します。結果はfalseです。そして「!」演算子によっての式「!(num > 20)」はtrueとなります。

論理否定の場合は対象となる値を論理値として評価し、その値を反転させて結果が返されます。よって論理否定の場合は必ず式全体の評価として論理値が返されます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script13_1.js">
</script>

</body>
</html>

var num = 30;
document.write("<p>num = " + num + "</p>");

document.write("<p>num > 5 && num < 20  --> ");
document.write(num > 5 && num < 20);
document.write("</p>");

document.write("<p>num > 20 || num < 10  --> ");
document.write(num > 20 || num < 10);
document.write("</p>");

document.write("<p>!(num < 20)  --> ");
document.write(!(num < 20));
document.write("</p>");

document.write("<p>0 && 'End'  --> ");
document.write(0 && "End");
document.write("</p>");

document.write("<p>1 && 'End'  --> ");
document.write(1 && "End");
document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p13-1

( Written by Tatsuo Ikura )