O'Reilly

JavaScript Functions that Return Functions

By on  

A few weeks back, I tweeted that I loved functions that returned functions. I got quite a few replies to the tune of....WTF?!  It's important that people understand the value of functions that return functions;  using this technique can save you code, JavaScript efficiency, and a gained understanding of how powerful JavaScript can be.  I've created a quick example I'd like to show you so that you can get the idea I was trying to communicate.

Let's say you have one host object with two child objects, both with get methods, and both do exactly the same task but with a different attribute:

var accessors = {
	sortable: {
		get: function() {
			return typeof this.getAttribute('sortable') != 'undefined';
		}
	},
	droppable: {
		get: function() {
			return typeof this.getAttribute('droppable') != 'undefined';
		}
	}
};

Repeating the same code isn't ideal, so we could create one external function, passing it an attribute argument:

function getAttribute(attr) {
	return typeof this.getAttribute(attr) != 'undefined';
}
 
var accessors = {
	sortable: {
		get: function() {
			return getAttribute('sortable');
		}
	},
	droppable: {
		get: function() {
			return getAttribute('droppable');
		}
	}
};

That's a lot better but still not ideal because there's an extra, intermediate function execution every time the method is called.  What would work best is a function that returned the final function  -- that would eliminate the extra function execution with every call to get:

function generateGetMethod(attr) {
	return function() {
		return typeof this.getAttribute(attr) != 'undefined';
	};
}
 
var accessors = {
	sortable: {
		get: generateGetMethod('sortable')
	},
	droppable: {
		get: generateGetMethod('droppable')
	}
};

/* functional equivalent to the original code:

var accessors = {
	sortable: {
		get: function() {
			return typeof this.getAttribute('sortable') != 'undefined';
		}
	},
	droppable: {
		get: function() {
			return typeof this.getAttribute('droppable') != 'undefined';
		}
	}
};

*/

What you see above is a function returning a function; each method gets its own method for getting the property and there's no overhead upon each get call.

This is a really useful technique that saves you from repeating likewise code and, when used correctly, is easy to understand and maintain!

Track.js Error Reporting

Recent Features

  • Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

  • MooTools Window Object Dumping

    Ever want to see all of the information stored within the window property of your browser? Here's your chance. The XHTML We need a wrapper DIV that we'll consider a console. The CSS I like making this look like a command-line console. The MooTools JavaScript Depending on what you have loaded...

Discussion

  1. I know an old XHR implementation which checked against ActiveX and then returned an XHR handler, specifically for IE or other browsers. Something similar was implemented for event handlers. Modern libraries ought to have this behaviour all over the place. It’s actually a very useful every day technique.

  2. I really love it when you write short little helpful articles like this. Thanks for this technique!

  3. Nice example, with the added partial function as a hidden bonus :) Love JavaScript.

  4. Prince Shahnawaz

    awesome technique.. it might be very useful… ;)

  5. MaxArt

    Guys, this is where Javascript reveals all of its potential.
    Never be afraid to use it. Can save you a lot of code, way more what you can save using jQuery.

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

Recently on David Walsh Blog

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...

  • Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of...