変数の型や存在するかどうかなどを調べる

JavaScriptで変数の型や存在するかどうかなどを調べるパターンをいくつか試してみます。

サンプルコード

変数が存在するかどうか

まずは変数が存在するかどうかです。
変数が定義されていない状態で使用しようとすると、エラーになります。

console.log(sample); // Uncaught ReferenceError: sample is not defined

変数が定義されていない場合のデモページ

変数が定義されているかどうかを調べる場合、typeofを使用します。

console.log(typeof sample); // undefined
if(typeof sample === 'undefined') {
	console.log('未定義です');
} else {
	console.log(sample + 'です');
}

typeof 変数名 で変数が定義されてない場合はundefinedにが返ってくるので、その値で判別します。
変数が定義されているかどうかを調べるデモページ

変数がnullかどうか

次に変数がnullかどうかです。
先ほど使用したtypeofを使用するとよさそうですが、返ってくる値はnullではなくobjectになります。

const sample = null;
console.log(typeof sample); // object

typeofでnullの場合のデモページ

そのため、typeofで判別しようとすると逆の判別になってしまします。

const sample = null;
if(typeof sample === 'null') {
	console.log('型はnullです');
} else {
	console.log('値は' + sample + 'です'); // こちらになる
}

typeofでnullを判別した場合のデモページ

nullの場合はtypeofを使わず、変数がnullかどうかで判別すればOKです。

const sample = null;
if(sample === null) {
	console.log('型はnullです'); // こちらになる
} else {
	console.log('値は' + sample + 'です');
}

nullかどうかを調べるデモページ

関数が存在するかどうか

次に関数が存在するかどうかです。
関数の場合はtypeofを使用するとfunctionが返ってくるので、その値で判別できます。

if(typeof sample === 'function') {
	console.log('functionです');
} else {
	console.log('functionではないです'); // こちらになる
}

関数がない場合はtypeof で undefined が返ってくるので、関数でない方の判別になります。
関数が存在するかどうかのデモページ

関数が定義されている場合は、関数の判別になります。

const sample = function() {
	console.log('sample');
}
if(typeof sample === 'function') {
	console.log('functionです'); // こちらになる
} else {
	console.log('functionではないです');
}

関数が存在するかどうかのデモページ2

変数がオブジェクト(連想配列)かどうか

前述のnullかどうかの判別でも試しましたが、typeof で object を返す値にはnullや配列も含まれます。

const sample1 = {
	name: "suzuki"
};
console.log(typeof sample1); // object

const sample2 = [1, 3, 5];
console.log(typeof sample2); // object

const sample3 = null;
console.log(typeof sample3); // object

const sample4 = new Date();
console.log(typeof sample4); // object

const sample5 = /aaa/;
console.log(typeof sample5); // object

typeofでobjectを返す値のデモページ

これだと連想配列かどうかの判別ができないので、代わりに Object.prototype.toString.call を使って判別してみます。

const sample1 = {
	name: "suzuki"
};
console.log(variable_type(sample1)); // object

const sample2 = [1, 3, 5];
console.log(variable_type(sample2)); // array

const sample3 = null;
console.log(variable_type(sample3)); // null

const sample4 = new Date();
console.log(variable_type(sample4)); // date

const sample5 = /aaa/;
console.log(variable_type(sample5)); // regexp

function variable_type(obj) {
	if(typeof obj === 'object') {
		return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
	} else {
		return typeof obj;
	}
}

とりあえず試した範囲ですが、それぞれを判別できるようになりました。
連想配列かどうかを調べるデモページ

オブジェクトが空かどうか

次にオブジェクト(連想配列)が空かどうかです。
連想配列のプロパティを取得して、その数を調べることで空かどうかを判別できます。

const sample1 = {};
console.log(Object.keys(sample1).length === 0); // true

const sample2 = {
	name: "suzuki"
};
console.log(Object.keys(sample2).length === 0); // false

連想配列が空かどうかを調べるデモページ

オブジェクトに特定のプロパティがあるかどうか

次にオブジェクト(連想配列)内に特定のプロパティがあるかどうかです。
hasOwnProperty() でプロパティを持っているかどうかを調べられます。。

const sample = {
	name: "suzuki"
};
console.log(sample.hasOwnProperty('name')); // true
console.log(sample.hasOwnProperty('age')); // false

連想配列が特定のプロパティを持っているかどうかを調べるデモページ