typeof
このページでは豊富な例を用いてJavaScript（js）のtypeof演算子の使い方を学ぶことができます。
JavaScriptのtypeof演算子はECMAScript標準で定義されている型を表す文字列を返り値として返します。
typeof演算子でプリミティブ（primitive）と判定できる型と関数型はそれぞれ異なる文字列が返りますが、
特別な構造型のオブジェクト（ObjectやArrayなど）は、すべて'object'という文字列が返ることに注意してください。
TL;DR
基本
// typeof演算子の後に型を知りたい値を指定します
const number1 = 100;
const returnValue1 = typeof number1;
console.log(returnValue1);
==> number
// 戻り値・返り値は文字列型（string）
console.log(typeof returnValue1);
==> string
// 文字列
const returnValue2 = typeof 'javascript';
console.log(returnValue2);
==> string
// 真偽値
const returnValue3 = typeof true;
console.log(returnValue3);
==> boolean
// シンボル
const symbol1 = Symbol('JS');
const returnValue4 = typeof symbol1;
console.log(returnValue4);
==> symbol
// 関数
const func1 = function () {
return 'This is a return value.';
};
console.log(typeof func1);
==> function
// オブジェクト
console.log(typeof { name: 'Mengdie' });
==> object
// undefined
console.log(typeof undefined);
==> undefined
// NaN
console.log(typeof NaN);
==> number返り値がobjectとなる例
// 配列
const array1 = ['js', 100];
console.log(typeof array1);
==> object
// Null
console.log(typeof null);
==> object
// Date
console.log(typeof new Date());
==> object型の判定
const string1 = 'FooBarNinja';
const number1 = 3.14;
// falseパターン
if (typeof number1 === 'string') {
console.log('string type');
} else {
console.log('NOT string type');
}
==> NOT string type
// trueパターン
if (typeof string1 === 'string') {
console.log('string type');
} else {
console.log('NOT string type');
}
==> string type
// ArrayやDateオブジェクトなどは戻り値がobjectとなる
// 'array'はtypeof演算子の返り値に存在しない
const array1 = [0, 1, 2];
if (typeof array1 === 'array') {
console.log('Array object');
} else {
console.log('NOT Array object');
console.log(typeof array1);
}
==> NOT Array object
==> object
// instanceofを使用して型確認をする
const array2 = [0, 1, 2];
if (array2 instanceof Array) {
console.log('Array object');
} else {
console.log('NOT Array object');
}
==> Array object関連情報：instanceof演算子の使用方法
解説
基本
typeof演算子は指定した値の型を表す文字列を返り値として返します。
以下がtypeof演算子が返す型の文字列の一覧です。
関数オブジェクト（Function object）とその他のオブジェクト以外は、プリミティブと判定される型です。
| 型 | 返り値 |
|---|---|
| Undefined | 'undefined' |
| 真偽値 | 'boolean' |
| 数値 | 'number' |
| BigInt | 'bigint' |
| 文字列 | 'string' |
| シンボル | 'symbol' |
| 関数オブジェクト | 'function' |
| Null | その他のオブジェクト | 'object' |
出典：typeofが返す事が出来る値(文字列)の一覧表 - MDN web docs
// 数値
const number1 = 0;
const returnValue1 = typeof number1;
console.log(returnValue1);
==> number
// 返り値は文字列型（string）
console.log(typeof returnValue1);
==> string
// 文字列
console.log(typeof 'FooBarNinja');
==> string
// 真偽値
console.log(typeof false);
==> boolean
// シンボル
console.log(typeof Symbol(100));
==> symbol
// 関数
const func1 = () => true;
console.log(typeof func1);
==> function
// オブジェクト
const object1 = { subject: 'math', score: 80 };
console.log(typeof object1);
==> object
// undefined
console.log(typeof undefined);
==> undefined
// NaN
console.log(typeof NaN);
==> number返り値がobjectとなる例
ArrayオブジェクトやDateオブジェクトなどをtypeof演算子に指定すると、'object'という文字列が返り値となります。
これは、newキーワードで作成されうるオブジェクトのほぼすべてに該当します。
'array'や'date'といった文字列をtypeof演算子が返さないことに注意してください。
// 配列
console.log(typeof []);
==> object
// Null
console.log(typeof null);
==> object
// Map
console.log(typeof new Map());
==> object型の判定
if文の条件式でtypeof演算子を使用し、条件分岐を実現することもできます。
typeof演算子は文字列を返すので、比較する対象の型も文字列で表すことに気をつけてください。
また、ArrayオブジェクトやDateオブジェクトなどの特別な構造型に関して、typeof演算子は一律に'object'という文字列を返します。
そのため、このようなオブジェクトを用いて型の判定・確認を行いたい場合は
instanceof演算子
を使用してください。
const boolean1 = true;
const number1 = 0;
// falseパターン
if (typeof boolean1 === 'number') {
console.log('number');
} else {
console.log('NOT number');
}
==> NOT number
// trueパターン
if (typeof number1 === 'number') {
console.log('number');
} else {
console.log('NOT number');
}
==> number
// instanceofの使用
const date1 = new Date();
if (typeof date1 === 'date') {
console.log('Date');
} else {
console.log('NOT Date');
}
==> NOT Date
if (date1 instanceof Date) {
console.log('Date');
} else {
console.log('NOT Date');
}
==> Date