7 Essential JavaScript Functions

By  on  

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.


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:

// 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;
		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);

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.


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:

function poll(fn, callback, errback, timeout, interval) {
    var endTime = Number(new Date()) + (timeout || 2000);
    interval = interval || 100;

    (function p() {
            // If the condition is met, we're done! 
            if(fn()) {
            // If the condition isn't met but the timeout hasn't elapsed, go again
            else if (Number(new Date()) < endTime) {
                setTimeout(p, interval);
            // Didn't match and too much time, reject!
            else {
                errback(new Error('timed out for ' + fn + ': ' + arguments));

// Usage:  ensure element is visible
    function() {
        return document.getElementById('lightbox').offsetWidth > 0;
    function() {
        // Done, success callback
    function() {
        // Error, failure callback

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


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:

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() {

canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // nada

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


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:

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

The "burn" element href handles and URL nonsense for you, providing a reliable absolute URL in return.


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:

;(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
    // Escape any special regexp characters
    .replace(/[.*+?^${}()|[\]\/\\]/g, '\\$&')
    // 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

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


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):

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 :(

	// Add the <style> element to the page

	return style.sheet;

// Usage
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

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).


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:

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]')

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

Recent Features

Incredible Demos

  • By
    CSS content and attr

    CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...


  1. You don’t need to slice.call to indexOf when you can just indexOf.call any collection directly ;-)

    • Gist? I don’t understand what you’re saying but I’d like to update the post… :(

    • Ilya Panasenko

      in matchesSelector you can write the following:

      return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
    • Java Script

      Array.prototype.indexOf.call is longer but won’t create a new instance of Array

  2. Al Val

    or using lodash?

    nice post :)

  3. Hey, great post! I have another handy utility function you can use! (I kinda think its like your once function on steroids!)

    When(condition, fctn);

    I have a node.js library right here for you to try: https://www.npmjs.com/package/when-conditional
    and here is the github repo if you want to use the code: https://github.com/thekemkid/when-conditional :D

    What it does:
    You pass two functions to the when function, condition and fctn. condition is a function which must return a truthy value, and fctn is a function which is what you want to execute when the condition returns truthy!
    Here is an example of it in use:

    this will log someVar is false 10 times, then tell you it is true once and exit.

    var when = require('when-conditional');
    var someVar = false;
    var interval = setInterval(function(){
      console.log('someVar is ' + someVar);
      if(someVar === true) clearInterval(interval);
    }, 1000);
    var immediate = when(function condition(){
    	return (someVar === true);
    }, function code(){
    	console.log("someVar is now true, and this was only triggered when it became true!");
    	someVar = true;
    }, 10000);

    Notes: The node.js library uses a setImmediate shim which should get the when function working on most browsers! :D
    and it allows you the ability to clear the when listener, if you need to! :D

    Thanks for reading :)

  4. I am using randomRange a lot to provide a random value between min and max.

    function rand(min, max, integer) {
      var r = Math.random() * (max - min) + min; 
      return integer ? r|0 : r;
    console.log(rand(2,5)); // float random between 2 and 5 inclusive
    console.log(rand(1,100,true)); // integer random between 1 and 100
  5. Joshua Koudys

    I like the getAbsoluteURL() approach, and I find there are a lot of ways to leverage the DOM to do the heavy lifting for you. You’re in a web browser already (or if node.js, an engine developed for a web browser), so it makes sense that there’d be many web-related functions available to you.

  6. Joshua Koudys
    function stripTags(htmlstr) {
        var div = document.createElement('div');
        div.innerHTML = htmlstr;
        return div.textContent;
  7. Peter

    I tried to abuse the getAbsoluteUrl function to do the following :

    Detect if a webpage is run locally or served remotely from the server.
    None of the (very few) suggestions online work with Safari webarchives

    The getAbsoluteUrl always returns the URL from where the original page was saved… so even when the webarchive is running inside the browser with the file:// protocol, the function returns the URL as if it were running on the server.

    Sorry that this is a bit off topic, I was just hoping to find a solution (the javascript location object does not work).
    Any pointers or tips on how to detect a file being run locally would be greatly appreciated.

    • Drew

      I’d check how jQuery does it. They basically use a regex to detect whether or not a given url is local, cross domain, or file:// and ultimately that might be the shortest route.

  8. Nice! My original article shows a version with promises:


  9. Great list!

    The only thing I would prefer would be to use promises with poll.

    function poll(fn, timeout, interval) {
      var endTime = Number(new Date()) + (timeout || 2000);
      interval = interval || 100;
      return new Promise(function(resolve, reject) {
        (function p() {
          // If the condition is met, we're done!
          if (fn()) {
          // If the condition isn't met but the timeout hasn't elapsed, go again
          else if (Number(new Date())  0;
    }).then(function() {
      // Done
    }).catch(function() {
      // Fail
  10. Back to this blog, after a long time and it made me happier again with the wealth of information and this time on Javascript. I would love to try out these functions.

  11. Eric

    I think throttle is what youre describing debounce as. Similar but not the same. Debounce makes sure that a function only gets called once it is no longer being called repeatedly. If it gets called a second time before n milliseconds has elapsed, it will cancel the first call and begin another delayed call to the function, repeating this process until the function is no longer called anymore.

  12. There is a slightly more efficient way to do debounce. Setting a new timeout per time it is called can be expensive (especially if you’re calling debounce a lot in a single window).


  13. Oleksii Davydov

    I think Date.now() is nicer and more efficient than Number(new Date()).

  14. Always nice to see various implementations of these indispensable utility functions. In the past, when I’ve implemented matchesSelector, instead of querying the entire document, I’ve used the child’s parentNode property:

    function matchesSelector(el, selector) {
    	var p = Element.prototype;
    	var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
    		return [].indexOf.call(this.parentNode.querySelectorAll(s), this) !== -1;
    	return f.call(el, selector);
    • Well, that was my first thought when I saw this implementation, but what if the selector is something like this:

      body > #container .child

      Then you would have to rely on document.querySelectorAll

  15. Christian Haller

    Burp Suite is complaining about getAbsoluteUrl()

    The application may be vulnerable to DOM-based link manipulation. Data is read from the baseURI property of a DOM element and written to the href property of a DOM element

    They don’t notice, that the anchor element is never touching the DOM

  16. For matchesSelector I’d recommend just using element.matches as per spec and polyfilling it where it isn’t present, also see: https://developer.mozilla.org/en/docs/Web/API/Element/matches

  17. Also another useful function is element.closest()

  18. Drew

    Similar to getAbsoluteUrl, you can use a modern browser’s native ability to validate emails from a string by creating an temporary element and testing its validity:

    function isValidEmail(string){
        string = string||'';
        var lastseg = (string.split('@')[1]||'').split('.')[1]||'',
            input = document.createElement('input');
            input.type = "email";
            input.required = true;
            input.value = string;
        return !!(string && (input.validity && input.validity.valid) && lastseg.length);
    isValidEmail("");// -> false
    isValidEmail("asda");// -> false
    isValidEmail("asda@gmail");// -> false
    isValidEmail("asda@gmail.com");// -> true

    If you wanted to support older browsers you could fall back to trying a regex instead, but with this method you can be ensured that whatever the user’s browser considers to be a valid email, you’re using the exact same logic (however strict or lenient that might be).

  19. Fernando
    function yourFn() {
       // do something...
       yourFn = null;

    We can simplify concepts…

  20. Xavier
    // Build a better Sheet object 
    Sheet = (function() {
    	// Build style
    	var style = document.createElement('style');
    	style.setAttribute('media', 'screen');
    	// Build and return a single function
    	return function(rule){ style.sheet.insertRule( rule, style.sheet.cssRules.length ); } ;
    // Then call as a function
    Sheet(".stats { position: relative ; top: 0px }") ;
  21. This a simple function for input number only

    /* Input Number Only */
    function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode  57))
            return false;
    	return true;
  22. you guys are absolutely brilliant. Thanks for doing all the heavy lifting for we novices.

  23. Andrew

    Thanks everyone for sharing all this!

  24. Bill

    I find that the throttle function is better suited for some situations than debounce is, including window’s resize for when you’d like to show periodic updates whilst continually resizing.

    This simple throttle example curries the throttled function and returns a function that will pass its arguments to the throttled function

    function throttle (callback, limit) {
      var wait = false;
      return function () {
        if (!wait) {
          callback.apply(null, arguments);
          wait = true;
          setTimeout(function () {
            wait = false;
          }, limit);
  25. A big thanks to you for these post. After reading these posts I feel how stupid i am before reading these. Every weekend I read your post again and again.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!