HTML5, CSS3, jQuery, JSON, Responsive Design...

Creating JavaScript functions on the fly (currying)

Michael Brown   November 2 2011 05:05:44 AM

For my sins, I've been tinkering with Object-oriented JavaScript again.

While doing so, I came across an interesting constructor function in John Resig's book, Pro JavaScript Techniques.  The function demonstrates a technique where a JavaScript function can create and return other functions, on the fly.  In this case, Resig's function was creating setter and getter functions for any properties that being passed into the constructor via an object call, appropriately enough, "properties".

I had some problems understanding the function until it dawned on me that he's made a couple of mistakes in it; something that I had not expected from such a source; this is the guy that invented jQuery, after all.  But a quick check of the book's reader reviews on Amazon confirmed that some of the example code is, indeed, buggy.  Somebody actually posted "if you can debug the errors in his code examples then you don't need hid book!"  Is that me now then, I wonder?

Anyway, here's Resig's function, heavily modified by me.  My modifications are:
  • Changed the object's function from public to private.  I.e., instead of being directly assigned to the object's "this", they are assigned to a private (i.e "var =") variable called privateProperties.
  • Changed the setter/getter creation code to check whether setter/getter function about to be created already exists or not.  This us allows us to override with hard-code functions - see the getage() and setteam() functions.
  • Changed the setter/getter creation code to check in the parameter being checked is not a function itself; we only need setters and getters for properties.
  • I corrected the bug he used "this" within the for/loop function that creates the setters/getters.  The scope of "this" as this point does not  refer to the User function, as was intended.  Due to function scope in JavaScript, it actually refers to the global object, i.e. the DOM window.  You can see how I've used the "var that = this;" trick to fix this problem.
  • I corrected his use of the "i" variable in the "return" of the setter/getter functions created in the User function.  The "i" variable is of a higher scope and so is not the correct property when the getter/setter is later called.  I fixed this by capturing the "i" at the correct point by using the "currentProperty" variable.  This is a closure.

function User( properties ) {
// From Pro JavaScript Techniques, John Resig, p.37
// Iterate through the properties of the object, and make sure
// that it's properly scoped

var that = this;
var privateProperties = [];

this.getage = function () {
  return "the age = " + privateProperties["age"];
this.setteam = function () {
   console.log('Sorry, you cannot set the team property');

for ( var i in properties ) {
  if(typeof properties[i] === "function") {
      that[i] = properties[i];
  else {
      privateProperties[i] = properties[i];
          var currentProperty = i;
      // Create a new getter for the property
          if (typeof that[ "get" + i] !== "function") {
              that[ "get" + i ] = function() {
                 return privateProperties[currentProperty];    // can't use "i" here
// Create a new setter for the property
          if(typeof that["set" + i] !== "function") {
               that[ "set" + i ] = function(val) {
              privateProperties[currentProperty] = val;     // can't use "i" here
})(); }

Here's a sample call that instantiates a new object, "user", using the function User as its constructor:
var user = new User({
  name: "Bob",
  age: 44,
  team: "Wests Tigers",

console.log( user.getage());
user.setage( 22 );
console.log( user.getage());
user.setteam('Sydney Roosters');

And here's the console output produced by the code above:
the age = 44
West Tigers
the age = 22
Sorry, you cannot set the team property
Wests Tigers

Finally, here's how our test "user" object, created from the "User" function/constructor, looks in the JavaScript debugger.  Notice all our freshly created set and get functions on the right hand side:

New setter/getter functions in the JavaScript Debugger

Full code can be found on JS Fiddle at:

1cghgjh  04/14/2017 5:59:38 AM  Creating JavaScript functions on the fly (currying)

iTube Pro is an incredible application that lets you download and play your preferred videos, audio and music albums on your Android device

{ Link }