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

OBATA

12か月前

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 呼び出せるパターン
if (typeof sample == "function")
{
    // 関数を呼び出し
    sample();
}

function sample()
{
}

// 呼び出せないパターン
if (typeof sample == "function")
{
    // 関数を呼び出し
    sample();
}
// 関数名sampleが存在しないため呼び出されない
function sample_02()
{
}

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

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

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

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

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

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

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

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

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