9 Essential JavaScript Functions

I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should have in their arsenal, for performance for functional ease purposes.

debounce

The debounce function can be a game-changer when it comes to event-fueled performance.  If you aren’t using a debouncing function with a scroll, resize, key* event, you’re probably doing it wrong.  Here’s a debounce function to keep your code efficient:

The debounce function will not allow a callback to be used more than once per given time frame.  This is especially important when assigning a callback function to frequently-firing events.

poll

As I mentioned with the debounce function, sometimes you don’t get to plug into an event to signify a desired state — if the event doesn’t exist, you need to check for your desired state at intervals:

Polling has long been useful on the web and will continue to be in the future!

once

There are times when you prefer a given functionality only happen once, similar to the way you’d use an onload event.  This code provides you said functionality:

The once function ensures a given function can only be called once, thus prevent duplicate initialization!

parseURL

This function parses a URL and returns an associative array containing any of the various components of the URL that are present.

This function is not meant to validate the given URL, it only breaks it up into the above listed parts. Partial URLs are also accepted, parseURL() tries its best to parse them correctly.

getAbsoluteUrl

Getting an absolute URL from a variable string isn’t as easy as you think.  There’s the URL constructor but it can act up if you don’t provide the required arguments (which sometimes you can’t).  Here’s a suave trick for getting an absolute URL from and string input:

lightenDarkenColor

The CSS preprocessors Sass and LESS can take any color and darken() or lighten() it by a specific value. But no such ability is built into JavaScript. This function takes colors in hex format (i.e. #F06D06, with or without hash) and lightens or darkens them with a value:

The function isn’t pretty but it gets the job done!

isNative

Knowing if a given function is native or not can signal if you’re willing to override it.  This handy code can give you the answer:

The function isn’t pretty but it gets the job done!

insertRule

We all know that we can grab a NodeList from a selector (via document.querySelectorAll) and give each of them a style, but what’s more efficient is setting that style to a selector (like you do in a stylesheet):

This is especially useful when working on a dynamic, AJAX-heavy site.  If you set the style to a selector, you don’t need to account for styling each element that may match that selector (now or in the future).

matchesSelector

Oftentimes we validate input before moving forward; ensuring a truthy value, ensuring forms data is valid, etc.  But how often do we ensure an element qualifies for moving forward?  You can use a matchesSelector function to validate if an element is of a given selector match:

There you have it:  seven JavaScript functions that every developer should keep in their toolbox.  Have a function I missed?  Please share it!