7 JavaScript Functions That Every Developer Should Know
Discover the 7 essential JavaScript functions that every developer should know. These functions will help you write more efficient, reusable, and maintainable code. Learn how to use these functions to manipulate DOM elements, handle events, and perform other essential tasks.
As a developer, you might know how important JavaScript has become. Right now, it is the most popular and commonly used programming language in the world. It is used to program desktop and server programs, webpages, web applications, mobile applications, etc. It is also used for databases like MongoDB and CouchDB.
JavaScript has come a long way since its inception. Earlier, developers were aware of only a few functions for all types of features and functionalities because every browser implemented the features according to their rendering engines, which made manual testing of web applications across browsers complicated. But, now you can automate the cross-browser testing of JavaScript web applications with the help of online Selenium Grid without writing repetitive code.
Also, JavaScript now utilizes multiple functions that help developers do more than just simple tasks. These functions also include reusable code that enables developers to build something without writing repetitive code over and over again.
Essential JavaScript Functions
As mentioned above, there are multiple JavaScript functions like decodeURI, alert(), Validate(), onload(), etc. Here, we will be covering seven functions that each developer has in their collection for functional and performance ease.
1. Debounce
Debounce is a ground-breaking function for improving event-fueled performance. It works as a callback function that can be used multiple times for a given time frame. It is more useful when you need to assign a callback function to frequently-firing events.
Also, it can speed up events quickly. Most commonly, it is used with resize, scroll, and key events, and if you’re not using debounce with these events, then you’re doing it wrong. Below is an example of using a debounce function.
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// Usage
var myEfficientFn = debounce(function() {
// All the taxing stuff you do
}, 250);
window.addEventListener('resize', myEfficientFn);
2. getAbsoluteUrl
The name itself defines this function. getAbsoluteUrl is preferably used to get an absolute URL from a variable string. Normally, it’s very difficult to get an absolute URL from variable strings, but using this function, it can be done quickly. getAbsoluteUrl can act as an alternative to the URL constructor, but it can be tricky to use if you don’t provide the required arguments regularly. Here’s an example to get an absolute URL with this function:
var getAbsoluteUrl = (function() {
var a;
return function(url) {
if (!a) a = document.createElement('a');
a.href = url;
return a.href;
};
})();
// Usage
getAbsoluteUrl('/something'); // https://davidwalsh.name/something
3. insertRule
This JavaScript function allows you to insert a CSS rule into your current stylesheet. insertRule is more useful because it enables you to change the stylesheet halfway down the line, which means you don’t have to go back and customize the entire stylesheet.
In JavaScript applications, this function is also used to grab a NodeList from a selector to give it a particular style and then set it to the selector. Therefore, you’ll not have to style each element to match the selector. You can set a style to selector like this:
var sheet = (function() {
// Create the <style> tag
var style = document.createElement('style');
// Add a media (and/or media query) here if you'd like!
// style.setAttribute('media', 'screen')
// style.setAttribute('media', 'only screen and (max-width : 1024px)')
// WebKit hack :(
style.appendChild(document.createTextNode(''));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
})();
// Usage
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
4. isNative
isNative gives you the freedom to tell whether a function is native or not. Though it seems irrelevant to JavaScript applications, it is actually very important. Knowing whether a function is native or not will help you know the risk of superseding it.
And, when you already know the risks, it will keep things in perspective. Also, if you make a mistake while overriding it, inNative can help you figure out why this happened. The following code will explain it better to you.
(function() {
// Used to resolve the internal `[[Class]]` of values
var toString = Object.prototype.toString;
// Used to resolve the decompiled source of functions
var fnToString = Function.prototype.toString;
// Used to detect host constructors (Safari > 4; really typed array specific)
var reHostCtor = /^\[object .+?Constructor\]$/;
// Compile a regexp using a common native method as a template.
// We chose `Object#toString` because there's a good chance it is not being mucked with.
var reNative = RegExp('^' +
// Coerce `Object#toString` to a string
String(toString)
// Escape any special regexp characters
.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$CODE')
// Replace mentions of `toString` with `.*?` to keep the template generic.
// Replace thing like `for ...` to support environments like Rhino which add extra info
// such as method arity.
.replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '
);
function isNative(value) {
var type = typeof value;
return type == 'function'
// Use `Function#toString` to bypass the value's own `toString` method
// and avoid being faked out.
? reNative.test(fnToString.call(value))
// Fallback to a host object check because some environments will represent
// things like typed arrays as DOM methods which may not conform to the
// normal native pattern.
: (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
}
// export however you want
module.exports = isNative;
}());
// Usage
isNative(alert); // true
isNative(myCustomFunction); // false
5. once
Sometimes, developers prefer a given functionality happen only once; this function enables you to do that. The once function is almost like the onload event; it only runs one time for a page, thus avoiding duplicate initializations.
Also, this function is not called in a certain way because it is used while calling a function, not when defining a function. You can use once with any existing functions, even within external libraries.
function once(fn, context) {
var result;
return function() {
if (fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}
// Usage
var canOnlyFireOnce = once(function() {
console.log('Fired!');
});
canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // nada
6. poll
The poll function is amongst those functions that make things easier. What makes this function more useful is that it allows developers to periodically “pol” the server and request new information like new emails, messages, etc. After the server receives the request, it sends the information to the client. It happens automatically again and again for a certain period of time, thus giving the users the freedom from checking updates manually. Below is an example of using a polling function:
// The polling function
function poll(fn, timeout, interval) {
var endTime = Number(new Date()) + (timeout || 2000);
interval = interval || 100;
var checkCondition = function(resolve, reject) {
// If the condition is met, we're done!
var result = fn();
if (result) {
resolve(result);
}
// If the condition isn't met but the timeout hasn't elapsed, go again
else if (Number(new Date()) < endTime) {
setTimeout(checkCondition, interval, resolve, reject);
}
// Didn't match and too much time, reject!
else {
reject(new Error('timed out for ' + fn + ': ' + arguments));
}
};
return new Promise(checkCondition);
}
// Usage: ensure element is visible
poll(function() {
return document.getElementById('lightbox').offsetWidth > 0;
}, 2000, 150).then(function() {
// Polling done, now do something else!
}).catch(function() {
// Polling timed out, handle the error!
});
7. matchesSelector
The matchesSelector function helps developers to verify whether an element of a given selector matches or not. This allows you to validate an element before moving ahead. This function can reduce the number of errors that most developers get down the line.
However, if you’re unable to validate the element, then you can make changes here and there, rather than identifying from where the error is coming. In short, using the matchesSelector function ensures that an element qualifies for moving forward. Here’s an example to show how matchesSelector works:
function matchesSelector(el, selector) {
var p = Element.prototype;
var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
};
return f.call(el, selector);
}
// Usage
matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]')
Conclusion
The popularity behind JavaScript is its functionality that makes web applications more dynamic, and these functions can help you enhance your knowledge of JavaScript, as well as improve your programs. Many developers are well-versed with JavaScript, and they should be because most of the programs are either built on JavaScript or use some component that is built on JavaScript. Having knowledge of these functions will help you showcase your skills in JavaScript and will help you make things easier.
#js #javascript
