現役プログラマーによるJavaScript奮闘記14!~演算子編~

今回からは演算子について書いていきます

演算子というとちょっとお堅い感じがしますが(少なくとも自分は)何のことは無くて
+とか-とか、<とかそういったやつです。

いままでPCに縁が無かった人は違和感が有るかもしれませんが、掛け算は*で表します。
プログラムに限らず、エクセルとかの表計算ソフトとかも掛け算は*なのでこの機会に覚えてしまいましょう。

割り算は/、割り算で割ったあまりは%です。
2*3 → 6
4/2 → 2
3%2 → 1
ですね。

ところでですが、
2 + 3 * 4
の計算結果は何になるでしょう。小学校か中学校でやったと思うのですが、20ではなく、15です。
これは掛け算のほうが足し算よりも優先的に計算されるというルールがあるためです。
(2 + 3) * 4
こうした場合は20になります。()の中身が掛け算よりも優先されるからです。

プログラミングでもこのように演算子には優先順位があります。

 

といっても義務教育の算数、数学の範囲で「既になんとなく知っている」内容なので特に意識して覚えなくてもいいとは思います。

よく使うbooleanを返す演算子からいきましょう(あまり使わないものについては今回説明しません)

■同値演算子

同値演算子は「二つの内容が等しいかどうか」を確認する演算子です。
等しい場合はtrueを、等しくない場合はfalseを返します。

JavaScriptの本当にややこしいのはこの同値演算子が2種類あって、地味に動きが違うことです。

===は型変換しないで比較します。
==は型変換して比較します。

わかりづらいので例を示します。

●例1
var val1 = 1;
var val2 = 1;
この状態で
val1 == val2 →true
val1 === val2 →true

これはいいと思います。

==は型変換をした上での比較をするので、型がちがってもtrueになる場合があります。

●例2
var val1 = 1;
var val2 = “1”;
この状態で
val1 === val2 は数字型の1と文字列型の1を比較しているのでfalseになりますが、
val1 == val2 は型変換して比較するのでtrueになります。

さらにもっと乱暴な例で
var val1 = 1;
var val2 = true;

このときにval1 == val2はtrueとfalseどちらでしょうか。

正解はtrueです。同値演算子==を利用した場合、1 と true は等しいということになります。
というのもbooleanを数字型に型変換した場合、false→0、true→1なので、
trueを1に変換した後で比較をしているので
var val1 = 1;
var val2 = true;
の場合
val1 == val2 →true
になります。型変換しない===では
val1 === val2 →false
です。

このように、一言で同値演算子といっても動きがかなり異なります。
暗黙の型変換は意図しないバグにつながることが多いので、明確な理由が無い限り
同値演算子は===を利用推奨です。

■比較演算子

<,<=,>,>=ですね。
算数とかでやったのと変わりません。

3 < 5 →true
5 < 5 →false
5 <= 5 →ture

です。

基本的には < と >= とを切り替えればtrueとfalseが切り替わり、どちらもfalseといったことは無いです。
3 < 5はtrueですし、
5 >= 5はfalseです。

ただし、JavaScriptの暗黙の型変換で < と >= を入れ替えてもfalseになる場合があります。
とはいっても先ほど書いた同値演算子ほど実際にコード書いてると気に気にすることはほとんど無いので、豆知識です。

1 > ‘x’
1 <= ‘x’

これはどちらもfalseになります。
というのも’x’を型変換するとNaN(Not a Number)です。
そのため、1と比較ができず常にfalseになります。

■論理演算子

これもちょいちょい良く出てきます。
not,and,orですね。

書き方としては
not→!
and→&&
or →||
です。

先ほど同値演算子で等しいかどうかの比較は
a == b
a === b
と書きましたが、notをつけると
a != b
a !== b
と書きます。

そのため
3 === 5 →false
3 !== 5 →ture
となります。

&&と||はこんな風に使います。

3 === 5 && 5 === 5
3 === 5 || 5 === 5

&&を利用した場合、左側と右側両方がtrueでないとtrueになりません。
||を利用した場合、左側と右側のどちらか一方がtrueであればtrueになります。

どちらもちょっとサボり癖があり、falseになることがわかった瞬間判定をやめます。
つまり、&&の場合、左側を確認してfalseであれば右側がどうであれfalseになるので右側の判定はしません。
||も同様で、左側を確認してtrueであれば右側がどうであれtrueなので右側の判定を行いません。

JavaScriptの場合、論理演算子の返り値がbooleanにならない場合があります。

例えばこういったことが可能です
var a = 0 && 1;
document.write(a); →a = 0はtrueでないので、a = 0で処理が終わり、0が出力されます。

var a = 0 || 1;
document.write(a); →a = 0はtrueで無いので、a = 1の処理も行うため、1が出力されます。

ただ、他の言語だと基本booleanを返すことがほとんどなので、こういった使い方はしないほうが無難です。
こんなの初見で見たら「何してんの、、、?」って面くらいます。。。

■算術演算子

ここは算数とか数学でおこなっているのでサクッと行きます。
四則計算は+,-,*,/であらわします。
割り算のあまりは%です。

ループ変数で使った++(インクリメント)は1プラスする、
–(デクリメント)は1マイナスするです。

このインクリメントとデクリメントは変数の先につけるか後につけるかで若干動きが異なります。

var a = 10;
document.write(a++); →出力結果は10

var b = 10;
document.write(++b); →出力結果は11

なんとなく判る気もしますが、
変数の後にインクリメントをつけた場合、処理を行った後に+1します。
変数の前にインクリメントをつけた場合、処理を行う前に+1します。

そのため、aは10が出力され、bは11が出力されます。

デクリメントも同様です。
とは言ってもループ変数に使う場合のインクリメントは
for(i = 0; i<10; i++){
document.write(i);
}
でも
for(i = 0; i<10; ++i){
document.write(i);
}
でも動きは変わりません。
見た目的に上のほうがプログラマーは見慣れているので上で書きましょう。

基本といえばこんなところでしょうか。
3項演算子とかほかにも挙げれば色々ありますが、そういったものはおいおい覚えていけばいいでしょう。

では今回はこの辺でー

コメント

タイトルとURLをコピーしました