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
終わりに
細かいところですがかなり大きな違いがあるとわかりました。
安全に開発するためには厳密等価演算子を基本は用いるようにしたほうが良いなと思いました!
読んでいただきありがとうございました!
コメント