mikepk.com about current projects contact

jmnf:1 What is a function

January 24, 2006

javascript magic-ninja-foo episode 1: What is a function

In some ways the creators of javascript have attempted to make programming with it similar to other 'mainstream' programming languages (such as C++ or Java) to make it easier to start with. Although this can greatly speed someone getting started with very simple programs, sometimes this similarity can actually impede more advanced programming and create confusion. So I'm going to start with an example of this simple/complicated dichotomy (bear with me if you're old hat to javascript).

You might find code similar to the following in almost any language.

function HelloWorld() {
   alert("hello world");

In a 'traditional' language, a statement like this might be compiled before runtime with the resulting instructions put in memory at a location with a label or pointer, making it accessible with a name. The 'function' statement is more like a "label indicator" to the compiler that what follows should be accessed with the name "HelloWorld()". There's more to it than that, but the important part is that traditionally a statement like that defines a fixed segregated code segment that can be accessed with a label.

In javascript, 'function' is an expression. It's an expression that creates a 'function object'. In other words, it's not a 'label indicator' for a compiler but more like z=3*x; which is executed during runtime and produces a 'result'. It can be useful to think of the statement above as:

var HelloWorld = 
   function() { 
      alert("hello world") 

This statement (which is semantically identical to the above) creates a new 'function' data type (which is an object, I'll discuss that later) and returns it to a variable. Now from this point on, 'HelloWorld()' accesses the function (and interestingly HelloWorld without the parenthesis operator is also accessible, I'll talk about that later as well).

While at first this may seem like a trivial distinction, it has some interesting implications. First, most obviously, until the expression is reached, you can't use the function. Second, and more interestingly, you can write code that takes advantage of this ability to create functions on-the-fly and manipulate the resultant data type.

function HelloWorldGenerator(numberOfWorlds) {
  var worldArray = [];
  for(var i=0;i < numberOfWorlds; i++) {
     worldArray[i]=function() { alert("hello world") }
  return worldArray;
var newWorlds = HelloWorldGenerator(5);

What we have here is a function that creates functions. This would be a nonsensical piece of code in many other programming languages, but is perfectly valid in javascript (in it's current 1.5 incarnation). What is returned is an array of functions, defined at runtime by calling the HelloWorldGenerator. And you can then access each individual function with 'newWorlds[num]()' and access the numbered function. The first in the "weird but neat" aspects of javascript.

Important points:

Next Episode