定義と使い方

typeof演算子は
オペランドのデータ型を文字列として返します。

この演算子は、変数や値のデータ型をチェックするために使用されます。

基本の例

JavaScript 
let a;
console.log(typeof a); // 出力: "undefined"

console.log(typeof true); // 出力: "boolean"
console.log(typeof 42); // 出力: "number"
console.log(typeof "Hello"); // 出力: "string"

この例は、typeof演算子が与えられた値のデータ型を示す文字列を返す方法を示しています。返される値は常に"undefined"、"boolean"、"number"、"string"など、JavaScriptであらかじめ定義された型名の文字列です。

typeof演算子の形式は次のとおりです。

構文

JavaScript 
typeof operand // operandはオペランドを意味します

operand

データ型を判別したい変数や値です。
より正確に言うと、返されるデータ型を確認したいオブジェクトやプリミティブ（primitive）データ値を表す式です。

この式はtypeof演算子の右側に位置し、typeof演算子はこの式を評価してその値のデータ型を判別し、結果を文字列として返します。operandは変数、定数、リテラル値、関数呼び出しなどが該当します。

簡単な例を通して説明します。

JavaScript 
let x = 42;
let y = "Hello";
let z = {key: "value"};

console.log(typeof x); // 出力: "number"
console.log(typeof y); // 出力: "string"
console.log(typeof z); // 出力: "object"

上記の例では、x、y、zはそれぞれ異なるデータ型を持つ変数です。
typeof演算子はそれぞれの変数をoperandとして受け取り、その変数のデータ型を文字列で返します。

まとめると、operandはtypeof演算子の対象となる値または式を指し、その値のデータ型を確認したいときに使用されます。

typeof演算子で確認できるデータ型とその結果

typeof演算子で確認できるデータ型とその結果
データ型結果
number "number"
string "string"
boolean "boolean"
undefined "undefined"
object "object"
function "function"
symbol "symbol"
bigint "bigint"
JavaScript：データ型と結果の例 
/* Numbers */
typeof 24 === "number"
typeof 3.14 === "number"
typeof NaN === "number"

typeof parseInt("10px") === "number"
typeof Number("2") === "number"  
typeof Number("文字") === "number" 

/* Strings */
typeof "コーディング" === "string"
typeof "" === "string"
typeof `template literal` === "string"
typeof "24" === "string"
typeof String(24) === "string"

/* Booleans */
typeof true === "boolean"
typeof false === "boolean"
typeof Boolean(24) === "boolean"

typeof !!24 === "boolean" // 否定(!)を2回使うとBoolean()と同じです

/* Undefined */
var x;
typeof x === "undefined";
typeof undefined === "undefined";

typeof y === "undefined"; // 宣言されていない変数も"undefined"を返します

/* Objects */
typeof {param: 1} === "object";
typeof {} === "object";

typeof [1, 2, 3] === "object"; // 配列も"object"を返します
typeof [] === "object"; // 空配列も"object"を返します

typeof /regex/ === "object"; // 正規表現も"object"を返します

typeof null === "object"; // nullも"object"を返します

/* Functions */
function $() {}
typeof $ === "function";

typeof function () {} === "function";
typeof class ClassName {} === "function";

/* Symbols */
typeof Symbol() === "symbol";
typeof Symbol("foo") === "symbol";

/* BigInts */
typeof 1n === "bigint";
typeof BigInt("1") === "bigint";

typeof演算子で確認する際の注意点

nullの確認

typeof演算子はnullを"object"として返します。これは実際のデータ型であるnullとは異なる点に注意する必要があります。

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

正規表現（RegExp）

typeof演算子は正規表現を"object"として返します。これは正規表現が内部的にオブジェクトとして扱われるためです。

JavaScript 
let regex = /[a-zA-Z]/;
console.log(typeof regex); // 出力: "object"

配列の確認

JavaScriptでは、変数や値が配列かどうかを確認する必要がある場合が多くあります。

配列はデータ型としてはオブジェクトです。つまり、typeof演算子で配列の型を確認すると"object"を返すため、typeof演算子だけでは配列かどうかを正確に判断することはできません。

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

JavaScriptで配列を確認する場合は、Array.isArray()メソッドを使用するのが最も正確です。Array.isArray()メソッドは、渡された引数が配列であればtrue、配列でなければfalseを返します。

JavaScript 
const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

変数自体が宣言されていない場合："undefined"を返

変数自体を宣言していない場合にtypeofを使用しても、例外を発生させずに"undefined"を返します。

JavaScript 
// xを宣言したことがない場合
console.log(typeof x); // "undefined"

データ型がundefinedであることは、宣言された変数に値が割り当てられていないことを意味しており、変数が宣言されていないことを意味するわけではありません。それでも"undefined"を返します。

これは非常に注意すべき点です。
変数が宣言されていなくても、値が割り当てられていない場合と同じように評価されます。これにより、正しくない結果が生じる可能性があります。

変数が宣言されているかどうかを確認する、より安全な方法はtry...catch文を使用することです。

JavaScript 次はtry...catch文を使用した例です。 
/* 値が割り当てられていない変数 x */
let x;

if (x === undefined) {
    console.log("trueと評価されます。");
} else {
    console.log("falseと評価されます。");
}
// 出力: "trueと評価されます。"

/* 宣言されていない変数 y */
try {
    y; // 変数にアクセスを試みる
    console.log('変数は宣言されています。');
} catch (error) {
    console.log('変数は宣言されていません。'); 
}
// 出力: "変数は宣言されていません。"

活用例

実際の開発環境では、jQueryのような外部JavaScriptライブラリが正常にロードされているかを確認する必要がある場合がよくあります。
未定義のグローバル変数に直接アクセスすると通常はReferenceErrorが発生しますが、typeof演算子を使用すれば、エラーを出さずに安全に確認することができます。

以下の例は、jQueryライブラリがページにロードされているかを確認する方法を示しています。

JavaScript 
if (typeof jQuery === "function") {
    console.log("jQueryがロードされて使用可能です。");
} else {
    console.log("jQueryはロードされていません。");
}

説明

  • typeof jQuery === "function"は、jQueryというグローバル変数が存在し、その型が関数かどうかを確認します。
  • jQueryが定義されていなくても、typeofは"undefined"を文字列として返すため、エラーを出さずに条件文を実行できます。
  • jQueryライブラリが正しくロードされていれば、typeof jQueryは"function"を返します。これは、jQueryが基本的に関数として実装されているためです。

この方法は、CDNを通じて外部ライブラリをロードする場合や、jQueryライブラリのコードが必須ではない環境で、依存関係を選択的に確認する際に非常に便利です。

仕様書

typeof演算子仕様書
仕様書
typeof ECMAScript Language Specification
#sec-typeof-operator

ブラウザ互換性

typeof演算子のブラウザー互換性
演算子
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
typeof 1 12 1 1

参考資料

関連項目