この記事ではJavaScriptの『typeof演算子』について、
- typeof演算子とは
- typeof演算子の使い方
- typeof演算子の注意点
などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。
typeof演算子とは
JavaScriptのtypeof演算子は値のデータ型を文字列として返す単項演算子です。
typeof演算子を使用することで様々な値のデータ型を調べることができます。
ではこれから、typeof演算子の使い方について説明します。
typeof演算子の使い方
typeof演算子の基本的な使い方は非常にシンプルです。typeof演算子の構文を以下に示します。
typeof 値値には「文字列」、「数値」、「オブジェクト」などの値を指定します。以下のサンプルコードを見てみましょう。
// 値が文字列の場合
console.log(typeof 'Hello'); // string
console.log(typeof ''); // string
console.log(typeof `template literal`); // string
// 値が数値の場合
// JavaScriptでは整数と浮動小数点数を区別しない。
console.log(typeof 10); // number
console.log(typeof 3.14); // number
console.log(typeof 10n); // bigint
// 値が値がブール型(trueまたはfalse)の場合
console.log(typeof true); // boolean
console.log(typeof false); // boolean
// 値が未定義の場合
let a;
console.log(typeof a); // undefined
console.log(typeof undefined); // undefined
// シンボル型の値の場合
console.log(typeof Symbol()); // symbol
console.log(typeof Symbol('symbol')); // symbol
// 値がオブジェクトの場合
console.log(typeof { a: 1 }); // object
console.log(typeof {}); // object
// 値が配列の場合
// JavaScriptが配列もオブジェクトの一種として扱う。
console.log(typeof [1, 2, 3]); // object
// 値が関数の場合
// JavaScriptでは、関数もオブジェクトの一種ですが、typeof演算子ではfunctionとして区別される。
function func() {}
console.log(typeof func); // function文字列の場合にはstring、数値の場合にはnumber、ブーリアンの場合にはbooleanなどを返します。なお、配列などのオブジェクト型はすべてobjectを返しますが、関数はfunctionを返しますので注意してください。
なお、typeof演算子が返す値は文字列なので、文字列と比較することができます。以下のサンプルコードを見てみましょう。
const str = 'hello';
if (typeof str === 'string') {
console.log('「文字列」です');
}
// ログ出力
// 「文字列」です対象となる値が文字列かどうかを判別することができました。
typeof演算子の注意点
typeof演算子を使用する上での注意点を以下に示します。
- 値がnullだった場合には、objectが返される
- 値がNaNだった場合には、numberが返される
- 値が配列だった場合には、objectが返される
- new演算子を使用した場合には、objectが返される
各注意点について順番に説明します。
値がnullだった場合には、objectが返される
nullの値をtypeof演算子でチェックすると、objectが返されるので注意してください。
console.log(typeof null);
// ログ出力
// objectJavaScriptの初期の実装では、typeof null === 'object'となるバグがありました。このバグを修正すると、既存のコードに影響が出るため、修正が見送られ、現在では、この挙動(typeof nullがobjectを返す)が仕様の一部となっています。
値がNaNだった場合には、numberが返される
NaN(Not a Number)の値をtypeof演算子でチェックすると、numberが返されるので注意してください。
console.log(typeof NaN);
// ログ出力
// number値が配列だった場合には、objectが返される
typeof演算子は配列とオブジェクトを区別しません。配列をチェックするとobjectが返されるので注意してください。
配列かどうかを確認するにはArray.isArray()やObject.prototype.toString.call()を使用します。
let arr = [1, 2, 3];
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true
console.log(Object.prototype.toString.call(arr)); // [object Array]new演算子を使用した場合には、objectが返される
JavaScriptにはプリミティブ型(数値、文字列、ブーリアン、シンボル、null、undefined)とオブジェクト型があります。
typeof演算子はこれらのデータ型を区別しますが、Functionコンストラクターを除くすべてのコンストラクター関数を使って、作成したプリミティブ型のラッパーオブジェクトをチェックするとobjectが返されるので注意してください。
let numObj = new Number(10);
let strObj = new String('Hello');
let boolObj = new Boolean(true);
console.log(typeof numObj); // object
console.log(typeof strObj); // object
console.log(typeof boolObj); // object
let func = new Function();
console.log(typeof func); // function本記事のまとめ
この記事ではJavaScriptの『typeof演算子』について、以下の内容を説明しました。
- typeof演算子とは
- typeof演算子の使い方
- typeof演算子の注意点
お読み頂きありがとうございました。