JavaScriptのtypeofを徹底解説！使い方7選

はじめに
●JavaScriptのtypeofとは
- ○typeofの基本
●typeofの使い方
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのtypeofを使ってデータ型を調べることができるようになります。

初心者にもわかりやすいよう、具体的なサンプルコードと注意点、カスタマイズ方法を交えて解説していきます。

まずは、typeofの基本について学びましょう。

●JavaScriptのtypeofとは

○typeofの基本

JavaScriptのtypeofは、変数やリテラルのデータ型を調べるための演算子です。

文字列、数値、真偽値、オブジェクト、関数、undefined、シンボルのデータ型を判別できます。

●typeofの使い方

ここでは、typeofを使った7つの具体的な使い方を、サンプルコードを交えて紹介します。

○サンプルコード1：変数のデータ型を調べる

このコードでは、typeof演算子を使って変数のデータ型を調べる方法を紹介しています。

この例では、変数numに数値が格納されているため、typeof numで”number”が返ります。

let num = 123;
console.log(typeof num); // "number"

○サンプルコード2：配列かどうかを判断する

このコードでは、配列かどうかを判断する方法を紹介しています。

配列はオブジェクトの一種なので、typeof arrで”object”が返ります。

しかし、Array.isArray()を使うことで配列かどうかを正確に判断できます。

let arr = [1, 2, 3];
console.log(typeof arr); // "object"
console.log(Array.isArray(arr)); // true

○サンプルコード3：オブジェクトかどうかを判断する

このコードでは、オブジェクトかどうかを判断する方法を紹介しています。

この例では、変数objにオブジェクトが格納されているため、typeof objで”object”が返ります。

let obj = {a: 1, b: 2, c: 3};
console.log(typeof obj); // "object"

○サンプルコード4：関数かどうかを判断する

このコードでは、関数かどうかを判断する方法を紹介しています。

この例では、変数funcに関数が格納されているため、typeof funcで”function”が返ります。

let func = function() {
  console.log('Hello, world!');
};
console.log(typeof func); // "function"

○サンプルコード5：nullかどうかを判断する

このコードでは、nullかどうかを判断する方法を紹介しています。

nullはオブジェクトの一種とされているため、typeof nullで”object”が返ります。

しかし、nullと比較することでnullかどうかを正確に判断できます。

let n = null;
console.log(typeof n); // "object"
console.log(n === null); // true

○サンプルコード6：undefinedかどうかを判断する

このコードでは、undefinedかどうかを判断する方法を紹介しています。

この例では、変数uがundefinedであるため、typeof uで”undefined”が返ります。

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

○サンプルコード7：NaNかどうかを判断する

このコードでは、NaN(Not a Number)かどうかを判断する方法を紹介しています。

この例では、変数nanがNaNであるため、typeof nanで”number”が返ります。

しかし、isNaN()関数を使うことでNaNかどうかを正確に判断できます。

let nan = 0 / 0;
console.log(typeof nan); // "number"
console.log(isNaN(nan)); // true

●注意点と対処法

typeof演算子は配列やnullなど、一部のデータ型について正確な判断ができない場合があります。
そのため、Array.isArray()やnullとの比較など、より正確な判断方法を使うことが推奨されます。
オブジェクトを判断する際、typeof演算子だけでは、インスタンスやプロトタイプによる差異に対応できません。
そのため、instanceof演算子やオブジェクトのコンストラクタを調べることで、より正確な判断が可能です。

●カスタマイズ方法

より正確な型判断を行うためのカスタム関数を作成することができます。
例えば、次のような関数を作成し、さまざまなデータ型に対応することができます。

function getType(value) {
  if (Array.isArray(value)) {
    return 'array';
  }
  if (value === null) {
    return 'null';
  }
  return typeof value;
}

console.log(getType(123)); // "number"
console.log(getType([1, 2, 3])); // "array"
console.log(getType(null)); // "null"