Treehouse

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!

ydkjs-1.png

Recent Features

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • Save Web Form Content Using Control + S

    We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...

  • Send Email Notifications for Broken Images Using MooTools AJAX

    One of the little known JavaScript events is the image onError event. This event is triggered when an image 404's out because it doesn't exist. Broken images can make your website look unprofessional and it's important to fix broken images as soon as possible....

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!