等価演算子

広告

関係演算子の中で等しいかどうかを調べるために使われるのが等価演算子です。

演算子使用例意味
==a == ba と b は等しい
===a === ba と b は同一
!=a != ba は b は等しくない
!==a !== ba は b は同一でない

JavaScriptでは2つの値が等しいかどうか比較するために「==」演算子と「===」演算子が用意されています。どちらの演算子でも対象となる2つの値が等しい場合はtrueを返し、等しくない場合はfalseを返します。また「!=」演算子と「!==」演算子は逆に対象となる2つの値が等しくない場合はtrueを返し、等しい場合はfalseを返します。

次の例を見てください。 

var old = 20;

if (old == 20){
  alert("20歳です");
}else{
  alert("20歳ではありません");
}

変数「old」に代入された値を20と比較します。等しければ「alert("20歳です");」を実行し、等しくなければ「alert("20歳ではありません");」を実行します。今回の場合は等しいため「alert("20歳です");」を実行します。

ではなぜ「==」演算子と「===」演算子の二種類が用意されているかというと、等しいかどうかの判別基準が異なるためです。簡単に言ってしまうと「===」演算子は対象の値が同一かどうかを判別し、「==」演算子は対象の値を比較して等しいかどうかを判別します。

では具体的にどのように判別が行われるのかをそれぞれ確認します。

「===」演算子の比較の手順

「===」演算子には次のように比較が行われます。

データ型が異なる場合は無条件でfalseとなります。またいずれか1つであっても値がNaNの場合もfalseとなります。

対象となる二つの値がどちらも数値、文字列、論理値とデータ型が同じで値も等しければtrueとなります。またどちらもnullの場合、どちらも未定義値の場合もtrueとなります。trueと未定義値の比較はfalseとなります。 

10 === 10           true
"abc" === "abc"     true
true === true       true
10 === "10"         false
NaN === NaN         false
null === null       true
null === undefined  false

対象の値がオブジェクトであった場合、対象となる二つの値が同じオブジェクトを参照している場合だけtrueとなります。次の例を見てください。 

var pref1 = ['東京都', '大阪府', '北海道'];
var pref2 = pref1;

pref1 === pref2    true

変数pref1と変数pref2は同じ1つの配列の値を参照しています。(オブジェクト型の変数の代入については「参照型の値を変数へ代入」を参照して下さい)。このような場合はtrueとなります。 

var pref1 = ['東京都', '大阪府', '北海道'];
var pref2 = ['東京都', '大阪府', '北海道'];

pref1 === pref2    false

変数pref1と変数pref2はどちらも配列の値が格納されており、その配列の各要素の値は同じです。しかし配列の値そのものは別のものですのでこのような場合はfalseとなります。

「==」演算子の比較の手順

「==」演算子には次のように比較が行われます。

データ型が同じ場合は値を比較します。同じ値であった場合はtrueとなります。どちらも同じオブジェクト型の場合には「===」演算子の場合と同じく対象となる二つの値が同じオブジェクトを参照している場合だけtrueとなります。

数値と文字列の場合には、まず文字列を数値に変換した上で比較します。例えば数値の「10」と文字列の「10」を比較する場合には、まず文字列の「10」が数値の「10」に変換されて比較されるためtrueとなります。文字列が数値に変換できなかった場合には「NaN」に変換され条件式は必ずfalseとなります。 

10 == 10          true
"abc" == "abc"    true
true == true      true
10 == "10"        true

どちらかの値だけが論理値だった場合、trueは数値の1に変換されて比較され、falseは数値の0に変換されて比較されます。 

true == 1         true
false == 1        false

nullと未定義値の比較はtrueとなります。 

null == undefined  true

対象の値がオブジェクトの場合には数値または文字列に変換した上で比較が行われます(文字列に変換された場合はさらに数値に変換されます)。変換できなかった場合は条件式はfalseとなります。

どちらかの値がNaNの場合は必ずfalseとなります。NaNとNaNを比較した場合もfalseです。 

NaN == NaN         false

このように「===」演算子と「==」演算子では対象となる値が同じでも結果が同じになる場合もありますし異なる場合もあります。その為、使用する場合には比較するルールをよく理解した上で使用して下さい。

サンプルコード

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

<!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/script12_1.js">
</script>

</body>
</html>

if (null === undefined){
  document.write("<p>null === undefined</p>");
}else{
  document.write("<p>null !== undefined</p>");
}

if (null == undefined){
  document.write("<p>null == undefined</p>");
}else{
  document.write("<p>null != undefined</p>");
}

var pref1 = ['東京都', '大阪府', '北海道'];
var pref2 = pref1;
var pref3 = ['東京都', '大阪府', '北海道'];

if (pref1 === pref2){
  document.write("<p>pref1 === pref2</p>");
}else{
  document.write("<p>pref1 !== pref2</p>");
}

if (pref1 === pref3){
  document.write("<p>pref1 === pref3</p>");
}else{
  document.write("<p>pref1 !== pref3</p>");
}

if (pref1 == pref2){
  document.write("<p>pref1 == pref2</p>");
}else{
  document.write("<p>pref1 != pref2</p>");
}

if (pref1 == pref3){
  document.write("<p>pref1 == pref3</p>");
}else{
  document.write("<p>pref1 != pref3</p>");
}

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

p12-1

( Written by Tatsuo Ikura )