JavaScript: Private Static Members, Part 1

James — Tue, 28 Apr 2009 14:47:54 +0000

A little while ago I talked about creating private variables and methods in JavaScript. This works, but is not necessarily efficient: each instance of the class creates new copies of the members. While that may be exactly what you want for instance variables (think of partNum in the old examples) it is not always ideal.

The complexity jumps significantly, though. So I’m dividing this half into two parts.

To get started, we need to forget about all this Object-Oriented Programming for a minute and look at some of the neat tricks you can do with functions in JavaScript.

Update: Part 2 is now available.

First, let’s take a look at a few ways to define a function in JavaScript:

function oneFunction ()
{
// function body goes here
}
var anotherFunction = function ()
{
// function body goes here
};

The first example, oneFunction should be familiar to programmers from most languages. The second one is completely equivalent, but works slightly differently. In this case, the right-hand side, a function, is being assigned to the left-hand side, the var anotherFunction.

Remember that in JavaScript, functions are first-class objects, just like everything else, so can be declared with the var keyword. They can also be passed to other functions as arguments, or returned from functions.

Now let’s take a brief look at parentheses. What do parentheses really do? Essentially, they evaluate and return whatever expression is inside them. For example:

var five = (5);
// the expression is "5"
var nine = (2 * 4) + 1;
// "2 * 4" is evaluated and returned as "8"
var nottrue = (true || false) && false;
// "true || false" evalutes to "true"
var thirty = ((5*5)-10)*2;
// "5*5" is evaluated, then returned as 25 to 25-10,
// which evaluates to 15, which is returned and doubled

So parentheses are slightly more powerful than the simple grouping operation we associate with them. Sometimes we see examples like this, which may be more illustrative:

function checkName (name)
{
return (name==‘admin’);
}

So what happens if we combine parentheses’ ability to evaluate and return code with our ability to define functions as an expression?

var aFunc = (function () { /*…*/ });

Of course, this is just the same as anotherFunction above, but you can see that the right-hand side “returns” a function. Let’s do something a little different now:

(function (name) {
alert("Hello, "+name+"!");
})("World");

What’s going on here? The first set of parentheses [(function ... )] evaluate and return the code inside, creating a function. The last set [("World")] are then calling the function created by the first set. Immediately.

This is a powerful technique, but has certain limits. The interior function is executed immediately on creation, which means the DOM will probably not be loaded yet. Once the function is executed, it is lost. Trying to save it in the left-hand side of an equation will only save the return value of the function, not the function itself. For example:

var aFunc = (function () {
return "I’m not a function!";
})();
alert(aFunc); // Alerts "I’m not a function!"

But, remember what I said about functions as first-class objects? It means we can use one function as a return value from another function:

var bFunc = (function () { // 1
return function () { // 2
alert("Hello, World!");
};
})(); // 3

The outer function (1) is executed immediately (3), and the var bFunc stores its return value, which is the inner function (2). So now, bFunc is a function, and calling bFunc() will alert “Hello, World!”.

We’ll stop for now. If this technique is new to you, play with it for a while. If not, just hang tight and I’ll get to Part 2 soon enough.

Coffee on the Keyboard » tutorial

JavaScript: Private Static Members, Part 1