JavaScript | 基礎構文:データ型 – typeof 演算子

JavaScript
スポンサーリンク

typeof を一言でいうと

typeof 演算子は、
「この値はどんなデータ型なのか?」を文字列で教えてくれる道具 です。

実行中のコードの中で、

これは数値なのか
これは文字列なのか
これは配列なのかオブジェクトなのか

と確認したくなる場面が出てきます。
そのときに使う「型チェッカー」が typeof です。

ここが重要です。
typeof はデバッグや条件分岐のときに、「今自分が扱っているものの正体」を確かめるための基本ツールです。
値そのものではなく、「型」の情報を文字列で返してくれると理解してください。


typeof の基本的な使い方

書き方と戻り値のイメージ

typeof の書き方はとてもシンプルです。

typeof
typeof 変数
JavaScript

結果は必ず「文字列」で返ってきます。

console.log(typeof 123);      // "number"
console.log(typeof "hello");  // "string"
console.log(typeof true);     // "boolean"
JavaScript

この "number", "string", "boolean" などが、
typeof が教えてくれる「型の名前」です。

変数に対して使う例

変数に対しても同じです。

let x = 10;
let y = "10";

console.log(typeof x); // "number"
console.log(typeof y); // "string"
JavaScript

見た目が似ていても、型は違います。
typeof を使うと、その違いをはっきり確認できます。

ここが重要です。
「見た目が数字でも、typeof"string" と言ったら、それは文字列」。
計算で混乱したときに、typeof で正体を確認する癖をつけるとバグの原因を追いやすくなります。


よく使う基本データ型と typeof の関係

Number, String, Boolean などのプリミティブ型

代表的なプリミティブ型と、その typeof の結果を確認してみます。

console.log(typeof 123);            // "number"
console.log(typeof 3.14);           // "number"
console.log(typeof NaN);            // "number"

console.log(typeof "hello");        // "string"
console.log(typeof `template`);     // "string"

console.log(typeof true);           // "boolean"
console.log(typeof false);          // "boolean"

console.log(typeof undefined);      // "undefined"

console.log(typeof 123n);           // "bigint"

console.log(typeof Symbol("id"));   // "symbol"
JavaScript

ここでのポイントは、
NaN"number"
テンプレートリテラルも "string"
undefined"undefined"
というあたりです。

null と typeof の“有名な罠”

null に対して typeof を使うと、こうなります。

console.log(typeof null); // "object"
JavaScript

これ、直感的にはおかしいですよね。
null は「何もない特別な値」であって、「オブジェクト」ではありません。

これは JavaScript の歴史的な仕様バグ です。
直すと互換性が壊れすぎるため、今でもこのままになっています。

ここが重要です。
typeof null"object" になるのは、JavaScript 側のミスだと覚えておいてください。
null かどうかを判定したいときは、value === null のように比較演算子を使うのが基本です。
typeofnull を見分けようとしてはいけません。


オブジェクト・配列・関数と typeof

Object(オブジェクト)の typeof

ふつうのオブジェクトは、typeof すると "object" になります。

const user = { name: "Taro", age: 20 };
console.log(typeof user); // "object"
JavaScript

{} で作る「名前付きのプロパティを持った入れ物」がこれです。

Array(配列)も typeof すると “object” になる

配列はどうでしょうか。

const arr = [1, 2, 3];
console.log(typeof arr); // "object"
JavaScript

"array" ではなく "object" です。

なぜかというと、
配列も「オブジェクトの一種」だからです。
JavaScript の内部的には、「配列は特別ルールを持ったオブジェクト」として扱われます。

では、配列かどうかを判定したいときはどうするか。
そのときは Array.isArray を使います。

console.log(Array.isArray(arr));   // true
console.log(Array.isArray({}));    // false
JavaScript

ここが重要です。
typeof だけでは「オブジェクト」と「配列」を区別できません。
配列かどうかを知りたいときは、Array.isArray を使う、とセットで覚えておいてください。

Function(関数)の typeof

関数に対して typeof を使うと、少し特別な結果になります。

function hello() {
  console.log("hi");
}

const fn = () => {};

console.log(typeof hello); // "function"
console.log(typeof fn);    // "function"
JavaScript

JavaScript 的には、関数も「オブジェクトの一種」ですが、
typeof だけ特別扱いで "function" を返すようになっています。

「この値が関数かどうか」を知りたいときには、
typeof value === "function" という書き方がよく使われます。


typeof の構文の小さな違い(演算子としての性質)

typeof は「演算子」なので、かっこは必須ではない

typeof は関数ではなく「演算子」です。
そのため、次の 2つの書き方はどちらも可能です。

console.log(typeof 123);     // かっこなし
console.log(typeof(123));    // かっこあり
JavaScript

どちらでも結果は同じです。
ただし、式が複雑になってくるときはかっこを付けたほうが読みやすいので、
typeof (x + y) のように書くこともあります。

基本的には「typeof 値」とそのまま書く形を覚えておけば十分です。

未宣言の変数にも使える(エラーにならない)

typeof の少し特殊で便利な点として、
宣言していない変数に使ってもエラーにならない、という性質があります。

console.log(typeof notDefined); // "undefined"
JavaScript

普通に notDefined を参照すると ReferenceError になりますが、
typeof notDefined"undefined" を返します。

この性質を利用して、

「ある変数や値が存在するか、安全に確認したいとき」

typeof が使われることがあります。

ここが重要です。
typeof は「未宣言の変数」に対しても安全に使える、というのは他の演算子にはない特徴です。
ただし、最近のコードではモジュールやバンドラによってあまり「未宣言の変数」を使うことが減ってきているので、知識として覚えておく程度でかまいません。


typeof を使った実用的な判定パターン

文字列かどうかを判定する

function printUpper(value) {
  if (typeof value !== "string") {
    console.log("文字列を渡してください");
    return;
  }

  console.log(value.toUpperCase());
}

printUpper("hello"); // "HELLO"
printUpper(123);     // "文字列を渡してください"
JavaScript

ここでは、文字列以外が来たときに早めに弾いています。
このように、typeof は「関数の引数チェック」によく使われます。

数値が来る前提だけれど、念のためチェックする

function square(x) {
  if (typeof x !== "number") {
    console.log("数値を渡してください");
    return;
  }

  console.log(x * x);
}

square(5);     // 25
square("5");   // 「数値を渡してください」
JavaScript

"5" のような文字列が混ざると計算結果がおかしくなるので、
こうしたチェックは、特にユーザー入力を扱うときなどに有効です。

関数を渡されたかどうかを判定する

「コールバック関数を渡す」というようなケースでよく使います。

function runIfFunction(fn) {
  if (typeof fn === "function") {
    fn();
  } else {
    console.log("関数ではありません");
  }
}

runIfFunction(() => console.log("実行されました")); // 実行される
runIfFunction(123); // 「関数ではありません」
JavaScript

ここが重要です。
typeof は「値の型に応じて処理を分ける」ための道具です。
条件分岐と組み合わせることで、「期待していない型が来たときに安全側に倒す」というコードを書けるようになります。


typeof に関する「罠」と「割り切りポイント」

null と配列の扱いは typeof だけで見分けない

ここまでに何度か出てきましたが、
次の2つは typeof だけだと判別が曖昧になります。

null → typeof すると “object”(仕様バグ)
配列 → typeof すると “object”(オブジェクトの一種だから)

つまり、両方とも "object" です。

なので、

「これは null か?」
value === null で判定する

「これは配列か?」
Array.isArray(value) で判定する

というふうに、typeof 以外の方法と組み合わせるのが大事です。

すべてを typeof で何とかしようとしない

typeof は便利ですが、「何でもかんでも判定できる万能ツール」ではありません。

Date オブジェクト
自作のクラスのインスタンス
DOM 要素

などを区別したいときは、typeof では足りません。

これらの場合は、

instanceof 演算子
Object.prototype.toString.call(value) のような手法
専用のヘルパー関数

など、別の道具を使う必要があります。

ここが重要です。
typeof は「値が number / string / boolean / function / object / undefined / symbol / bigint のどれかをざっくり知る」ためのもの。
それ以上の細かい分類(配列か null か Date かなど)は、typeof だけでやろうとしないほうが混乱しません。


初心者向け:typeof の本質を短くまとめる

最後に、typeof 演算子について本当に押さえておきたいポイントだけを整理します。

typeof は「値の型を表す文字列」を返す演算子。
typeof 123"number", typeof "abc""string" のような結果になる。

typeof null"object" になるのは JavaScript の仕様バグ。
null かどうかは value === null でチェックする。

オブジェクトも配列も typeof すると "object" になるので、
配列かどうかは Array.isArray(value) で見分ける。

関数に対しては typeof value === "function" で判定できる。
未宣言の変数にも typeof は安全に使えて "undefined" を返す。

ここが重要です。
typeof は、「今自分が握っている値が何者なのか」を確認するためのライトのようなものです。
計算や条件分岐で違和感を覚えたときに、console.log(typeof 値, 値) と一緒に出してみる癖をつけると、
バグの正体にたどり着くスピードが一気に上がります。

もしよければ、次のような小さな練習をしてみてください。

const values = [
  123,
  "123",
  true,
  null,
  undefined,
  { a: 1 },
  [1, 2, 3],
  () => {},
  10n,
  Symbol("id"),
];

for (const v of values) {
  console.log(v, "=>", typeof v);
}
JavaScript

これを実行して、

どれが “number” で
どれが “string” で
どれが “object” で
どれが “function” なのか

自分の目で確認してみてください。
その体験が、「typeof が実際に何を返してくるのか」という感覚を、かなりはっきりさせてくれるはずです。

タイトルとURLをコピーしました