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.