【JavaScript】 typeof演算子は何を返しているのか？

JavaScriptのtypeof演算子を使用すると、値の型チェックをおこなうことができます。
しかし少しクセが強い演算のため、わかりにくい面があります。

そこで今回は、typeof演算子について解説してみます。

typeof演算子について、簡単に解説します。

typeof演算子は文字列を返す

typeof演算子は、値の型を文字列で返します。

例えば数値に対してtypeof演算を行うと、文字列"number"を返します。
文字列に対してtypeof演算を行うと、文字列"string"を返します。

console.log( typeof 123 ); // "number"
console.log( typeof "abc" ); // "string"

typeof演算子による型チェック

typeof演算子が決まった文字列を返す特性を利用して、値の型チェックをおこなうことができます。

例えば変数が数値（Number型）のとき処理をおこないたいなら、次のようにコードを記述します。

const value = 123;

if( typeof value === "number" ) { /* 処理 */ }

文字列の比較なので、"Number"とか、"NUMBER"などではダメです。

わざわざ文字列比較しなければいけない点に迂遠な印象を受けますが、仕様なので仕方がありません。
構文として覚えておきましょう。

typeof演算子とオブジェクト

そしてオブジェクトに対してtypeof演算を行うと、文字列"object"を返します。

console.log( typeof {} ); // "object"

しかし、関数(functionオブジェクト)は同じオブジェクトなのに、"function"を返します。

console.log( typeof function(){} ); // "function"
console.log( typeof (()=>{}) ); // "function"

なんだか統一感がありませんし、他にも特例なものがありそうで少し使いにくく感じますね。

typeof演算子のアルゴリズムを確認してみると、次表に従って文字列を返しているだけということがわかります。。

それほどパターンは多くないですね。

UndefinedとNull

通常UndefinedとNullのチェックは、typeof演算子を使用しません。

次のように値で直接確認できます。

if( value === undefined ) { /* 処理 */ }
if( value === null ) { /* 処理 */ }

Object

オブジェクトで特例なのは、関数だけのようです。
しかし表をよく見ると、Nullのときも"object"を返しているのがわかります。

つまり、typeof演算子が"object"を返しても、オブジェクトと判断できないということです。
次のようにnullとの比較も必要です。

if( value !== null && typeof {} === "object" ) { /* 処理 */ }

オブジェクトとプリミティブ

上の表ではString型は、"string"と返すことになっています。
ここで勘違いしてはいけないのが、検査対象がプリミティブの時だけだということです。

JavaScriptにはStringオブジェクトというものがあります。
これとは、別だということです。
Stringオブジェクトはオブジェクトなので、typeof演算子は"object"を返します。

console.log( typeof "abc" ); // "string"
console.log( typeof new String("abc") ); // "object"

BooleanオブジェクトとNumberオブジェクトも同じように、"object"を返します。

console.log( typeof new Boolean(true);); // "object"
console.log( typeof new Number(123);); // "object"

なおSymbolとBigIntは、対応するオブジェクトをコード上で生成することができません。
生成されるのは、メソッドを実行するためにプリミティブ値が対応するオブジェクトに変換された時だけです。

そのため、上記のような比較は想定されません。

オブジェクトの種類の確認

型チェックに関連して、オブジェクトの種類を確認するケースが考えられます。
例えば、配列(Arrayオブジェクト)かどうかをチェックしたいときです。

この場合は、instanceof演算子を使用します。

const array = [];
console.log( array instanceof Array ); // true

JavaScript初心者のうちは、typeofかinstanceofか、どちらを使用すればいいのかわかりにくいです。
とりあえず、上の表に当てはまらないときは、instanceofを使用すると覚えておくといいです。

JavaScriptの仕様では、全部で8つのデータ型が定義されています。

typeofは値の型を返す演算子なので上記の表に沿った結果となるべきですが、少しアレンジが加えられています。
上の表に、typeof演算の結果を加えてみます。

赤文字が、本来のデータ型と異なる型名です。

これを見ると、typeof null の演算結果が "object" になるのは奇妙に感じますね。

理由を調べてみると、仕様作成時の記述間違い（仕様バグ）や、当時はオブジェクトの空参照にnullを使っていたので "object" を返すのは理にかなっているなど理由が挙げられていました。

しかしJavaScriptの仕様でtypeofの項目を読むと、typeofが何を目的とした演算子なのかが明記されていません。
書いてあるのはアルゴリズムだけです。

つまりtypeof演算子はデータの型を返しているのではなくて、対象となる値ごとに何らかの文字列を返しているだけと言えます。

深く考えずに、「そういうものなんだ」で納得しておけばいいという話かもしれませんね。