実行環境 Node.js 15.2.1

公開日 February 6, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

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

1次情報

typeof - MDN web docs

JavaScriptのデータ型とデータ構造 - MDN web docs

Primitive (プリミティブ) - MDN web docs