JavaScriptで、Objectかどうかの判定方法と、配列かどうかの判定方法

ObjectArray

こんにちはフロントエンドエンジニアのまさにょんです!

今回は、JavaScriptで、Objectかどうかの判定方法と、配列かどうかの判定方法について解説していきます。

JavaScriptで、Objectかどうかの判定方法と、配列かどうかの判定方法

Dataが、配列かどうかの判定方法を解説してから、Objectかどうかの判定方法を紹介します。

配列かどうかの判定方法

Dataが、配列かどうかの判定方法は、Array.isArray()で簡単に判定できます。

const obj = { id: 1, val: "Gunmar" };

const arr = [
  { id: 1, val: "Gunmar" },
  { id: 2, val: "Saitamar" },
];

// 1. Array.isArray() で、配列かどうか判定できる
console.group("Array_判定");
console.log("Array.isArray(obj)", Array.isArray(obj));
console.log("Array.isArray(arr)", Array.isArray(arr));
console.groupEnd();

Objectかどうかの判定方法

JavaScriptで、Objectかどうかの判定方法には、注意する必要があります。

JavaScriptでは、typeof val === "object"の判定に、配列やnullも引っかかります。

( nullが引っかかるのは、JavaScriptの歴史的な経緯が関係あるとかないとか。。。 )

上記のような状況であるため、JavaScriptでの Object の判定は、

typeof val === "object" && val !== null && !Array.isArray(val) のような判定文を記述しないと判定できないのです。

const obj = { id: 1, val: "Gunmar" };

const arr = [
  { id: 1, val: "Gunmar" },
  { id: 2, val: "Saitamar" },
];

// 2. Object の判定は、typeof val === "object" && val !== null && !Array.isArray(val) をしないと判定できない。
// 配列も null も typeof では 'object' なので。。。
function isObject(val) {
  return typeof val === "object" && val !== null && !Array.isArray(val);
}

console.group("Object_判定");
console.log("isObject(obj)", isObject(obj));
console.log("isObject(arr)", isObject(arr));
console.groupEnd();

SampleCode全文

SampleCodeの全文は、次のとおりです。

const obj = { id: 1, val: "Gunmar" };

const arr = [
  { id: 1, val: "Gunmar" },
  { id: 2, val: "Saitamar" },
];

// 1. Array.isArray() で、配列かどうか判定できる
console.group("Array_判定");
console.log("Array.isArray(obj)", Array.isArray(obj));
console.log("Array.isArray(arr)", Array.isArray(arr));
console.groupEnd();

// 2. Object の判定は、typeof val === "object" && val !== null && !Array.isArray(val) をしないと判定できない。
// 配列も null も typeof では 'object' なので。。。
function isObject(val) {
  return typeof val === "object" && val !== null && !Array.isArray(val);
}

console.group("Object_判定");
console.log("isObject(obj)", isObject(obj));
console.log("isObject(arr)", isObject(arr));
console.groupEnd();

実行結果は、次のとおりです。

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿