🐕

JavaScript(TypeScript)の一致判定===と==の違い

2022/05/20に公開

業務でTypeScruptを使って一致判定を記述していたところ、===と==どちらでも判定できることに気づきました。ただ、調べたところによると===と==は厳密には違う挙動を示すようです。
まずは、数字の一致判定について調べてみましょう。

数値の一致判定

const left: number = 1;
const right: number = 1;

// trueと表示される
console.log(left === right);
console.log(left == right);

一致判定===と==は同じ挙動を示します。では、文字列の一致判定はどうでしょうか。

const left: string = 'hoge';
const right: string = 'hoge';

// trueと表示される
console.log(left === right);
console.log(left == right);

こちらも同じ挙動になりますね。。では、数字と文字列の一致判定はどうでしょうか。

const left: any = 1;
const right: any = '1';

// falseと表示される
console.log(left === right);
// trueと表示される
console.log(left == right);

こちらは違う挙動を示しました。このことから、===は右辺と左辺の値が等価であるかどうか+右辺と左辺の型が等価であるかどうかを判断していることが分かります。一方==は、右辺と左辺の値が等価であるかどうかのみを焦点に当てて判断していますね。

===はより厳密に判断されていることから厳密等価演算子、==は等価であることのみを焦点に当てて判断していることから等価演算子と呼ばれています。
業務で扱う場合は、基本的に厳密等価演算子を用いる必要がありますね。

こちらは、ブール値と数字においても同じような挙動を示します。

const left: any = true;
const right: any = 1;

// falseと表示される
console.log(left === right);
// trueと表示される
console.log(left == right);

次にnullとundefinedではどうでしょうか。

const left: any = null;
const right: any = undefined;

// falseと表示される
console.log(left === right);
// trueと表示される
console.log(left == right);

厳密等価演算子では、nullとundefinedは型が等価ではないのでfalseと判断されます。(nullはobject型、undefinedはundefined型)一方、等価演算子では、どちらもデータがないという点においては等価なのでtrueと判断されています。

厳密等価演算子===と等価演算子==の違いは以下になります。