jQuery / javascript argument handling question

Question

First of all I don't know how to phrase the question "title", sorry if I am confusing everyone with the title here.

Anyway, I saw this code at jQuery http://docs.jquery.com/Plugins/Authoring

(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){

         var $this = $(this),
             data = $this.data('tooltip'),
             tooltip = $('<div />', {
               text : $this.attr('title')
             });

         // If the plugin hasn't been initialized yet
         if ( ! data ) {

           /*
             Do more setup stuff here
           */

           $(this).data('tooltip', {
               target : $this,
               tooltip : tooltip
           });

         }
       });
     },
     destroy : function( ) {

       return this.each(function(){

         var $this = $(this),
             data = $this.data('tooltip');

         // Namespacing FTW
         $(window).unbind('.tooltip');
         data.tooltip.remove();
         $this.removeData('tooltip');

       })

     },
     reposition : function( ) { // ... },
     show : function( ) { // ... },
     hide : function( ) { // ... },
     update : function( content ) { // ...}
  };

  $.fn.tooltip = function( method ) {

    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );

My question being is that I cannot understand why do we need this if statement?

if ( methods[method] ) {
  return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
}

Or in other words, in what scenario that we will pass in argument like "methods[method]" base on the example?

Thanks!

Answer 1

That if statement will check if you are trying to call one of the methods available to the plugin. In the case of you example you have these methods:

init, destroy, reposition, show, hide, and update

So you can do a call like :

$.tooltip('init', { arg1: true, arg2: 'a value' });

Then your code knows where to send the arguments because this if statement will be true:

if(methods['init'])

Answer 2

You see at the beginning that the code defines an object methods .

The function $.fn.tooltip = function( method ) accepts an argument with name method (no s at the end).

The function will execute one of the methods defined in methods , but it can only do it, if this method is also available. Hence the if(methods[method]) .

The expression will be true if method is eg show , hide , update , etc, ie if the methods object has a property with the name contained in method .

Therefore the expression will be false for foo or bar . If the if statement would not be there, the code would try to call method['foo'] , which does not exist and you would get an error:

TypeError: object is not a function

Is this what you wanted to know?

Answer 3

Your code snippet isn't complete and it doesn't contain a demo to show how it's called, so it's hard to give a definite answer.

However, here's what I think from what the code looks like:

The if statement is necessary because the tooltip function will be called with arguments such as init, destroy, show, hide, update, which refer to the functions defined in the methods hash. You probably call tooltip with init to initialize the tooltip, hide to hide it, show to show it etc. If you don't pass an argument at all, it defaults to the init method and initializes the tooltip (second branch of the if).

Answer 4

First of all, the piece of code declares an hashmap named methods which contains some functions.

Then, the second part declares a function named tooltip which takes a parameter named method . This parameter is the name of the function we want to call, this name is the index of this function in the methods array.

So, when you do $('#whatever').tooltip('destroy'); it will look in the methods array for the function referenced with the destroy key.