【JavaScript】typeofでデータの型を確認する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!

(この記事は2023年09月25日に投稿されました。)

Javascriptでデータの値をチェックするにはtypeofを使用します。

typeofとは指定したデータの種類を確認する演算子になります。

そのため、確認したいデータを指定し、指定したデータの種類の名前を返すようになります。

また、オブジェクトやクラスなど複数のデータ集合体でもtypeofで種類を確認することができます。

そのため、「処理中のデータやAPIなどの外部から受け取ったデータの種類を確認したい」と思った場合はtypeofを使用しましょう。

今回はJavaScriptのtypeofでデータの型を確認する方法について紹介していきます。




typeofとは

typeofとは指定したデータの型を判定することができる演算子になります。

そもそも型とは定義しているデータの種類になります。

typeofの書き方

typeofの書き方は下記のようになります。

typeofの後ろに「型を調べる値」を指定することで使用することができます。

また、調べる型の値を括弧で囲んでも問題ありません。

typeofの返り値

typeofの返り値は「調べた値の型名」になります。

typeofでデータの型を確認するサンプルコード

typeofでデータの型を確認するサンプルコードについてご紹介します。

ここでは、下記の4つのパターンでtypeofを使用します。

  1. データがプリミティブである場合
  2. データが未定義である場合
  3. データがnullである場合
  4. データが非数である場合

データがプリミティブである場合

データがプリミティブである場合にtypeofを使用すると、それぞれの型名を返します。

● main.js

実行結果

typeofでデータがプリミティブの値の型を確認した結果

typeofでプリミティブのデータの値を確認しています。

そのため、文字列の場合は「string」、数値の場合は「number」、真偽値の場合は「boolean」が表示されています。

データが未定義である場合

データが未定義である場合にtypeofを使用すると、「undifined」を返します。

● main.js

実行結果

typeofでデータが未定義の値の型を確認した結果

typeofで未定義のデータの値を確認しています。

そのため、「undefined」が表示されています。

データがnullである場合

データがnullである場合にtypeofを使用すると、「object」を返します。

● main.js

実行結果

typeofでデータがnullの値の型を確認した結果

typeofでnullのデータの値を確認しています。

そのため、「object」が表示されています。

データが非数である場合

データが非数である場合にtypeofを使用すると、「number」を返します。

● main.js

実行結果

typeofでデータが非数の値の型を確認した結果

typeofで非数のデータの値を確認しています。

そのため、「number」が表示されています。

複合データを指定してtypeofでデータの型を確認する場合

typeofは、格納された単数のデータだけでなく、複合データを指定してデータの型を確認することができます。

そのため、ここではtypeofで複合データの型を確認します。

データがオブジェクトである場合

データがオブジェクトである場合にtypeofを使用すると、「object」を返します。

● main.js

実行結果

typeofでデータがオブジェクトの値の型を確認した結果

typeofでオブジェクトのデータの値を確認しています。

そのため、「object」が表示されています。

データが関数である場合

データが関数である場合にtypeofを使用すると、「function」を返します。

● main.js

実行結果

typeofでデータが関数の値の型を確認した結果

typeofで関数のデータの値を確認しています。

そのため、「function」が表示されています。

データがクラスである場合

データがクラスである場合、typeofは「object」を返します。

● main.js

実行結果

typeofでデータがクラスの値の型を確認した結果

typeofでクラスの値を確認しています。

そのため、「object」が表示されています。

typeofでイテレータのデータの値をそれぞれ確認する方法

typeofはイテレータ全体のデータの種類だけでなく、格納されているデータの値をそれぞれ確認することができます。

そのため、ここではtypeofでイテレータのデータの値をそれぞれ確認する方法についてご紹介します。

for文を使用する

1つ目はfor文を使用する方法です。

for文とは指定した回数分の繰り返し処理を行うことができる構文となります。

そのため、イテレータに格納されたデータの個数分の処理を行い、それぞれにtypeofを使用することでデータの値をそれぞれ確認することができます。

● main.js

実行結果

for文とtypeofでイテレータのデータの値の型をそれぞれ確認した結果

for文とtypeofでイテレータのデータの値をそれぞれ確認しています。

そのため、格納されているデータの値の種類が配列となって表示されています。

もし、for文について詳しく知りたい場合は下記の記事をご参考ください。

forEach()を使用する

2つ目はforEach()を使用する方法です。

forEach()とは配列など格納されている要素に対して順番に処理を行うことができるメソッドになります。

そのため、イテレータに格納されたデータを取り出し、それぞれにtypeofを使用することでデータの値をそれぞれ確認することができます。

● main.js

実行結果

forEach()とtypeofでイテレータのデータの値の型をそれぞれ確認した結果

forEach()とtypeofでイテレータのデータの値をそれぞれ確認しています。

そのため、こちらも格納されているデータの値の種類が配列となって表示されています。

もし、forEach()について詳しく知りたい場合は下記の記事をご参考ください。

typeofを使用した実際のケース

typeofを使用した実際のケースについてご紹介します。

例えば、typeofを使って外部から受け取った値の種類をチェックし、数値以外の場合はそこで処理を終了させるようなコードを作成します。

● index.html

● main.js

実行結果(成功時)

typeofで外部から受け取った値の種類をチェックするコードを作成した結果(成功時)

実行結果(エラー時)

typeofで外部から受け取った値の種類をチェックするコードを作成した結果(エラー時)

typeofで外部から受け取った値の種類をチェックしています。

今回は入力フォームで入力したパラメータを「String」から「Number」に変換し、typeofで「Number」であるかどうかをチェックしています。

そのため、処理が成功する場合は計算された結果が表示され、処理にエラーが発生した場合はエラーメッセージが表示されています。

データがクラスなどから作成されたのかを確認する場合

データがクラスなどから作成されたのかを確認するにはinstanceを使用します。

instanceとはオブジェクトが特定のクラスやコンストラクタ関数から生成されたインスタンスであるかどうかを確認する演算子になります。

指定されたオブジェクトが指定されたクラスまたはコンストラクタ関数のインスタンスであればtrueを、そうでなければfalseの真偽値を返します。

そのため、特定のオブジェクトが特定のクラスやコンストラクタから生成されたかどうかを確認する場合に使用することができます。

● main.js

実行結果

instanceofでデータがクラスなどから作成されたのかを確認した結果

instanceでデータがクラスなどから作成されたのか確認しています。

「apple」はFruitsクラスのインスタンスであるため「true」が表示され、「bike」はFruitsクラスのインスタンスではないため「false」が表示されています。

まとめ

⚫︎ typeofとは、データの値の型(種類)をチェックするための演算子である。

⚫︎ データがプリミティブである場合にtypeofを使用するとそれぞれの型名を返す。
・文字列の場合「string」を返す。
・数値の場合「number」を返す。
・真偽値の場合「boolean」を返す。

⚫︎ データが未定義である場合にtypeofを使用すると「undefined」を返す。

⚫︎ データがnullである場合にtypeofを使用すると「object」を返す。

⚫︎ データが非数である場合にtypeofを使用すると「number」を返す。

⚫︎ データがオブジェクトである場合にtypeofを使用すると「object」を返す。

⚫︎ データが関数である場合にtypeofを使用すると「function」を返す。

⚫︎ データがクラスである場合にtypeofを使用すると「object」を返す。

⚫︎ typeofでイテレータのデータの値をそれぞれ確認するには下記のような方法がある。
・for文を使用する。
・forEach()を使用する。

⚫︎ データがクラスなどから作成されたのか確認するにはinstanceを使用する。