5 Different Ways to Declare Functions in jQuery

Sam Deering
Tweet

Introduction

Choosing which way to declare a JavaScript function can be confusing for beginners as there are several different ways to declare functions using JavaScript/jQuery. I’ll try to explain the benefits of each one and how and why you might use them when writing your awesome jQuery code.

1. The basic JavaScript function

This is the simplest way to declare a function in JavaScript. Say for example, we want to write a simple function called multiply(x,y) which simply takes in two parameters x and y, does a simple x times y and returns the value. Here are a few ways you might go about doing exactly this.

function multiply(x,y) {
     return (x * y);
}
console.log(multiply(2,2));
//output: 4

If you wanted a quick function to test something then maybe that’s the only occasion you would use this. It’s not good coding and doesn’t promote code reuse.

2. JavaScript functions for get/set

If you need a private utility for getting/setting/deleting model values then you can declare a function as a variable like this. This could be useful for assigning a variable upon declaration calculated by a function.

var multiply = function(x,y) {
     return (x * y);
}
console.log(multiply(2,2));
//output: 4

//The same function but with a self execution to set the value of the variable:
var multiply = function(x,y) {
     return (x * y);
}(2,2);
console.log(multiply);
//output: 4

3. Create your own jQuery function

This is an awesome way to declare functions that can be used just like your regular jQuery functions, on your DOM elements! Rememeber jQuery.fn is just an alias for jQuery.prototype (which just saves us time when coding such jQuery.fn.init.prototype = jQuery.fn = $.fn as such).

jQuery.fn.extend({
    zigzag: function () {
        var text = $(this).text();
        var zigzagText = '';
        var toggle = true; //lower/uppper toggle
			$.each(text, function(i, nome) {
				zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
				toggle = (toggle) ? false : true;
			});
	return zigzagText;
    }
});

console.log($('#tagline').zigzag());
//output: #1 jQuErY BlOg fOr yOuR DaIlY NeWs, PlUgInS, tUtS/TiPs & cOdE SnIpPeTs.

//chained example
console.log($('#tagline').zigzag().toLowerCase());
//output: #1 jquery blog for your daily news, plugins, tuts/tips & code snippets.

Don’t forget to return the element so that you can chain jQuery functions together.

4. Extend Existing jQuery Functions

(or which either extend existing jQuery functions with extra functionality or creating your own functions that can be called using the jQuery namespace (usually, we use the $ sign to represent the jQuery namespace). In this example the $.fn.each function has been modified with custom behaviour.

(function($){

// maintain a to the existing function
var oldEachFn = $.fn.each;

$.fn.each = function() {

    // original behavior - use function.apply to preserve context
    var ret = oldEachFn.apply(this, arguments);
	
	// add custom behaviour
	try {
		// change background colour
		$(this).css({'background-color':'orange'});
		
		// add a message
		var msg = '<span style="float:left;font-size:24px;font-weight:bold">Danger high voltage!</span>';
		$(this).prepend(msg);
	}
	catch(e) 
	{
		console.log(e);
	}
	
    // preserve return value (probably the jQuery object...)
    return ret;
}

// run the $.fn.each function as normal
$('p').each(function(i,v)
{
    console.log(i,v);
});
//output: all paragrahs on page now appear with orange background and high voltage!

})(jQuery);

5. Functions in custom namespaces

If your writing functions in a custom namespace you must declare them in this way. Extra functions can be added to the namespace you just need to add a comma after each one (except the last one!). If your unsure about namespacing see jQuery Function Namespacing in Plain English

JQUERY4U = {
	multiply: function(x,y) {
		return (x * y);
	}
}
//function call
JQUERY4U.multiply(2,2);

Conclusion

Knowing when and how to declare different types of JavaScript/jQuery functions is definitely something any good js developer should know inside out.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: webtutor.info

  • sindhu

    I need a jquery function to validate my textbox value.

    Requirement: required filed:true, minlength:8, maxlength:16, should allow only alphabets, numbers.

    i have written one function:

    jQuery.validator.addMethod(“nameRegex”, function (value) {
    // alert(value);
    if (value.length >= 8) {
    // alert(value.length);
    return value.match(/^[a-zA-Z0-9 ]+$/.test(value));
    }
    }, “Contain only letters, numbers.”);
    but this is not working can any one pls help me in this.

    -Sindhu.A

  • sindhu

    Hi all,
    i need a function to validate a text-box. It should accept only numbers, decimal(14, 10) it should accept total 14 chars in that before “.” 9 chars and after “.” 4 chars should allow. if i won’t enter any value after “.” it should check for only 9 chars.

    -Sindhu.A

  • IamRafi

    Very useful and a good article. Thank you.

    • http://jquery4u.com/ jQuery4u

      Thanks

  • Kevin_Leeds

    The middle is pretty good. At the very beginning there is a mistake because the first two methods don’t really have anything to do with JQuery. At the end there is a mistake because that is not how to spell ‘definitely’. The mistakes are pretty minor though. Since it is the third or fourth time I have tried to learn this aspect of JQuery it is starting to make sense now.

    • http://jquery4u.com/ jQuery4u

      Thanks Kevin, spelling mistake corrected! :)

  • saurabh

    nice1

  • Nischith Honnavar

    Very informative. Thanks

  • http://www.vietnamsvisa.com/ vietnamsvisadotcom

    very good. Thank you so much

  • Lumia

    Very useful. But i want to know the difference between the 1 & 5. As a memory and performance which is better and easy to use?