JavaScript typeof演算子

typeof演算子

typeof演算子は、JavaScript変数のデータ型を返します。

プリミティブデータ型

JavaScriptでは、プリミティブ値はプロパティやメソッドを持たない単一の値です。

JavaScriptには7つのプリミティブデータ型があります：

• string
• number
• boolean
• bigint
• symbol
• null
• undefined

typeof演算子は、変数または式の型を返します。

例

typeof "John"         // stringを返す
typeof ("John"+"Doe") // stringを返す
typeof 3.14           // numberを返す
typeof 33             // numberを返す
typeof (33 + 66)      // numberを返す
typeof true           // booleanを返す
typeof false          // booleanを返す
typeof 1234n          // bigintを返す
typeof Symbol()       // symbolを返す
typeof x              // undefinedを返す
typeof null           // objectを返す

複合データ型

複合データ型は、複数の値と/または異なるデータ型を一緒に保存できます。

JavaScriptには1つの複合データ型があります：

• object

配列、関数、セット、マップなど、すべての他の複合型は単なる異なるタイプのオブジェクトです。

typeof演算子は次の2つのタイプのみを返します：

• object
• function

例

typeof {name:'John'}   // objectを返す
typeof [1,2,3,4]       // objectを返す
typeof new Map()       // objectを返す
typeof new Set()       // objectを返す
typeof function (){}   // functionを返す

配列の認識方法

変数が配列かどうかを知るにはどうすればよいですか？

ECMAScript 5（2009）では、これに対する新しい方法が定義されました：Array.isArray()：

例

// 配列を作成する
const fruits = ["apples", "bananas", "oranges"];
Array.isArray(fruits);

instanceof演算子

instanceof演算子は、オブジェクトが指定されたオブジェクト型のインスタンスである場合にtrueを返します：

例

// 日付を作成する
const time = new Date();

(time instanceof Date);
// 配列を作成する
const fruits = ["apples", "bananas", "oranges"];

(fruits instanceof Array);
// マップを作成する
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

(fruits instanceof Map);
// セットを作成する
const fruits = new Set(["apples", "bananas", "oranges"]);

(fruits instanceof Set);

未定義の変数

未定義の変数のtypeofはundefinedです。

例

typeof car;

値がない変数のtypeofもundefinedです。値もundefinedです。

例

let car;
typeof car;

どんな変数でも、値をundefinedに設定することで空にすることができます。

型もundefinedになります。

例

let car = "Volvo";
car = undefined;

空の値

空の値はundefinedとは異なります。

空の文字列には有効な値と型があります。

例

let car = "";
typeof car;

null

JavaScriptではnullは「何もない」ことを意味します。存在しないものです。

残念ながらJavaScriptでは、nullのデータ型はobjectです。

nullを設定することでオブジェクトを空にすることができます：

例

// オブジェクトを作成する
let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

person = null;
// これで値はnullになりますが、型はまだobjectです

また、undefinedに設定することでオブジェクトを空にすることもできます：

例

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

person = undefined;
// これで値と型の両方がundefinedになります

undefinedとnullの違い

undefinedとnullは値としては等価ですが、型としては異なります：

typeof undefined      // undefinedを返す
typeof null           // objectを返す

null === undefined    // false
null == undefined     // true

constructorプロパティ

constructorプロパティは、すべてのJavaScript変数のコンストラクタ関数を返します。

例

// function Object() {[native code]}を返します：
{name:'John',age:34}.constructor

// function Array() {[native code]}を返します：
[1,2,3,4].constructor

// function Date() {[native code]}を返します：
new Date().constructor

// function Set() {[native code]}を返します：
new Set().constructor

// function Map() {[native code]}を返します：
new Map().constructor

// function Function() {[native code]}を返します：
function () {}.constructor

constructorを使用すると、オブジェクトが配列かどうかを確認できます：

例

(myArray.constructor === Array);

また、constructorを使用してオブジェクトが日付かどうかも確認できます：

例

(myDate.constructor === Date);

全体をまとめると

typeof "John"          // "string"を返す
typeof ("John"+"Doe")  // "string"を返す
typeof 3.14            // "number"を返す
typeof (33 + 66)       // "number"を返す
typeof NaN             // "number"を返す
typeof 1234n           // "bigint"を返す
typeof true            // "boolean"を返す
typeof false           // "boolean"を返す
typeof {name:'John'}   // "object"を返す
typeof [1,2,3,4]       // "object"を返す
typeof {}              // "object"を返す
typeof []              // "object"を返す
typeof new Object()    // "object"を返す
typeof new Array()     // "object"を返す
typeof new Date()      // "object"を返す
typeof new Set()       // "object"を返す
typeof new Map()       // "object"を返す
typeof function () {}  // "function"を返す
typeof x               // "undefined"を返す
typeof null            // "object"を返す

void演算子

void演算子は式を評価し、undefinedを返します。この演算子は、”void(0)”を使用して未使用の返り値を評価する場合に便利です。

例

<a href="javascript:void(0);">
  リンクをクリックしてください
</a>

<a href="javascript:void(document.body.style.backgroundColor='red');">
  ボディの背景色を赤に変更するためにクリックしてください
</a>