$.isArray() / $.isFunction()（型判定）

// 値が配列かどうかを判定する
$.isArray(value)

// 値が関数かどうかを判定する
$.isFunction(value)

基本的な型判定から、引数の種類によって処理を切り替えるパターン、プラグイン開発での活用例まで幅広い使い方を紹介します。

サンプルページはこちら

$(function() {

    // 配列リテラルを渡すと true が返る
    console.log($.isArray([1, 2, 3]));          // true
    console.log($.isArray([]));                 // true

    // 配列以外のものを渡すと false が返る
    console.log($.isArray({ a: 1 }));           // false
    console.log($.isArray("虎杖悠仁"));         // false
    console.log($.isArray(null));               // false

    // typeof では配列とオブジェクトを区別できない
    var members = ["虎杖悠仁", "伏黒恵", "釘崎野薔薇"];
    console.log(typeof members);               // "object"
    console.log($.isArray(members));           // true

    // function 式・function 宣言はいずれも true が返る
    var greet = function(name) {
        return "こんにちは、" + name;
    };
    console.log($.isFunction(greet));          // true

    function activate() { return "呪術発動"; }
    console.log($.isFunction(activate));       // true

    // 関数以外のものを渡すと false が返る
    console.log($.isFunction(42));             // false
    console.log($.isFunction("function"));    // false
    console.log($.isFunction(null));          // false

    // コールバックが渡されたときだけ実行する関数の例
    function processMembers(data, callback) {
        var result = [];

        if ($.isArray(data)) {
            result = data;
        } else {
            result = [data];
        }

        if ($.isFunction(callback)) {
            callback(result);
        } else {
            console.log("コールバックなし。結果: " + result);
        }
    }

    processMembers(["虎杖悠仁", "伏黒恵", "釘崎野薔薇"], function(result) {
        console.log("メンバー: " + result.join(", "));
    });

    processMembers("五条悟", function(result) {
        console.log("メンバー: " + result.join(", "));
    });

    processMembers(["七海建人"]);

    // オプションにコールバックを渡せるシンプルなプラグインの例
    $.fn.myPlugin = function(options) {
        var defaults = {
            duration: 400,
            onComplete: null
        };

        var settings = $.extend(defaults, options);

        return this.each(function() {
            var $el = $(this);

            $el.fadeOut(settings.duration, function() {
                if ($.isFunction(settings.onComplete)) {
                    settings.onComplete.call(this);
                }
            });
        });
    };

    $(".member-card").myPlugin({
        duration: 600,
        onComplete: function() {
            console.log("アニメーション完了");
        }
    });

    $(".other-card").myPlugin({ duration: 300 });

});

$.isArray() は渡された値がネイティブの配列かどうかを判定し、配列であれば true、それ以外であれば false を返します。内部では Array.isArray()（または非対応環境では Object.prototype.toString）を使用しているため、typeof では区別できないオブジェクトと配列を正確に判定できます。空配列 [] も true として扱われます。

$.isFunction() は渡された値が関数かどうかを判定し、関数であれば true、それ以外であれば false を返します。プラグイン開発などでオプションにコールバックを受け付ける場合、実行前に $.isFunction() でチェックすることで、関数でない値が渡されたときのエラーを防げます。

なお、$.isFunction() はjQuery 3.3以降で非推奨（deprecated）とされており、代わりにネイティブの typeof value === "function" が使えます。$.isArray() もjQuery 3.2以降では Array.isArray() が使えます。既存コードの読解には引き続き役立ちます。

関連ページ：$.each()（配列・オブジェクトへの反復処理）、.map() / $.map()（要素の変換と収集）、$.ajax()（Ajaxリクエストの送信）

JavaScriptでは配列も「オブジェクト」の一種であるため、typeof 演算子で配列を渡しても "object" が返ります。typeof だけでは配列かどうかを区別できません。

NG: typeof で配列を判定しようとしている

var members = ["虎杖悠仁", "伏黒恵"];
if (typeof members === "array") {
    console.log("配列です");
}

実行結果

// typeof [] は "array" ではなく "object" を返すため、この条件は常に false

OK: $.isArray() または Array.isArray() を使う

var members = ["虎杖悠仁", "伏黒恵"];
if ($.isArray(members)) {
    console.log("配列です");
}

jQueryオブジェクト（$(".member") の戻り値）は配列のように見えますが、ネイティブの配列ではありません。$.isArray() に渡すと false が返ります。jQueryオブジェクトが配列かどうかではなく、「配列のように扱えるか」を確認したい場合は別のアプローチが必要です。

NG: jQueryオブジェクトが配列だと思って $.isArray() に渡している

var $members = $(".member");
if ($.isArray($members)) {
    console.log("配列です");
} else {
    console.log("配列ではありません"); // こちらが出力される
}

OK: jQueryオブジェクトの要素を取得するには .toArray() を使う

var $members = $(".member");
var membersArray = $members.toArray();
console.log($.isArray(membersArray)); // true

typeof で関数を判定する場合は typeof value === "function" と書きます。ただし、null や undefined を渡しても typeof はエラーにならないため、$.isFunction() との動作の差はほぼありません。注意が必要なのは、typeof は変数が宣言されていなくてもエラーにならないという点です。

NG: typeof の戻り値を誤解している

var cb = function() { return "呪術発動"; };
if (typeof cb === "Function") {
    console.log("関数です");
}

実行結果

// typeof の戻り値は小文字の "function" なので大文字始まりでは一致しない

OK: 小文字の "function" で比較する

var cb = function() { return "呪術発動"; };
if (typeof cb === "function") {
    console.log("関数です");
}