【初心者向け】JavaScript等価演算子「==」(イコール2つ)と 「===」(イコール3つ)の違いを整理

スポンサーリンク
JavaScript

JavaScriptで比較をする際に、イコールが二つと三つの比較の方法が存在するところで、そういえば結果が異なるパターン(特にnull,undefined,空文字らへん)の整理をしておきたいと思い、備忘的に共有します。

結論

  • 等価演算子(==)はイコール2つ、厳密等価演算子(==)はイコール3つで表す比較演算子
  • 等価演算子(==)は比較する対象の型が異なる場合には型の変換を試みてから比較する
  • 等価演算子(==)ではnullとundefined、空文字と0はそれぞれtrueを返す
  • オブジェクト型(配列型も同様)の比較では、メモリ上のアドレス(参照値)を見るため、中身が同じでも参照値を揃えないとfalseになる

「==」(イコール2つ)について

名前:等価演算子
書き方:X == Y
特徴:比較対象の型が異なる場合は、型の変換を試みてから比較を行う

等価 (==) – JavaScript – MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality

「===」(イコール3つ)について

名前:厳密等価演算子
書き方:X === Y
特徴:比較対象の型が異なる場合は、常に異なるものと判断する

厳密等価 (===) – JavaScript – MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality

実際に確認

// オブジェクト型の比較のための準備
const  obj1 = {name:'test' , age:99 };
const  obj2 = {name:'test' , age:99 };
const  obj3 = obj1;

// ①等価演算子 (==) 
// 文字列と数値の比較
console.log('1' ==  1);
// true

// booleanと数値の比較
console.log(0 == false);
// true

// nullとundefinedの比較
console.log(null == undefined);  
// true

// nullと空文字の比較
console.log(null == '') 
// false

// undefinedと空文字の比較
console.log(undefined == '');  
// false

// 空文字と0の比較
console.log(0 == '') 
// true

// オブジェクト型の比較
console.log(obj1 == obj2) ;
// false
console.log(obj1 == obj3) ;
// true

// ②厳密等価演算子 (===) 
// 文字列と数値の比較
console.log('1' ===  1);
// false

// booleanと数値の比較
console.log(0 === false);
// false

// nullとundefinedの比較
console.log(null === undefined);  
// false

// nullと空文字の比較
console.log(null === '') 
// false

// undefinedと空文字の比較
console.log(undefined === '');  
// false

// 空文字と0の比較
console.log(0 === '') 
// false

// オブジェクト型の比較
console.log(obj1 === obj2) ;
// false
console.log(obj1 === obj3) ;
// true

終わりに

細かいところですがかなり大きな違いがあるとわかりました。
安全に開発するためには厳密等価演算子を基本は用いるようにしたほうが良いなと思いました!

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

JavaScript
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました