[JavaScript General] データ型とその判定

公開日: 2016/08/30
更新日: 2019/01/11

memo.

Contents

データ型

データ構造 – JavaScript | MDN

最新の ECMAScript 標準仕様では 7 つのデータ型が定義されています。

  • 6 種類のプリミティブデータ型:
    • Boolean
    • Null
    • Undefined
    • Number
    • String
    • Symbol (ECMAScript 6 の新データ型)
  • Object

真偽値での判定

if (値) で以下が返ってくる。

#07 真偽値と三項演算子を使おう | JavaScript入門 – プログラミングならドットインストール

  • String … 空文字（''）以外だったら true
  • Number … 0 か NaN 以外だったら true
  • Boolean … そのまま true, false
  • Object … null 以外だったら true
  • undefined, null … ともに false

Object の判定

ひとくちに Object といっても、いろいろある。
例えば getElementById() や getElementsByClassName() とした場合に返ってくる値に応じて、処理を分けたいと思ったけれども、そもそもどう分けるべきなのか。

typeof 演算子では判別できない

typeof 演算子では、すべて object が返ってくるので判定できない。

const element = document.getElementById('test');
const elements = document.getElementsByClassName('hover');
const elements2 = document.getElementsByTagName('a');
console.log(typeof element);   // object
console.log(typeof elements);  // object
console.log(typeof elements2); // object

Object.prototype.toString.call() を使う

それぞれ何が返ってくるのかを調べると、以下のようである。
HTMLCollection で判定すれば良さそうだ。

element is a reference to an Element object, or null if an element with the specified ID is not in the document.

elements is a live HTMLCollection of found elements.

elements is a live HTMLCollection (but see the note below) of found elements in the order they appear in the tree.

if (Object.prototype.toString.call(elements) === "[object HTMLCollection]") {
  処理
}

See the Pen JavaScript: how to detect data types by DriftwoodJP (@DriftwoodJP) on CodePen.

補遺