はじめに
こんにちは。
JavaScriptの等価演算子には == と === の2つがあります。
この記事では、== と === の違いと、それぞれどのような場面で使うべきかについてまとめます。
=== は型と値の両方を比較する
===（厳密等価演算子）は、型変換を行いません。左右のオペランドの型が異なる場合、その時点で false を返します。
console.log(1 === 1); // true
console.log(1 === "1"); // false
console.log(true === 1); // false
1 と "1" は、値としては「1」に見えますが、型が number と string で異なるため false です。
== は型変換してから比較する
==（等価演算子）は、左右のオペランドの型が異なる場合に型変換を行ってから比較します。
console.log(1 == "1"); // true
console.log(true == 1); // true
console.log(null == undefined); // true
1 == "1" では、文字列 "1" が数値に変換されてから比較されるため、true になります。
null == undefined が true になるのも、== の型変換ルールによるものです。
予期しない結果になる可能性がある
== を使った値の比較では、予期しない動作が起こる可能性があります。
例えば以下のような場合です。
console.log("" == 0); // true
console.log("0" == false); // true
console.log("" == false); // true
console.log([] == false); // true
console.log([] == 0); // true
空文字列 "" は数値に変換すると 0 になるため、"" == 0 は true です。
"0" は数値に変換すると 0、false も数値に変換すると 0 なので、"0" == false も true です。
一方で、=== ならこれらはすべて false になります。
console.log("" === 0); // false
console.log("0" === false); // false
console.log("" === false); // false
console.log([] === false); // false
console.log([] === 0); // false
型が違う時点で false と判定されるため、型変換による予想外の true が起きません。
どう使い分ける？
基本は === を使う
基本的には === を使うべきとされています。
=== を使うと、「型が同じ、かつ値も同じ」場合だけ true になります。先述のような型変換によって起きる挙動を意識していなくても使いやすいです。
x == null の時は == を使用してもよさそう
null == undefined が true になる性質を利用して、null と undefined をまとめて判定するコードを書きたい場合は、x == null という記法が短くて便利です。
if (value == null) {
// value が null または undefined の場合
}
まとめ
-
===は型変換せず、型と値の両方が一致するときだけtrue -
==は型が異なると型変換してから比較する - 基本的には
===を使うのがよい -
nullとundefinedをまとめて判定したい時はx == nullという書き方が便利
お読みいただきありがとうございました。