―令和元年のある日、とあるぽっぽこエンジニアが、先人たちのコードを読んでいて「？？」となったことがあったらしい。
「データ型の判定で、ここではtypeofじゃなくてObject.prototype.toString.call()が使われているけど、なぜだろう…？」
「ていうか、こいつらなにが違うん…？」
これは、そんな疑問からはじまったJavaScriptにおけるデータ型の判定についての探検をメモしたものである。
データ型を判定する方法
-
typeof演算子を使う -
Object.prototype.toString.call()を使う - その他の方法
typeof演算子を使う
JavaScriptの入門書とかによく書かれている方法…？データ型判定だとなんだかよく見るやつ。
ここで注意したいのは、MDN の typeofに書かれているように
構文
typeof 演算子の後に、オペランドを続けて書きます。
typeof operand引数
operand は、オブジェクトもしくは primitive 型を返す式を表します。
なのである。
ほう…「オペランドは、オブジェクトもしくはプリミティブ型を返す式を表す」とな。
ちなみに、JavaScriptのデータ型はオブジェクト型とプリミティブ型の2つに大きくわけられるそう。
プリミティブ型：プロパティとメソッドを持たない単純なデータ（1 や 'Hello' や true）
オブジェクト型：プロパティとメソッドの集まり
な感じ。ざっくり。
typeof演算子で判別したらざっくりとこんな感じ↓↓↓
| 分類 | データ型 | 概要 | 戻り値 |
|---|---|---|---|
| プリミティブ型 | Number | 数値 / NaN / Infinity など | number |
| String | 文字列 | string | |
| Boolean | true / false | boolean | |
| null | null（値が存在しない） | object（※1） | |
| undefined | undefined（未定義） | undefined | |
| Symbol | ユニークな値を返す（識別子として使われる） | symbol | |
| BigInt | 任意精度の整数値 | bigint | |
| オブジェクト型 | Array | 連番が付けられた値の集合 | object |
| Map | キーと値のセットからなる集合 （Objectと違いダイレクトに反復処理できる） |
object | |
| Set | 重複しない値の集合 | object | |
| Object | キーと値のセットからなる集合 | object | |
| Function | function() {} / Math.round など | function（※2） |
※1：nullがなぜ'object'判定に…？それはjsの仕様上、仕方のないことだそうで。
※2：関数オブジェクトだけは特別に'function'を返す。
だが、しかし、MDN曰く
コンストラクター関数はすべて、関数コンストラクターを除いて、常に typeof 'object' になります
とのこと。
new演算子でインスタンス化すると、prototypeを参照できるオブジェクトになるので…って感じ。
よって、以下の判定はすべてobjectになってしまう。
const hoge = new Number(10);
const fuga = new Boolean(true);
const piyo = new Date();
console.log(typeof hoge);
console.log(typeof fuga);
console.log(typeof piyo);
ここでちょっとややこしくなるが、ラッパーオブジェクトという存在に触れておきたい。（メモしておきたいだけ）
たとえば、
console.log('ねこさん');
ってやったら単純に「ねこさん」が返ってくる。そりゃそうだ。
でも、
console.log(new String('ねこさん'));
ってやると、なんて返ってくるのか…？（Google Chrome の console でやるのがおすすめ）
答えは…
String {0: "ね", 1: "こ", 2: "さ", 3: "ん", length: 4, [[PrimitiveValue]]: "ねこさん"}
…はて？
簡単に説明すると
このようにプリミティブ型をnew演算子でインスタンス化すると、プリミティブ型のデータをラップしたオブジェクトとなる。これがラッパーオブジェクト。
なので、console.log(typeof new String('ねこさん'));とかやると、ラッパーオブジェクトの名の通り、objectの判定になる。
よって、以下の判定はすべてobject。
console.log(typeof new String('ねこさん'));
console.log(typeof new Number(10));
console.log(typeof new Boolean(true));
※SymbolとBigIntはそもそもnew演算子を使用できません。
ちなみに
インスタンス化せずに普通に文字列リテラルで生成したときは、プロパティとかにアクセスするときだけ一時的に裏側でStringクラスの機能を持ったオブジェクトでラップする。
そうしてオブジェクトとしての機能へアクセスできるようになるそうだ。
…話を戻して、ここまで見てきて感じたと思うが、typeof演算子での判定ってなんかこう…ふわっとしている………。
配列とオブジェクトの区別できんやん…！とか。
じゃあ、もっと詳しく判定する方法へ。
Object.prototype.toString.call() を使う
Object.prototype.toString()は[object type]（typeはデータ型）といった形で、いわゆるクラスを返してくれる。
よく見るようなサンプルコードで見た方が早いので↓↓↓
const toString = Object.prototype.toString;
toString.call(1234); // [object Number]
toString.call(Infinity); // [object Number]
toString.call(NaN); // [object Number]
toString.call('hoge'); // [object String]
toString.call(true); // [object Boolean]
toString.call([]); // [object Array]
toString.call(new Map()); // [object Map]
toString.call(new Set()); // [object Set]
toString.call({}); // [object Object]
toString.call(function() {}); // [object Function]
toString.call(new String('ねこさん')); // [object String]
toString.call(new Number(10)); // [object Number]
toString.call(new Boolean(true)); // [object Boolean]
toString.call(new Date()); // [object Date]
toString.call(Math); // [object Math]
toString.call(JSON); // [object JSON]
// ECMAScript5 から？
toString.call(null); // [object Null]
toString.call(undefined); // [object Undefined]
call()メソッドは言うまでもないが
function.call(引数)で、引数があたかも自分のメソッドかのようにfunctionを使っちゃうメソッド。（雑）
上記の例だと、注意すべきはNaNくらい…？
あと、自作クラスから生成したインスタンスは[object Object]が返ってくる。
でも考えてみれば当たり前のような………
その他の方法
その他の方法だと、Array.isArray()やisNaN()、Number.isNaN()あたりだろうか。
Array.isArray()
これは単純に、渡された値が配列かどうかを真偽値で返してくれる。
Array.isArray([]); // true
Array.isArray(new Array()); // true
Array.isArray({}); // false
Array.isArray(new Map()); // false
Array.isArray(new Set()); // false
isNaN() 、 Number.isNaN()
NaNの判定といえばisNaN()とか。
じゃあ、isNaN()とNumber.isNaN()の違いってなんでござろう？
isNaN()
これは渡された引数を数値に変換してから判定するメソッド。
引数が数値へと強制変換された後にNaNであるかを確認するため、プログラム上NaN以外の数値を〜ってなところに、うっかり0や1に変換されてしまう空文字列や真偽値を渡してしまうと'false'と返される。要するにNaNじゃない数値だよ〜って判断してしまったりする。
例として以下のような判定がされてしまう………なんてことだ…。
console.log(isNaN(NaN)); // true
console.log(isNaN(undefined)); // true
console.log(isNaN({})); // true
console.log(isNaN('hoge')); // true
console.log(isNaN('')); // false
console.log(isNaN(true)); // false
console.log(isNaN(null)); // false
Number.isNaN()
比べてこちらは、引数が数値型であり、かつ、NaNであるもののみtrueを返すメソッド。
いずれかを満たさなければfalseを返すので、心配なし。
ただ、ES6から新たに導入されたので環境次第では使えない場合も…。
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(undefined)); // false
console.log(Number.isNaN({})); // false
console.log(Number.isNaN('hoge')); // false
console.log(Number.isNaN('')); // false
console.log(Number.isNaN(true)); // false
console.log(Number.isNaN(null)); // false
最後に
結論としては、データ型判定はObject.prototype.toString.call()を使うのがベストかな…
まだまだぽっぽこエンジニアなので、間違いなどあればご教示いただけると幸いです。