JavaScript で変数の型を取得する

Nithin Krishnan 2023年10月12日

JavaScript JavaScript Variable

typeof 演算子を使用して変数の型を見つける
条件付きチェックでの typeof 演算子の使用
ノート

C、Java などの他のプログラミング言語と比較すると、JavaScript は開発者に、単一のキーワード（var キーワード）で任意のタイプの変数を定義する自由を与えます。次に、JavaScript は、これらの変数に割り当てられた値に応じて、後で変数のデータ型を決定します。変数のデータ型を判別するのは一見簡単に思えます。しかし、いくつかのシナリオは私たちを修正することができます。特にサーバーの RESTAPI 応答によって返される値の場合、それを処理するためにさらにコーディングする前に、値または変数のタイプを知る必要がある場合があります。

`typeof` 演算子を使用して変数の型を見つける

typeof は、適用されるオペランドの型を返す javascript の単項演算子です。通常、変数タイプを文字列オブジェクトとして返します。javascript の typeof 演算子への標準的な戻り型があります。

string：typeof は、変数タイプの文字列に対して string を返します。
number：整数または浮動小数点値を保持する変数の number を返します。
boolean：true または false 値を保持する変数の場合、typeof は boolean を返します。
undefined：変数に値を割り当てない場合、変数のタイプは JavaScript によって undefined としてマークされます。したがって、typeof オペランドは、そのような宣言されていない変数に対して undefined を返します。
object：配列を保持する変数、{} 内のオブジェクト、または null 値が割り当てられた変数の場合、javascript はそのような変数のタイプをオブジェクトと見なします。したがって、typeof オペランドは object を返します。
関数：JavaScript を使用すると、変数に関数を割り当てることができます。そのような場合、そのような変数のタイプは関数になります。typeof 演算子は、関数の割り当てに対して function を返します。

次のコードスニペットは、さまざまな変数の割り当てとさまざまなシナリオでの typeof 演算子の動作を示しています。

var s1 = 'hello';
var n1 = 120;
var n1 = 11.1234;
var b1 = true;
var x;
var u = undefined;
var o1 = null;
var o2 = {id: 1, value: 200};
var o3 = [1, 2, 3];
var f = function() {
  return 1 + 2
};

console.log(typeof s1);
console.log(typeof n1);
console.log(typeof n1);
console.log(typeof b1);
console.log(typeof x);
console.log(typeof u);
console.log(typeof o1);
console.log(typeof o2);
console.log(typeof o3);
console.log(typeof f);

出力：

"string"
"number"
"number"
"boolean"
"undefined"
"undefined"
"object"
"object"
"object"
"function"

条件付きチェックでの `typeof` 演算子の使用

typeof 演算子は、if ブロックのように条件付きチェックで使用できます。演算子から返された値をチェックし、それを標準の型の値と比較します。演算子の両端にオペランドの型チェックが含まれているため、比較のために === 演算子を使用します。

var a = 'hello';
if (typeof a === 'string') {
  console.log(true)
}

出力：

true

同様に、number、boolean、object、さらには function の条件付きチェックを実行できます。ベストプラクティスとして、javascript の typeof 演算子によって返される標準データ型の定数変数を作成する必要があります。次に、変数の typeof を宣言された定数と比較します。このアプローチにより、コーディングが容易になり、通常は一目で把握できない条件付きブロックを記述しながらタイプミスを減らすことができます。理解を深めるには、次のコードを参照してください。

const STRING_TYPE = 'string';
const NUMBER_TYPE = 'number';
var a = 'hello';
var b = 123;
if (typeof a === STRING_TYPE) {
  console.log(true)
}
if (typeof b === NUMBER_TYPE) {
  console.log(true)
}

出力：

true
true

ノート

変数に new キーワードが割り当てられている場合、javascript はそのような割り当てをオブジェクトと見なします。したがって、typeof 演算子は、そのような割り当てに対して object を返します。次のコードを参照してください。

var s = new String('hello');
var n = new Number(100);
console.log(typeof s);
console.log(typeof n);

出力：

object
object

new キーワードを使用して関数を割り当てると、そのような変数のデータ型は javascript によって関数として取得されます。new function() を持つ typeof 変数は、object ではなく function として返されます。次のコードを見てみましょう。

var fn = new Function();

出力：

"function"

古いバージョンの Internet Explorer を含め、すべてのブラウザは javascript の typeof 演算子をサポートしています。したがって、複数のブラウザでサポートされているプロジェクトで、心配することなく演算子を使用できます。

typeof 演算子を使用して変数の型を見つける

条件付きチェックでの typeof 演算子の使用

ノート

関連記事 - JavaScript Variable

`typeof` 演算子を使用して変数の型を見つける

条件付きチェックでの `typeof` 演算子の使用