謹んで新年のご挨拶を申し上げます。エンジニアのikkaです。

半年ほどさかのぼりますが、JavaScript案件を後輩エンジニアが担当。（ちなみに、ホエールテックでは、選択可能な状況であれば、TypeScriptを採用するため、JavaScriptを直接編集する機会はあまり多くありません。）

コードレビューをしていたら、等価演算子（==）を使用していた（教えたはずなのに！）箇所がいくつか。今回は、等価演算子（==）ではなく、厳密等価演算子（===）を使いましょう！というお話です。（PHPも同様です！）

==と===は何が違うのか？

等価演算子（==）は、比較に適した型への変換を行なってから等しいかの判定を行います。

厳密等価演算子（===）は、型の変換を行わず、型が違うとその時点で等しくないとされます。

簡単な例を挙げてみます。

console.log(123 == 123);
// true
console.log(123 === 123);
// true

console.log(123 == '123');
// true
console.log(123 === '123');
// false

一見すると==の方が異なる型でも等しいと判定してくれて便利に見えますが、次に示すような、期待した動作にならないことがあります。

厳密な比較をすることはバグ防止になる

「値が1なら、50を加算して出力する」処理を考えてみます。

==で比較すると、値が文字列の’1’でも等しいとされ、50を加算するつもりが文字列の連結になってしまいます。

const a = 1;
const b = '1';

if (isOne(a)) {
    console.log(a + 50);
    // 51
}
if (isOne(b)) {
    console.log(b + 50);
    // 150
}
if (isStrictOne(b)) {
    console.log(b + 50);
    // 出力されない
}

function isOne(val) {
    return val == 1;
}
function isStrictOne(val) {
    return val === 1;
}

後で見直すときに型がわかる

これは副次的な効果なのですが、===で比較しておくと、等しい場合に比較対象と同じ型であることが一目でわかります。

これは後から処理を追加したり、他の人がコードを確認、編集する際に役立ちます。

let c = someFunc();
if (c == 0) {
    // 変数cは文字列の'0'やfalse、null、undefinedかもしれない
}
if (c === 0) {
    // 変数cは数値の0とわかる
}

MDNのドキュメントにも次のように書かれています。

ほとんどの場合、緩い等価性を使用することは推奨されません。厳密な等価性を用いた比較の結果は予測しやすく、型変換がないため、よりすばやく評価できる可能性があります。

おわりに

JavaScriptは動的な型付けの言語ですが、任せきりにしてしまうと、思わぬバグの元になるので注意が必要です。バグに至らなくとも、コードの可読性が落ちてしまうのは間違いないでしょう。

比較を厳密に行うことを基本とし、できることならTypeScriptでデータ型までチェック！

ikka

エンジニア

アプリ開発のすべてを担当しています。
目に見えない処理の美学。ビジネスロジック設計やバックエンド、バッチ処理が得意。
ikkaという名前ではありますが「まあ、いっか」は私の辞書にはございません！

困ったときには、ikkaに相談！（社内評）

おやつとローグライクゲームが好物です。