5 Different Ways to Declare Functions in jQuery

In this article, we examine several ways to define a block of JavaScript functionality.

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.

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:

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.