No.1 比較

今回は、比較についてやっていこうと思います。

JavaScriptの比較演算子

比較演算子は評価式や比較の論理演算で使われる書式です。
次のリストのような書式の両辺に比較したい対象を書きます。
いずれも、trueかfalseで判定されます。

• == (イコール)
• != (ノットイコール)
• === (厳密なイコール)
• !== (厳密なノットイコール)
• > (より大きい)
• >= (以上)
• < (より小さい)
• <= (以下)

イコールとノットイコール

== はイコールを判定します。つまり値が同じかどうかを調べます。

 3  ==  3
"3" ==  3
 3  == '3'

これらは、全てtrueです。
１つ目は、両辺とも数値の3です。
２つ目と３つ目は、両辺とも３ですが、文字列と数値で型が違います。しかしそれでもtrueになります。
なぜなら == だと両辺が同じ型でなければ適切な型に変換をして判定をしているからなのです。

!= はノットイコールで、両辺が等しくないならばtrueが返ってきます。

 3 !=  4
 3 != '5'
 3 != '3'

これは、上の２つはtrueですが最後はfalseです。
というもの != の場合も == のときと同様に両辺を適切な型に変換されているので、falseになるのです。

=== と !== は先ほどやった==(イコール)と!=(ノットイコール)より厳密に比較を行います。
厳密に比較するとは、両辺の型の変換を行わないで判定することです。
つまり、両辺の型まで厳密に比較を行うということです。

 3  ===  3
 3  === '3'
'3' !==  3
 3  !==  3

１つ目と３つ目は、trueで、２つ目と４つ目は、falseです。
== や != と === や !== の違いは、わかりましたか？
== と != は型までの厳密な比較は行わなくて、=== と !== は型まで厳密な比較を行うということです。

大小の比較

大小の比較には、>、>=、<、<= を使います。

• > は左辺が右辺より大きい場合
• >= は左辺が右辺より大きいまたは等しい場合
• < は左辺が右辺より小さい場合
• <= は左辺が右辺より小さいまたは等しい場合

この上記の場合では、すべてtrueが返ってきます。
>= や <= は数学のときに習った ≧ や ≦ を横に並べて書いたものです。
言葉ではわかりにくかったかもしれないので、念のためにtrueが返ってくる例を書いておきます。

4 > 3
4 >= 3
3 >= 3
3 < 4
3 <= 4
3 <= 3

論理演算

論理演算子の&&と||に触れていきたいと思います。

&&と||

ざっくりと説明をすると、2つの項目を評価したときに
&&は、両方がtrueの場合にtrueを返します。
||は、どちらかがtrueであればtrueを返します。
このように、論理演算子では、基本的に真偽 (論理) 値を用います。そのような値があると真偽値を返します。
しかし && および || 演算子は、実際には指定された値の一方の値を返します。
そのため、非真偽値とともに論理演算子が使われると非真偽値を返します。
&&演算子の例です。

1
2
3
4
5
6
7

var e1 =  true && true;     // t && t は true を返す
var e2 =  true && false;    // t && f は false を返す
var e3 = false && true;     // f && t は false を返す
var e4 = false && (3 == 4); // f && f は false を返す
var e5 = "Cat" && "Dog";    // t && t は Dog を返す
var e6 = false && "Cat";    // f && t は false を返す
var e7 = "Cat" && false;    // t && f は false を返す

||演算子の例です。

1
2
3
4
5
6
7
8

var o1 =  t
 line="1"rue || true;     // t || t は true を返す
var o2 =  true || false;    // t || f は true を返す
var o3 = false || true;     // f || t は true を返す
var o4 = false || (3 == 4); // f || f は false を返す
var o5 = "Cat" || "Dog";    // t || t は Cat を返す
var o6 = false || "Cat";    // f || t は Cat を返す
var o7 = "Cat" || false;    // t || f は Cat を返す

||の例の5行目を見てください。
ここには、&&と||のちょっとした特徴があります。
それは、評価される順番です。

&&と||の評価する順番は、１つ目の値を評価して２つ目を評価するというのが基本です。
&&の特徴は、１つ目がfalseだと２つ目を評価せずに、１つ目を返します。
なぜなら、&&が両方がtrueでないとtrueを返さないので、１つ目がfalseの時点で全体がfalseと決まるからです。
この場合は、２つ目に関係なく決まるので、２つ目の評価をしないのです。

||の特徴は、１つ目がtrueだと２つ目を評価せずに、１つ目を返します。
なぜなら、||がどちらかがtrueであればtrueを返すので、１つ目がtrueの時点で全体がtrueと決まるからです。
この場合は、２つ目に関係なく決まるので、２つ目の評価をしないのです。
また、裏を返していうと、２つ目を評価するケースは、１つ目がfalseの場合だけです。

比較式による初期化

先ほどの||の特徴を利用して、比較式による変数の初期化をみていきたいと思います。
まずは、下記のコードをみてください。

1
2
3
4
5
6
7
8

function init(obj) {
    var data = obj || {};
    if (data.name) {
        return true;
    }
    return false;
}
init(null);     // false

この関数の1行目では、objに値がセットされていない場合に、空のオブジェクトをセットしています。 なぜこれで初期化できるの?って思うかもしれないのでよく見ていきましょう。
２行目に||演算子が使われています。
実は、ここに先ほど紹介した||の評価される順番の特徴がうまいこと使われているのです。
これを初期化に利用しているのです。

２行目の右辺のところは実は、こうなっています。

1

null || {}

ここでは、nullは、評価された際はfalseになり２つ目に指定している空のオブジェクトが返ってきます。 このように初期化をしているのです。 この操作をしないで、いきなり、obj.name というふうに書いてしまうと、objにnullやundefinedが渡されたときに、エラーが発生してスクリプトが泊まってしまいます。 それを避けるためにこのようにしているわけですね。

今回はここまで。 次回は、条件分岐と反復処理についてやります。 どうぞ、お楽しみに！！！