JavaScript | オブジェクトかどうか確認する方法

2022-03-01JavaScript オブジェクト（連想配列）,JavaScript

JavaScriptで対象がオブジェクトかどうかを確認・判別する方法になります。

instanceof演算子、typeof演算子、getPrototypeOf()メゾッドを使った方法を紹介しています。

動作サンプルでは各方法別にオブジェクトかどうかを調べた結果をHTMLに表示しています。

See the Pen JavaScript | Delete the element by yochans (@yochans) on CodePen.

instanceof演算子でオブジェクトかどうか確認する

JavaScriptのinstanceof演算子を利用して指定した値がオブジェクトかどうかを判別するサンプルコードです。

instanceof演算子は指定した値のprototypeプロパティを調べて判別する事が可能です。

対象がオブジェクトかどうかを調べるには以下のように指定します。

対象 instanceof Object

instanceof演算子はtureまたはfalseを結果として返します。

data = {};

if (data instanceof Object === true) {
	// オブジェクトの場合
} else {
	// オブジェクトではない場合
}

対象の値が文字列や数値、関数の場合はfalseを返す事が確認できます。

また、instanceof Objectは配列もオブジェクト（連想配列）として判別される事に注意が必要です。

typeof演算子でオブジェクトかどうか確認する

JavaScriptのtypeof演算子を利用して指定した値がオブジェクトかどうかを判別するサンプルコードです。

typeof演算子は指定した値の種類を結果として返します。

対象がオブジェクトかどうかを調べるには結果が「object」となっているかどうかで分岐して判別します。

data = {};

if (typeof data === 'object') {
	document.querySelector(`#typeof`).innerHTML = `is object`;
} else {
	document.querySelector(`#typeof`).innerHTML = `not object`;
}

配列であった場合、typeof演算子は「object」を返す事に注意します。

getPrototypeOf()メゾッドでオブジェクトかどうかを確認する

getPrototypeOf()メゾッドを使って指定した値がオブジェクトかどうかを判別する方法です。

Object.getPrototypeOf()で得られる情報のconstructorプロパティにあるnameが「Object」かどうかで判別する事が可能です。

返り値は各要素の種類となり、それぞれ頭文字が大文字であることに注意します。

data = {};

if (Object.getPrototypeOf(data).constructor.name === 'Object') {
	document.querySelector(`#getPrototypeOf`).innerHTML = `is object`;
} else {
	document.querySelector(`#getPrototypeOf`).innerHTML = `not object`;
}

配列の値を指定した場合、Object.getPrototypeOf().constructor.nameは「Array」を返します。