Three ways to declare functions in jQuery include the simple function, get/set, and extending the jQuery object. I cover all three in this short post.
The Simple Function
This is the simplest way to declare a function (method) in JavaScript and jQuery. This is a great way to test and is good for a throwaway method, but it isn’t good practice to code like this because it doesn’t encourage code recycling.
function sayHello(name) {
alert("Hello, " + name);
}
Get/Set
This is a great way to get/set/delete model values. It’s very common and is not too far off from the simple method declaration.
//declaring
var sayHello = function(name) {
return "Hello, " + name;
}
//using
console.log(sayHello("Jon")); // "Hello, Jon"
Create Your Own
Extending the jQuery object is a great way to abstract pieces of code that will be reused. It encourages developers to use method chaining, so this keeps your code clean, too!
jQuery.fn.extend({
backwards: function() {
var text = $(this).text();
var backwardsText = '';
var bits = text.split('');
var x = text.length - 1;
while (x >= 0) {
backwardsText += bits[x];
--x;
}
return backwardsText;
}
})
$(document).ready(function() {
console.log($("#testText").backwards());
//given $("#testText") looks like <p id='testText'>racecar tacocat</p>
//the result is => tacocat racecar
})
Here’s a CodePen that uses the above method (plus another one) to determine if an element’s text forms a palindrome:
See the Pen Extending the jQuery Object by Nate Northway (@the_Northway) on CodePen.