1. TOPTOP
  2. Webサービス
  3. JavaScript

JavaScript typeof演算子の関数型戻り値について 〜 functionを使った関数とアロー関数の比較

javascript-typeof_function_0

ドットインストールの「詳解JavaScript 基礎文法編 #10 データ型について見ていこう(新しいタブで開く)」を学習していると、データ型を調べるためにtypeof演算子としてが紹介されています。

JavaScriptにtypeof演算子があること自体、初めて知りました。調べているとそのことについて興味深いことが分かったのでメモとして記事を書いておきます。

ドットインストールでは5つのデータ型を紹介

console.log(typeof 'hello');
console.log(typeof 5);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

ドットインストールのサンプルコードでは、以上の5つのコードが例とした挙げられています。

string
number
boolean
undefined
object

ブラウザをリロードするとコンソール画面に以上の結果が表示されます。これらの文字列が表示される理由は、リンクを貼ったドットインストールの動画を視聴して確認してください。

typeof演算子は関数型も調べられる

ドットインストールでは紹介されていませんが、実は関数型を調べられることもできます。ネタ元は公式ドキュメントのMDN(新しいタブで開く)です

console.log(typeof function Square(x){ return x * x; } );
console.log(typeof function(x){ return x * x; } );

引数を2乗する独自に定義した関数であるSquareと、その無名関数についてtypeof演算子で調べてみましょう。

function
function

ブラウザをリロードするとコンソール画面に以上の結果が表示されます。いずれも”function”の文字列が表示されます。

アロー関数のデータ型は調べられない

ただし「関数のデータ型を調べられる」といっても、ECMAScript(ES6)のアロー関数はデータ型を調べることはができません。

console.log(typeof (x) => { return x * x; } );
console.log(typeof x => return x * x)
console.log(typeof x => x * x; );

アロー関数は”function”を使わず、基本的に丸かっこのみで関数を表します。また引数やブロック内の式の数が1つしかない場合は、丸かっこや”return”を省略することもできます。

Uncaught SyntaxError: Unexpected token typeof

アロー関数についてtypeof演算子を使ってデータ型を調べようとしても、コンソール画面には「文法エラー」が出力されます。