【JavaScript】===（厳密等価演算子）と==（等価演算子）の違い #JavaScript

1.やりたいこと・現在のコード

idを取得してオブジェクト内にあるかどうか比較→ないときにオブジェクトに追加したいです。

先輩からは「==と===は異なる」とアドバイスがありました。

function countContents( id ) {
if ( id in Obj == false ) {
//オブジェクト(Obj)にidが含まれないときは追加する
countObj[id] = id;
	}

2.環境

windows10 バージョン21H2

3.調査

3-1.===（厳密等価演算子）

左右のオペランドを比較して、同じ型で同じ値であるときにtrueを返します。

※オペランド：演算子を使用する対象物を指します。例えばA + B のとき、AとBはオペランドです。

console.log(3150 === 3150); // => true
console.log(3150 === "3150"); // => false

オブジェクトの場合、参照元が別々のオブジェクトだと空のオブジェクトでもfalseになります。

// 例：フルーツのオブジェクトを作成
const objFruit1 = {};
const objFruit2 = {};
// 参照元が異なるのでfalse
console.log(objFruit1 === objFruit2); // => false
// 同じ参照を比較している場合はtrue
console.log(objFruit1 === objFruit1); // => true

3-2.==（等価演算子）

同じデータ型のオペランドを比較する場合は===と同じ結果になります。
※異なる型の値を比較する際に暗黙的な型変換を行います。

console.log(3150 == 3150); // => true
console.log(3150 == "3150"); // => これもtrueになる

他にも、JSPrimerでは以下の挙動について記載がありました。

// "01"を数値にすると`1`となる
console.log(1 == "01"); // => true
// 真偽値を数値に変換してから比較
console.log(0 == false); // => true
// nullの比較はfalseを返す
console.log(0 == null); // => false
// nullとundefinedの比較は常にtrueを返す
console.log(null == undefined); // => true

意図しない挙動を防ぐため、基本的には厳密等価演算子（===）が推奨されています。

異なる型を比較したい場合は明示的に型を合わせるべきです。

3-3.nullとundefinedについて

上記ではconsole.log(null == undefined);とありますが、null=undefinedではないです。
（値がない、という点では同じ。）

項目	内容
null	・代入すべき値が存在しないため、値がない・自然発生しない・リテラル（※）
undefined	・値が代入されていないため、値がない・オブジェクトに存在しないプロパティや配列にない要素にアクセスしたときや、戻り値がない関数の戻り値を取得したときにundefinedになる・変数

※リテラル：ソースコードにべた書きした文字や数字を指します。（例：”太郎”など）

しかし、等価演算子(==)を使用するとundefinedとnullかどうかをチェックするため、trueになります。

3-4.undefinedの例

JavaScriptでは変数を宣言するキーワードとして、const、let、varがあります。

letとvarは初期値がなくても宣言ができます。宣言をしない場合、デフォルト値のundefinedで初期化されます。

var x;
// 「trueです」が実行される
if (x === undefined) {
  console.log('trueです');
}
else {
  console.log('falseです');
}

constは初期値がない場合、エラーが発生します。

//上記コードのvarをconstにするとエラー
Uncaught SyntaxError: Missing initializer in const declaration (at index.html:65:7)

4.最終的なコード

今回はfalseのときに実行する処理を書きたかったため、===（厳密等価演算子）に修正しました。

function countContents( id ) {
if ( id in countObj === false ) {
countObj[id] = id;
	}
}

5.まとめ

=ひとつの違いで暗黙の型変換などの意図しない挙動が起きる可能性があるので、状況に応じて使い分けしていきたいと思います。

6.参考

7.最後に

何かあればご指摘いただけると幸いです。

読んでいただき、ありがとうございました。

【JavaScript】===（厳密等価演算子）と==（等価演算子）の違い

目次