"===" 演算子の意味 ("==" と "===" の違い)

===の意味、"==" と "===" の違いを紹介します。

概要

JavaScriptで === の記述のあるコードをたまに見かける場合があります。この記事では、=== 演算子について紹介します。

意味

=== 演算子は変数の型も含めて同じ値である場合に true となります。

プログラム例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function buttonClick() {
      var value1 = "Penguin";
      var value2 = "Penguin";

      var elem1 = document.getElementById("output1");
      if (value1 == value2) {
        elem1.innerText = "true";
      } else {
        elem1.innerText = "false";
      }

      var elem2 = document.getElementById("output2");
      if (value1 === value2) {
        elem2.innerText = "true";
      } else {
        elem2.innerText = "false";
      }

      var value3 = Number(0.6);
      var value4 = String(0.6);

      var elem3 = document.getElementById("output3");
      if (value3 == value4) {
        elem3.innerText = "true";
      } else {
        elem3.innerText = "false";
      }

      var elem4 = document.getElementById("output4");
      if (value3 === value4) {
        elem4.innerText = "true";
      } else {
        elem4.innerText = "false";
      }

      var value5 = true;

      var elem5 = document.getElementById("output5");
      if (value5 == true) elem5.innerText = "true"; else elem5.innerText = "false";
      var elem6 = document.getElementById("output6");
      if (value5 === true) elem6.innerText = "true"; else elem6.innerText = "false";
      var elem7 = document.getElementById("output7");
      if (value5 == 1) elem7.innerText = "true"; else elem7.innerText = "false";
      var elem8 = document.getElementById("output8");
      if (value5 === 1) elem8.innerText = "true"; else elem8.innerText = "false";
      var elem9 = document.getElementById("output9");
      if (value5 == false) elem9.innerText = "true"; else elem9.innerText = "false";
      var elem10 = document.getElementById("output10");
      if (value5 === false) elem10.innerText = "true"; else elem10.innerText = "false";
      var elem11 = document.getElementById("output11");
      if (value5 == 0) elem11.innerText = "true"; else elem11.innerText = "false";
      var elem12 = document.getElementById("output12");
      if (value5 === 0) elem12.innerText = "true"; else elem12.innerText = "false";

      var value6 = new String("ぺんぎんクッキー");
      var value7 = new String("ぺんぎんクッキー");
      var value8 = value6;
      var elem13 = document.getElementById("output13");
      if (value6 == value7) elem13.innerText = "true"; else elem13.innerText = "false";
      var elem14 = document.getElementById("output14");
      if (value6 === value7) elem14.innerText = "true"; else elem14.innerText = "false";
      var elem15 = document.getElementById("output15");
      if (value6.valueOf() === value7.valueOf()) elem15.innerText = "true"; else elem15.innerText = "false";
      var elem16 = document.getElementById("output16");
      if (value6.valueOf() === value7.valueOf()) elem16.innerText = "true"; else elem16.innerText = "false";

      var elem17 = document.getElementById("output17");
      if (value6 == value8) elem17.innerText = "true"; else elem17.innerText = "false";
      var elem18 = document.getElementById("output18");
      if (value6 === value8) elem18.innerText = "true"; else elem18.innerText = "false";

    }

  </script>
</head>
<body>
  <h1>===演算子のデモ</h1>

  <button onclick="buttonClick();">Exec</button>

  <div>text1 == text2 : <span id="output1"></span></div>
  <div>text1 === text2 : <span id="output2"></span></div>
  <hr />
  <div>text3 == text4 : <span id="output3"></span></div>
  <div>text3 === text4 : <span id="output4"></span></div>
  <hr />
  <div>value5 == true : <span id="output5"></span></div>
  <div>value5 === true: <span id="output6"></span></div>
  <div>value5 == 1 : <span id="output7"></span></div>
  <div>value5 === 1: <span id="output8"></span></div>
  <div>value5 == false : <span id="output9"></span></div>
  <div>value5 === false: <span id="output10"></span></div>
  <div>value5 == 0 : <span id="output11"></span></div>
  <div>value5 === 0: <span id="output12"></span></div>
  <hr />
  <div>value6 == value7 : <span id="output13"></span></div>
  <div>value6 === value7 : <span id="output14"></span></div>
  <div>value6.valueOf() == value7.valueOf() : <span id="output15"></span></div>
  <div>value6.valueOf() === value7.valueOf() : <span id="output16"></span></div>
  <div>value6 == value8 : <span id="output17"></span></div>
  <div>value6 === value8 : <span id="output18"></span></div>
  <hr />
</body>
</html>

解説

ボタンをクリックするとJavaScriptを実行します。

同じ文字列同士の比較処理です。value1,value2 に同じ文字列を代入し、== と === で比較します。
型も値も同じため、== も === もtrue になります。

  var value1 = "Penguin";
  var value2 = "Penguin";

  var elem1 = document.getElementById("output1");
  if (value1 == value2) {
    elem1.innerText = "true";
  } else {
    elem1.innerText = "false";
  }

  var elem2 = document.getElementById("output2");
  if (value1 === value2) {
    elem2.innerText = "true";
  } else {
    elem2.innerText = "false";
  }

同じ値で型が違う変数の比較です。値は同じため、== は true になりますが、 === は型が違うため false になります。

  var value3 = Number(0.6);
  var value4 = String(0.6);

  var elem3 = document.getElementById("output3");
  if (value3 == value4) {
        elem3.innerText = "true";
      } else {
        elem3.innerText = "false";
      }

      var elem4 = document.getElementById("output4");
      if (value3 === value4) {
        elem4.innerText = "true";
      } else {
        elem4.innerText = "false";
      }

boolean型の比較にです。true を代入した変数との比較です。 true との値の比較では同じ値で同じ型のため == === ともに true となります。 1 との値の比較では、値は同じですが、型が異なるため、== は true となりますが、=== は false となります。
false 0 との値の比較は値が異なるため == === どちらの比較も結果は false になります。

      var value5 = true;

      var elem5 = document.getElementById("output5");
      if (value5 == true) elem5.innerText = "true"; else elem5.innerText = "false";
      var elem6 = document.getElementById("output6");
      if (value5 === true) elem6.innerText = "true"; else elem6.innerText = "false";
      var elem7 = document.getElementById("output7");
      if (value5 == 1) elem7.innerText = "true"; else elem7.innerText = "false";
      var elem8 = document.getElementById("output8");
      if (value5 === 1) elem8.innerText = "true"; else elem8.innerText = "false";
      var elem9 = document.getElementById("output9");
      if (value5 == false) elem9.innerText = "true"; else elem9.innerText = "false";
      var elem10 = document.getElementById("output10");
      if (value5 === false) elem10.innerText = "true"; else elem10.innerText = "false";
      var elem11 = document.getElementById("output11");
      if (value5 == 0) elem11.innerText = "true"; else elem11.innerText = "false";
      var elem12 = document.getElementById("output12");
      if (value5 === 0) elem12.innerText = "true"; else elem12.innerText = "false";

Stringオブジェクトの比較です。オブジェクトの場合は、別のオブジェクトのため、== === は false となります。

      var value6 = new String("ぺんぎんクッキー");
      var value7 = new String("ぺんぎんクッキー");
      var value8 = value6;

      var elem13 = document.getElementById("output13");
      if (value6 == value7) elem13.innerText = "true"; else elem13.innerText = "false";
      var elem14 = document.getElementById("output14");
      if (value6 === value7) elem14.innerText = "true"; else elem14.innerText = "false";

valueOf()メソッドで取得した値は、型も値も同じため、== === どちらもtrueになります。

      var elem15 = document.getElementById("output15");
      if (value6.valueOf() === value7.valueOf()) elem15.innerText = "true"; else elem15.innerText = "false";
      var elem16 = document.getElementById("output16");
      if (value6.valueOf() === value7.valueOf()) elem16.innerText = "true"; else elem16.innerText = "false";

同じオブジェクトでの比較は == === ともに true になります。

      var elem17 = document.getElementById("output17");
      if (value6 == value8) elem17.innerText = "true"; else elem17.innerText = "false";
      var elem18 = document.getElementById("output18");
      if (value6 === value8) elem18.innerText = "true"; else elem18.innerText = "false";