8

I have always used (typeof variable === "function") and I stumbled across jQuery.isFunction() and I was wondering:

  1. What is the difference between the typeof method and jQuery's method? And not only what the difference is, but
  2. When is it appropriate to use the typeof method and when is it appropriate to use jQuery's method?
3

5 Answers 5

11

There is almost no difference, other than that using jQuery is slightly slower. See the source code:

isFunction: function( obj ) {
    return jQuery.type(obj) === "function";
},

which calls a function which calls another function to determine the exact same thing as what you showed :P

There is literally no advantage to jQuery in this case [or for that manner, 90% of the use-cases of the library]. Look into Vanilla-JS and check out some of its features :P

TLDR: Don't use jQuery for this...or anything.

UPDATE

Here's a benchmark showing you that Vanilla JS is roughly 93% faster than jQuery: http://jsperf.com/jquery-isfunction-vs-vanilla-is-function.

6
  • 5
    jQuery is slightly slower ^_^ Aug 30, 2012 at 22:02
  • In their defense, there had been a Chrome bug where typeof on a regex would return "function", but with Chrome's automatic update install, that bug should be long gone. Aug 30, 2012 at 22:16
  • @user1600680 $.isFunction existed long before that bug and exists long after it, though :P
    – Lusitanian
    Aug 30, 2012 at 22:18
  • 1
    jQuery does NOT do the same thing as the OP's question. jQuery ends up examining Object.prototype.toString.call() and looking for [object Function] which is not the same as typeof fn === "function".
    – jfriend00
    Aug 30, 2012 at 23:25
  • Fair enough, I realized that after posting and weaving through the complete mess that is its codebase. It accomplishes the same end in all but a few rare edge cases AFAIK.
    – Lusitanian
    Aug 31, 2012 at 0:28
4

There's no difference. jQuery uses the same concept:

// ...
isFunction: function( obj ) {
    return jQuery.type(obj) === "function";
}

Update:

After digging in deeper I found that jQuery's isFunction method is comparing the toString method of the Object.prototype chain on function() {}, to the string [object Function]. This is the how it differs from your former example and the reason for it being slower than typeof.

3
  • @JohnB - So you're saying that sometimes jQuery.isFunction() doesn't identify functions as functions as well?
    – Aust
    Aug 30, 2012 at 22:14
  • @JohnB - Well if they both fail sometimes, I might as well stick with typeof variable === "function" :)
    – Aust
    Aug 30, 2012 at 22:21
  • Please forget my comments (those which I have deleted). They were nonsense. Honestly, I do not know whether there are functions that are not identified as functions by jQuery.
    – JohnB
    Aug 30, 2012 at 22:25
2

The jQuery source code for isFunction is

isFunction: function( obj ) {
    return jQuery.type(obj) === "function";
},

type: function( obj ) {
return obj == null ?
   String( obj ) :
   class2type[ core_toString.call(obj) ] || "object";
},

//...

jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),
   function(i, name) {
      class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

core_toString = Object.prototype.toString,

hence jQuery.isFunction returns true if and only if calling Object.prototype.toString.call on its argument returns [object Function].

2
  • 1
    This doesn't really answer the question for what circumstances this would generate a different result than typeof fn === "function". I know the jQuery way works better for arrays, but why do it that way for a function if you don't already have that library around?
    – jfriend00
    Aug 30, 2012 at 23:23
  • @Vitim.us - me too, but that isn't in this answer.
    – jfriend00
    May 6, 2013 at 2:27
2

Usually you can test whether JS object is function by using this test:

(typeof fn === 'function')

However, this doesn't always work (IE8):

typeof alert => 'object'
typeof document.createElement('input').getAttribute => 'object'

Before jQuery 1.4 internally they used the same check, but now they've fixed it. So to be sure that passed object is a function which can be called, just use $.isFunction method:

$.isFunction(function() {}) => true
$.isFunction(alert) => true
$.isFunction(document.createElement('input').getAttribute) => true

Copied from this blog: http://nuald.blogspot.co.uk/2012/07/why-jqueryisfunction.html

1
  • The blog is wrong. As of 1.3, $.isFunction(alert) returns false in IE<9 while it returns true in 1.2.
    – Ivan Yan
    Apr 17, 2015 at 14:32
1

The difference is that JQuery calls something equivalent to the following and checks for the "Function" string token:

var toString = Object.prototype.toString;
var func = function(){};

console.log(toString.call(func)); // "returns [object Function]"

Whereas typof, just returns "function":

var fType = typeof func; 

console.log(fType); // returns "function"

Here's an example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.