typeof で型を調べる

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • typeof 値 は型名を小文字の文字列で返します、戻り値は 8 種類 ("number" "string" 等)
  • typeof null は "object" (有名な落とし穴)、配列も "object" です
  • 最小例は function typeName(v) { if (v === null) return "null"; if (Array.isArray(v)) return "array"; return typeof v; }

typeof で型を調べる とは

typeof 演算子で値の型名を取り出し、引数の型を文字列で返す。本レッスンでは、typeof で型を調べる の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

typeof で型を調べる

JavaScript は 動的型付け の言語で、変数に入る値の型はあとから自由に変わります。これは便利な反面、「いま手元にある値はいったい何者だろう」を確かめたいシーンが頻繁にあります。そんなときに使うのが typeof 演算子です。typeof は値を 1 つ受け取って、その型名を 小文字の文字列 で返します。返ってくるのは "number"、"string"、"boolean"、"undefined"、"object"、"function"、"symbol"、"bigint" の 8 種類です。

ポイント typeof は値を実行時にチェックする最も基本的なツールです。

基本の使い方

typeof は変数の前に書くだけで使えます。括弧は付けても付けなくても構いません。たとえば typeof 42 は "number" を返し、typeof "hi" は "string" を返します。typeof true は "boolean" で、関数を渡すと "function" です。null は歴史的な理由で "object" となるので注意が必要です。これは JavaScript の有名な落とし穴の 1 つです。

JavaScript

console.log(typeof 42); // "number" console.log(typeof "hi"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" ← 歴史的バグ console.log(typeof [1, 2]); // "object" console.log(typeof (() => 1)); // "function"
値typeof の結果補足
42"number"整数も小数も同じ
"hi""string"クォート種別問わず
true"boolean"false も同じ
undefined"undefined"未代入もこれ
null"object"歴史的バグで "null" ではない
[1, 2]"object"配列も "object"
{ a: 1 }"object"普通のオブジェクト
() => 1"function"関数だけ別扱い
42n"bigint"BigInt リテラル
Symbol()"symbol"Symbol 型

注意 typeof null は "null" ではなく "object" です。null 判定は別途 value === null で行います。

配列とオブジェクトの違い

配列もオブジェクトも typeof ではどちらも "object" になります。配列か判別したいときは Array.isArray(value) を使うのが定番です。typeof は プリミティブ型を見分ける のは得意ですが、参照型を細かく分けるのは苦手だと覚えておきましょう。

JavaScript

const items = [1, 2, 3]; const user = { name: "なお" }; console.log(typeof items); // "object" console.log(typeof user); // "object" console.log(Array.isArray(items)); // true console.log(Array.isArray(user)); // false

動きを追ってみる

typeof がどのように分岐に使われるかをフロー図にすると次のとおりです。引数の型を順番に判定し、最初にマッチした型を返すというパターンが定番です。

diagram (will load when visible)

判定の優先順位は次のとおりです。

  • まず value === null で null を別扱い (typeof だと "object" になってしまう)
  • 次に Array.isArray(value) で配列を別扱い
  • 残りは typeof value の結果をそのまま使える

ヒント switch (typeof value) と組み合わせると、分岐が読みやすくなります。

よくある間違い

1 つ目は typeof null を "null" だと信じてしまうことです。これは 25 年以上前のバグが互換性のために残っているもので、null 判定は value === null を使います。2 つ目は宣言していない変数を typeof に渡したときの挙動です。typeof undeclared は エラーにならず "undefined" を返します。他の演算子では ReferenceError になるのに、typeof だけは安全に未宣言を扱える便利な性質を持ちます。3 つ目は関数も「オブジェクトの一種」だからと "object" を期待してしまう間違いです。typeof fn は "function" になります。

実務での使いどころ

実務ではユーザー入力やライブラリから渡ってきた値の型をチェックする場面でよく使います。たとえば API から取得した値が number か string かで処理を分けたり、引数が function でなければ早期 return するガードに使ったりします。typeof は軽量で副作用のない演算子なので、ホットなコードパスに置いてもパフォーマンスの心配はほぼ要りません。

補足 型がもっと複雑な場面では TypeScript の出番ですが、まずは JavaScript の typeof で十分戦えます。

この章のポイント

ここまでの要点 typeof は 8 種類の文字列を返す。null と配列は "object" になるので、value === null と Array.isArray(value) で別扱い。未宣言の変数は typeof だけが安全に "undefined" を返す。

やってみよう

値を 1 つ受け取り、その値の 基本的な型名 を文字列で返す関数 typeName を作ってください。手順は次のとおりです。

  1. function typeName(value) { ... } で関数を定義する
  2. value === null のときは "null" を返す (typeof より先に判定)
  3. Array.isArray(value) のときは "array" を返す
  4. それ以外は typeof value をそのまま返す
  5. テストで null 配列 数値 文字列 などのケースが全部 pass するか確認する

typeof null が "object" を返す落とし穴と、Array.isArray を組み合わせるのがコツです。テストケースを 1 つずつ通していきましょう。

よくある質問

Q. typeof null が 'object' になるのはなぜ？

A. JavaScript 初期実装のバグが互換性のため残った仕様です。null 判定には typeof ではなく value = null を使ってください。配列も typeof は 'object' になるため、Array.isArray(value) で判定するのが定石です。

Q. typeof と instanceof の使い分けは？

A. typeof はプリミティブ（string/number/boolean/...）の判定向け、instanceof はクラス継承の判定向けです。例えば new Date() の判定は date instanceof Date が正解で、typeof date は 'object' しか返してくれません。

Q. TypeScript なら typeof は不要ですか？

A. 型が静的に決まる場面では typeof は不要ですが、ランタイムで any や unknown を絞り込むときには現役です。typeof x = 'string' で型ガードが効き、以降は string として扱えます。型ガードを書くと TypeScript が型を狭めてくれます。

次のレッスン

次は 文字列を数値に変換 で、typeof 演算子で値の型名を取り出し、引数の型を文字列で返す を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. typeof の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. typeof とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

要件

  1. value === null のときは "null" を返す
  2. Array.isArray(value) のときは "array" を返す
  3. それ以外は typeof value をそのまま返す

入出力例

test-cases.txt

typeName(42) → "number" typeName("hi") → "string" typeName(true) → "boolean" typeName(null) → "null" typeName([1,2]) → "array" typeName({"a":1}) → "object"

ヒント

main.js
main.js
学習モード

メモ

typeof で型を調べる

⌘S で保存