データ型まとめ — typeof と判定の早見表

JavaScript で扱う値は、文字列・数値・真偽値・配列・オブジェクト・null・undefined・Map・Set と多岐にわたります。実務では、フォームやサーバーから届いた値が期待した型かどうかを確かめてから処理を進めます。

この記事では、それらを型という 1 つの観点で整理し、typeof の結果と、型ごとの正しい確かめ方をまとめます。

型は 7 つのプリミティブと Object に分かれる

型が分かると、その値に対して何ができるかが決まります。文字列なら length や slice が使え、数値なら計算ができ、配列なら push が使えます。

逆に、届いた値の型を取り違えたまま処理を進めると、undefined や NaN が紛れ込んだことに気づかないまま、処理が最後まで進んでしまいます。

JavaScript の値は、プリミティブ（数値・文字列・真偽値・null・undefined・symbol・bigint の 7 つ。オブジェクトや配列ではない値）と Object（プロパティを持つ値。配列・Map・Set もここに含まれる）に分かれます。

この講座で扱ってきたのは、プリミティブのうち前の 5 つと Object です。

残る 2 つのうち symbol（重複しない一意のキーを作るための値）は特殊なキーを作る場面で、bigint（非常に大きな整数を専用に扱うための値）は Number では正確に表せない桁の整数を扱う場面で使います。どちらもこの講座の範囲では登場しないので、名前と位置づけだけ押さえておけば十分です。

型を調べる演算子が typeof です。値の前に書くと、型の名前を文字列で返します。

返る文字列は決まっていて、"string" "number" "boolean" "undefined" "symbol" "bigint" "object" "function" の 8 種類です。"function" は関数を渡したときだけ返る結果で、関数は次のカテゴリで扱います。

console.log(typeof "ORD-6033");             // string
console.log(typeof 9800);                   // number
console.log(typeof true);                   // boolean
console.log(typeof undefined);              // undefined

console.log(typeof { orderId: "ORD-6033" });  // object
console.log(typeof [1, 2]);                   // object

// null もプリミティブだが typeof は object を返す
console.log(typeof null);                   // object

いろいろな型が混ざった 4 つの値に typeof を掛けて、返る文字列を確かめます。values は宣言済みです。

① 4 つの値の型を 1 行ずつ表示してください。

② 4 つの型を「, 」でつないで 1 行で表示してください。

③ ② で並べた型から重複を取り除いて、型の種類数を表示してください。

（正しく実行できれば解説が表示されます）

typeof が object を返す 3 つ — null と配列とオブジェクト

サーバーから届いた値が「配送先オブジェクト」なのか「まだ選ばれていない null」なのか「商品の配列」なのかで、次にする処理は変わります。ところが typeof はこの 3 つに同じ "object" を返すので、判定にそのまま使えません。

typeof null が "object" を返すのは、JavaScript の最初期からある動作です。仕様上の誤りとして知られていますが、直すと既存のコードが壊れるためそのまま残っています。

null かどうかは value === null で直接調べます。

配列かどうかは Array.isArray(value) で調べます。配列を渡したときだけ true を返すので、オブジェクトや null と区別できます。

この 2 つを先に除けば、残った "object" が「配列でも null でもないオブジェクト」です。

const shipping = null;
const cart = ["マウス"];
const order = { orderId: "ORD-6033" };

// typeof は 3 つとも同じ結果を返す
console.log(typeof shipping);      // object
console.log(typeof cart);          // object

// null は === で直接調べる
console.log(shipping === null);    // true

// 配列は Array.isArray で調べる
console.log(Array.isArray(cart));  // true
console.log(Array.isArray(order)); // false

// 配列でも null でもないオブジェクトかどうか
console.log(typeof order === "object" && order !== null && !Array.isArray(order));  // true

null を先に除いてから中身を読む

typeof value === "object" だけを条件にして中身を読むと、value が null のときに TypeError で止まります。null は typeof では素通りしてしまうので、value !== null を先に確かめるか、value?.city のようにオプショナルチェーンを挟みます。

API から届いた応答オブジェクトの各項目を、型で分類します。response は宣言済みです。

① 4 項目の型を「キー: 型」の形で 1 行ずつ表示してください。

② items と coupon が配列かどうかを「キー: 判定」の形で表示してください。

③ shipping が null かどうかを表示してください。

④ coupon が「配列でも null でもないオブジェクト」かどうかを、3 つの条件をつないだ式で表示してください。

文字列を数値として扱えるか — Number と Number.isNaN

ここまでは typeof で型そのものを見分ける方法を扱いましたが、型がわかっても中身が期待どおりとは限りません。フォームから届く数量や金額は、見た目が数字でも型は文字列です。計算に使う前に「数値として扱えるか」を確かめないと、"12px" のような値がそのまま計算に流れて NaN を生みます。

ここでは型そのものではなく、変換できるかどうかを調べます。

Number(input) で変換し、結果が NaN かどうかを Number.isNaN(変換結果) で調べる方法は型変換の記事で扱いました。ここで型の判定と切り分けたいのは、これは型の確認ではなく中身の確認だという点です。

"9800" も "abc" も typeof はどちらも "string" で、数量として使えるかどうかは型からは分かりません。

落とし穴は空文字列です。Number("") は NaN ではなく 0 を返すため、未入力のフォームが「数量 0 の有効な入力」として通ってしまいます。

空文字列を弾きたいときは、変換の前に input !== "" を確かめます。

console.log(Number("9800"));               // 9800
console.log(Number("abc"));                // NaN
console.log(Number(""));                   // 0（NaN ではない）

// 変換した結果が NaN かどうかを調べる
console.log(Number.isNaN(Number("abc")));  // true
console.log(Number.isNaN(Number("9800"))); // false

// 空文字列は 0 として通ってしまう
console.log(Number.isNaN(Number("")));     // false

フォームから届いた 4 つの入力が、数量として使えるかどうかを判定します。inputs は宣言済みです。

① 4 つを数値に変換した結果を「, 」でつないで表示してください。

② 変換した結果が NaN でないかどうかを、入力とあわせて「入力: 判定」の形で 1 行ずつ表示してください。

③ 未入力を弾く条件を足すと、空文字列の判定がどう変わるかを、条件 1 つの場合と 2 つの場合で並べて表示してください。

判定の使い分け — 早見表

型を確かめる書き方は 1 つではありません。typeof で足りる型と、typeof の結果からさらに絞り込む必要がある型があり、文字列の中身が数値かどうかは型とは別の確認です。調べたいことから書き方を選びます。