JavaScript 初歩のまとめ ⑧ 論理演算子

必要が出た時にはじめて勉強する方式で JavaScript の勉強を続けていますが、制御文のまとめをしていて、色々な種類のある演算子について さらに勉強が必要になりました。今回も覚えたことを色々と試しながら まとめておきます。

論理演算子

論理演算子は if 文の条件式等で 比較演算子とセットで使うことが多い演算子だと思います。複数の条件を組み合わせて、○○ かつ ××  や △△ または □□（よく and, or という言い方をしますね ）といった複雑な条件を指定することができます。

論理演算子

今回も表にしてみました。3種類あります。 ! は以前のまとめでも出てきましたが、分類上はここに属するようでしたので 再登場です。いつものように順に見ていきます。

&&

ふたつ以上の条件の全てを 満たす場合に true ひとつでも満たさない場合は false を返す演算子です。 and の意味です。

ex.1

var sky = 'blue';
var sea = 'green';
var submarine = 'yellow';

if (sky == 'blue' && sea == 'green') {
 　 document.write(submarine);

}

ex.1 の実行結果

ex.1 では ふたつの変数の値が 両方とも正しいので、 true が返って その後の処理が実行され 変数 submarine の値が表示されています。

ex.2

var sky = 'blue';
var sea = 'green';
var submarine　= 'yellow';

if (sky == 'blue' && sea == 'yellow') {
　 document.write(submarine);
}

ex.2 の実行結果

ex.2 では 変数 sea の値が違っていますので、false が返って 何も実行されません。

| |

ふたつ以上の 条件のどれかを満たす場合に true を返し、ひとつも満たさない場合だけ false を返す演算子です。 or の意味です。

ex.3

var sky = 'blue';
var sea = 'green';
var submarine　= 'yellow';

if (sky == 'blue' || sea == 'red') {
　 document.write(submarine);
}

ex.3 の実行結果

ex.3 では、ふたつの条件のうち ひとつだけを満たしていますが、どちらかの条件が正しければ true が変えるので、その後の処理が実行されています。

ex.4

var sky = 'blue';
var sea = 'green';
var submarine　= 'yellow';

if (sky == 'white' || sea == 'red') {
　 document.write(submarine);
}

ex.4 の実行結果

ex.4 では ふたつの内のどちらも満たさないので、何も実行されていません。

!

その後に書かれた条件の 真偽の逆を返す演算子です。not の意味です。条件の書き方に少し注意が必要ですので、サンプルで確認して下さい。

ex.5

var x = 50;

if (!(x > 100)) {
 　 document.write('50 は 100 未満ですが、true が返りました。');
}

ex.5 の実行結果

変数 x には 50 が代入されています。if 文の条件式で x を 100 と比べています。普通の比較演算子でしたら false が返って 何も実行されずに終了しますが、先頭に ! 演算子が付いていますので 真偽が 逆になって true が返るため、その後の処理が実行されています。

気を付けないといけない書き方というのは、この例のように 先頭に ! を書いて 条件を ( ) で囲む必要がある場合があります。これは この演算子の優先順位がかなり高いことが原因のようです。（また 必要が出た時に調べてみます。）

カッコの話題が出たので、ついでに少しややこしい条件を書いて、そういった書き方がちゃんと処理されるか 試してみます。

ex.6

var sky = 'blue';
var sea = 'green';
var submarine　= 'yellow';

if ((sky == 'blue' && sea == 'red')||submarine == 'yellow') {
 　 document.write(submarine);
}

ex.6 の実行結果

この条件を説明すると、「sky が blue かつ、sea が red という条件」又は、「submarine が yellow という条件」この ふたつのどちらかを満たす場合は true　どちらも満たさない場合は false となります。sea に代入されているのは green で ひとつ目の条件は 満たしていませんが、又は submarine が yellow の条件を満たしているので、true が返っています。

今回の例は これまでと比べて だいぶややこしくなってきましたが、ひとつひとつを 見ていくと パズルの様でもあって、こういった所も プログラミング の楽しさのひとつなのかな…と少し判る気もしてきました。