javascriptで関数が存在しているかチェックしてみた

2023年12月12日

システム構築を伴うweb制作をしていると、一見必要なさそうなことがとても役に立つことがあります。それが「関数が存在しているかどうかのチェック」です。

そもそも関数が存在しているかどうかなんて、チェックする必要があるのか？
と思われがちですが、以下のようなケースで必要です。

• 関数が存在しなかった場合のエラーを回避する

元も子もないようなことですが、意外と重要です。
さらに次のような場合にも関数存在チェックが必要です。

• 関数が存在しているときだけ処理をする

今回は後者の理由で関数存在チェックがJavascriptで必要になりました。
忘備録として記録いたします。

今回Javascriptで関数存在チェックが必要になったわけ

今回、以前作成したラジオボタン制御にひと手間付け足す必要がりました。

ラジオボタンを大きく押しやすくする

具体的には、ラジオボタンの特定値を選択している状態の時に、特定部位の表示をするというものです。通常時は非表示で、特定のラジオボタンが選択されたときのみ表示するものです。

これだけなら大したことはありませんが、以下の課題をクリアすることが少々困難でした。

1. ラジオボタン制御をJqueryで行っている
2. ラジオボタン制御Jqueryは全画面で使用している
3. ラジオボタン値による表示／非表示処理は特定画面だけで行う

ラジオボタン制御Jqueryは全画面共通で使用しているため、直接手を入れてしまうと不具合が出てしまいます。特定画面にだけ盛り込みたい処理だからです。

ただ、トリガーとなる部分は共通Jquery部分しかありません。
つまり、呼び出しは共通Jquery部分ですが、処理自体は特定画面別に盛り込む必要があります。

一部の関数をローカル部分に設置すれば解決できますが、問題はその処理を必要としない画面です。
Javascriptはページ単位で動作するため、同一処理線上でなければ同じ関数名が存在できます。

なぜならばa.htmlとb.htmlに同じ名称の関数が存在していても、a.htmlとb.htmlは別々に動作するため重複エラーにならないためです。

であれば、すべてのページに同じ名称のローカル関数を設置し、処理が必要ないページの関数は空欄にすれば理屈上は実現できます。

ただ、この方法はあまりやりたくありませんでした。
なぜならば、例外的なたった1ページのために、全ページに不要な関数を記述することに抵抗があったからです。

そこで閃いたのが「関数が存在している場合のみ処理」です。
これならば、不要なページには何もしなくても大丈夫になります。

やりたいことはPHPでいうところの「is_callable()」関数

実はPHPでは既に「関数が存在していたら処理」を実装していました。
PHPでできることはJavascriptでもできるだろうとなんとなくの閃きでした。
事実それはJavascriptでもできることでした。

Javascriptはブラウザサイドの言語なのでサーバーサイドの言語とは根本的な部分が違います。
ですが、文法に関しては類似性があるものです。

次のような記述で実現できました。

Javascriptで関数の存在をチェックする方法

次の記述で関数の存在を判断できます。

if (typeof 関数名 == “function”)
{
}

具体的には次のように記述します。

おもったよりあっさり実現できました。

ここで疑問がわきました。
typeof ってなに？

typeof とは

早速ググって調べてみました。
typeofは型を出力する演算子というものでした。

要は型を調べるための命令です。

例えば数値型、文字型といった型はなじみが深いかと思います。
さらにtypeofは全て型を区別します。
javascriptでは関数も「関数型」として区分されます。
なので、typeofで関数かどうかを判別できるのです。

関数が「型」で区分されるとは新しい発見でした。

ちなみにtypeofでくべする型は以下のものでした。

型	戻り値
Null	object
オブジェクト	object
論理値(true、false)	boolean
数値	number
文字	string
関数	function
Bigint	bigint
シンボル	symbol
不明	undefined

Nullとオブジェクトが同じ「object」として判別されるのが気になりましたが、nullは「null」で判別できるので回避方法はあります。

また本記事がお役に立てば幸いです。