【JavaScript】==と===の違いおよび型のチェック方法

概要

本記事では、JavaScriptにおける比較演算子の==と===の違い、および変数の型をチェックする方法を記載します。

==と===の違い

==と===の違いとしては、簡単に言うと===の方が値だけでなく型まで含めて等しいかをチェックするのに対して、==では暗黙的な型変換により型を合わせた上で等しいかをチェックするという部分になります。下記に具体例を記載します。

# 型が等しい
5 == 5 // true
5 === 5 // true

# 型が等しくない
5 == '5' // true
5 === '5' // false

また、別の記事で記載しておりますがJavaScriptの暗黙的な型変換は少し特殊な変換がなされるため、==を使用した場合には想定外にtrueに判定される時があります。

false == 0 // true
0 == "" // true
"" == false // true
null == undefined // true

暗黙的な型変換についての詳細はこちらを参照。

【JavaScript】暗黙的、明示的な型変換

したがって、JavaScriptのロジックにおける比較演算子は===を使用して厳格にすることが推奨されます。ただし、上記のような仕様を理解して上で==を使用するのは全く問題ないと思います。

型のチェック方法

JavaScriptの型をチェックする1つの方法は、typeofを使用することで、変数の型を返すのでそれを元にチェックすることができます。もう1つは、instanceofを使用することで、変数が指定する型と等しいかをチェックすることができます。それ以外にも型によって使えるものがあったり、typeofとinstanceofが使えるかも異なるので下記を参考にしてください。

String

function isString (value) {
    return typeof value === 'string' || value instanceof String;
}

Number

function isNumber (value) {
    return typeof value === 'number' && isFinite(value);
}

Array

function isArray (value) {
r    return value && typeof value === 'object' && value.constructor === Array;
}

Function

function isFunction (value) {
    return typeof value === 'function';
}

Object

function isObject (value) {
    return value && typeof value === 'object' && value.constructor === Object;
}

Nullとundefined

function isNull (value) {
    return value === null;
}

function isUndefined (value) {
    return typeof value === 'undefined';
}

Boolean

function isBoolean (value) {
    return typeof value === 'boolean';
}

Error

function isError (value) {
    return value instanceof Error && typeof value.message !== 'undefined';
}

Date

function isDate (value) {
   return value instanceof Date;
}

Symbol

function isSymbol (value) {
    return typeof value === 'symbol';
}

まとめ

今回は、==と===の違いや変数の型チェックという基礎的ですが理解していないと予期せぬエラーの原因となる部分を整理しました。特に型チェックの方法は癖がありそうなので、注意したいところです。

参考

JavaScript — Double Equals vs. Triple Equals
https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a

How to better check data types in javascript
https://webbjocke.com/javascript-check-data-types/