5 Different Ways to Declare Functions in jQuery

Choosing which way to declare a JavaScript function can be confusing for beginners and there are several different syntax options. Each has advantages, disadvantages, and appropriate uses that can catch you out. In this article, we examine several ways to define a block of JavaScript functionality.

1. Regular JavaScript Functions

The first and most obvious way to declare a function in JavaScript is to use a function declaration. A function named multiply(), which takes two parameters x and y, multiplies them, and returns the value can be implemented with the following syntax:

function multiply(x,y) {
  return x * y;
}

console.log( multiply(2, 2) );
// output: 4

Functions defined in this way (a function declaration) are hoisted to the top of the current scope. The console.log() could be placed before the function and it would still work.

2. JavaScript Function Expressions

The same function can be written as an expression which explicitly sets a variable, as shown in the following example:

const multiply = function(x,y) {
  return x * y;
}

console.log( multiply(2, 2) );
// output: 4

The function is not hoisted, so it can only be used after it has been defined.

3. Object Literal Method Definitions

Functions are treated the same as any other value type in JavaScript, so you can define one in another object. For example:

const mathLib = {

  // property
  PI: 3.14,

  // multiply(x,y) method
  multiply: function(x, y) {
    return x * y;
  },

  // divide(x,y) method
  divide: function(x, y) {
    return x / y;
  }

}

console.log( mathLib.multiply(2, 2) );
// output: 4

Again, this object method can only be called after it has been defined.

4. ES2015 Arrow Functions

Arrow functions don’t require the function keyword but can only be assigned to a variable or used anonymously (such as in a callback or event handler). Parameters enclosed in rounded brackets (( )) are followed by an arrow (=>) to denote a function in the next code block:

const multiply = (x, y) => { return x * y; };

console.log( multiply(2, 2) );
// output: 4

Since we only have one statement, the return is implicit and the brackets can be omitted for identical functionality with a shorter syntax:

const multiply = (x, y) => x * y;

In cases where the function has a single parameter, those brackets can also be removed:

const square = x => x ** 2;

Although brackets are still required for a single parameter:

const estimatePI = () => 22 / 7;

Arrow functions automatically assign this to the value in the immediate outer scope so there is no need to use .bind(this).

5. jQuery Extension Functions

jQuery is a JavaScript library, so creating functions is much the same. However, jQuery’s functionality can be extended by adding your own custom methods. The jQuery.fn.extend() method extends the jQuery prototype ($.fn) object so new functionality can be chained to the main jQuery() function.

For example, the following code defines new check and uncheck jQuery methods to modify checkbox input fields:

jQuery.fn.extend({

  // check checkboxes
  check: function() {
    return this.each(function() {
      this.checked = true;
    });
  },

  // uncheck checkboxes
  uncheck: function() {
    return this.each(function() {
      this.checked = false;
    });
  }

});

// check all checkboxes on the page
$( "input[type='checkbox']" ).check();

Keeping it Functional

Function syntax is often a matter of personal preference, but try to ensure your code remains readable. It may be better to use a function statement than confuse yourself in a few weeks time with a clever but unreadable mishmash of arrows and brackets.

Frequently Asked Questions (FAQs) about Declaring jQuery Functions

What is a jQuery function declaration?

A jQuery function declaration is the process of creating a custom function using the jQuery library. These functions can be used to perform specific tasks, manipulate the DOM, or interact with elements on a web page.

How do I declare a jQuery function?

To declare a jQuery function, you use the $.fn syntax, followed by the function name. For example:
>$.fn.myCustomFunction = function() { // Your function code here };

Can I declare jQuery functions outside the $(document).ready() function?

Yes, you can declare jQuery functions outside the $(document).ready() function. However, it’s a good practice to define functions inside the $(document).ready() function to ensure that the DOM is fully loaded before manipulating it.

How can I use the jQuery function after declaring it?

Once you’ve declared a jQuery function, you can use it on selected DOM elements. For example:
>$("#myElement").myCustomFunction();

Can I pass arguments to my custom jQuery function?

Yes, you can pass arguments to your custom jQuery function. Declare the arguments within the function declaration and use them inside the function body:
$.fn.myCustomFunction = function(arg1, arg2) { // Use arg1 and arg2 here };

Can I chain other jQuery methods with my custom function?

Yes, you can chain other jQuery methods with your custom function. Make sure your function returns the selected element to enable method chaining:
$.fn.myCustomFunction = function() { // Your function code here return this; // Important for method chaining };

How can I target specific elements inside my custom jQuery function?

Within your custom jQuery function, you can use this to refer to the selected DOM element(s). You can then apply your desired manipulations using jQuery methods on this.

Is there a limit to the number of jQuery functions I can declare?

There’s no inherent limit to the number of jQuery functions you can declare. However, it’s recommended to keep your code organized and avoid excessive function declarations for readability and maintenance.

Can I declare jQuery functions dynamically or conditionally?

Yes, you can declare jQuery functions dynamically or conditionally based on your application’s needs. Just like other JavaScript functions, you can use conditional statements or loops to create functions as required.

Can I override or extend existing jQuery functions?

Yes, you can override or extend existing jQuery functions. Keep in mind that overwriting built-in jQuery functions can have unintended consequences, so it’s generally safer to extend functionality using your custom functions.

What’s the difference between declaring a regular JavaScript function and a jQuery function?

The main difference is that jQuery functions are designed to work directly with DOM elements selected using jQuery selectors. They often involve DOM manipulation or interaction, while regular JavaScript functions can handle a broader range of tasks.

Can I namespace my custom jQuery functions?

Yes, you can namespace your custom jQuery functions to prevent conflicts with other libraries or code. For example:
$.fn.myPlugin_myFunction = function() { // Your function code here };

Are there any best practices for declaring jQuery functions?

Yes, here are some best practices:
Define your functions inside the $(document).ready() function for DOM readiness.
Keep your functions modular and well-documented.
Return this for method chaining if applicable.
Avoid overwriting or modifying core jQuery functions to prevent unexpected behavior.
Use meaningful names and follow consistent naming conventions.

For more jQuery information, click here

Related Blog – Difference Between Javascript And Jscript