JavaScript入門の基礎的な内容について引き続きみていきましょう。
すでに少し他のところで触れていることでもありますが、ここでは二つの等価演算子について扱います。
等価演算子には、「==」と「===」の2種類あります。イコールが2つの方を通常、等価演算子(equality operators)といい、イコールが3つの方を厳密等価演算子(strict equality operators)であるとか同値演算子といいます。この二つの違いについて、ここではみていこうと思います。
等価演算子と同値演算子
では2つの等価演算子についてみていきましょう。
これに触れる前に、falsyな値を復習も兼ねて見ておきましょう。
こういうものがありました。
- 空文字(””)
- 数値の0、NaN(Not a Number)
- null、undefined
JavaScriptではこれらの値をfalseとみなしますが、これらを絡めて同値演算子についてみて行こうと思います。
次のような簡単なコードで試していきます。
var a;
a = 10;
if (a) {
console.log('変数は定義されています。');
} else {
console.log('変数は定義されていません。');
}
変数aを宣言して、それに10という値を代入します。if-else文を使って、このaがtrueである場合とfalseである場合に分けて表示を分岐させています。
先ほどのfalsyな値以外のものは全てture扱いです。
ここではaに数値が代入されていますから、実行すると当然ここはtrueになって、次のようにJavaScriptコンソールには表示されます。
このコードを次のように変更してみます。
var a;
if (a) {
console.log('変数は定義されています。');
} else {
console.log('変数は定義されていません。');
}
変数を宣言しているだけで、上のコードとは違って数値を代入していません。
これを実行すると次のようになります。
これはfalsyな値ということになります。
では、次のように変えてみたらどうでしょう?
var a;
a = 0;
if (a) {
console.log('変数は定義されています。');
} else {
console.log('変数は定義されていません。');
}
変数に0を代入しています。
これは数値を定義しているにも関わらず、falsyな値の0なので「定義されていません」の方が表示されることになってしまいます。
これは処理としてちょっと見通しが悪いので、次のように論理演算子を使って条件式の部分を変更します。
var a;
a = 0;
if (a || a === 0) {
console.log('変数は定義されています。');
} else {
console.log('変数は定義されていません。');
}
この場合、条件式の前半部分はfalseとなり後半部分がtureになります。ここはor演算子(||)なので条件式全体としてはtureになります。
したがって、ここでは「変数は定義されています。」と実行されることになります。
同値演算子(===)
ここでイコールが3つの同値演算子を使いました。
この「===」の演算子の両側はデータ型が同じでないと同値と判定されません。
次のようなコードを見てみましょう。
var a;
a = 10;
if (a === '10') {
console.log('演算子の左右の値と同じ値と判定します。');
}
このコードを実行しても、JavaScriptコンソールには何も表示されません。
これは同値演算子「===」が左側の値は数値型、右側の値は文字列型と判定しているためです。このように同値演算子「===」はデータ型を厳密に評価して比較します。厳密等価演算子と言われるのもそのためです。
等価演算子(==)
このコードの同値演算子「===」を等価演算子「==」に変えてみましょう。
var a;
a = 10;
if (a == '10') {
console.log('同じ値と判定します。');
}
こちらを実行すると、次のように表示されます。
等価演算子「==」は、数値としての数字も文字列としての数字も同じと判定するためにこのような違いがあります。
まとめ
ここではJavaScriptの基本的な知識として、等価演算子(==)と同値演算子(===)を扱いました。
等価演算子(==)は左右のデータの型の強制をして、文字列型でも数値型でも同じ数字なら同じものとみなすのに対して、同値演算子(===)はデータ型を厳密に区別して判定します。
この二つの違いをしっかり理解しておきましょう。