In the second chapter of our radical look at JavaScript - Just JavaScript - we meet the most important object of all - the Function object. What really matters is that you don't think that it is just a function. In JavaScript there are no functions - only Function objects. 

Just JavaScript 

 There is a newer version of the draft of the book here.

A Radical Look At JavaScript

Contents

1. JavaScript Isn't Java, or C, or C# ... (Book Only)
2. In The Beginning Was The Object
3. The Function Object
4. How Functions Become Methods
5. The Object Expression
6. Object Construction
7. The Prototype
8. Type And Non-Type
9. Constructor And InstanceOf
10. Duck Testing And Prototype Construction

-Preface-

Most books on JavaScript either compare it to the better known class based languages such as Java or C++ and even go on to show you how to make it look like the one of these.

Just JavaScript is an experiment in telling JavaScript's story "just as it is" without trying to apologise for its lack of class or some other feature. The broad features of the story are very clear but some of the small details may need working out along the way - hence the use of the term "experiment". Read on, but don't assume that you are just reading an account of Java, C++ or C# translated to JavaScript - you need to think about things in a new way. 

Just JavaScript is a radical look at the language without apologies. 

JavaScript is an object-oriented language, but not in the sense that you might know from languages such as C++, Java or C#, say. JavaScript is different and in the mould of Smalltalk and similar dynamic object oriented languages where everything is an object. Other object oriented languages break the "everything is an object" rule, most crucially when it comes to functions. 

The mainstream object oriented languages give in to the very natural pressure to make code special.

You want to write a program - so you want to get on and write some code but where does that code live? 

In non-object based languages there is only the code. You start to write a list of statements that this is all there is to the program.

So you first start writing programs you tend to think that the code is the most important thing, but later you learn about objects and you are told that code is just always a property of an object, i.e. the object's methods.

That is, the language has objects and objects have properties which are usually other objects and they have methods which are blocks of executable code. 

That is, the answer to the question of where does the code live, in the case of an object based language, is that code exists as methods which aren't objects but a special type of property that an object can have.  

Objects are the main entity in the program and can be assigned and passed around. The code is always bound to some object or other and so you can't do things like pass code as a parameter because it isn't an object. This makes tasks such as event handling and callbacks difficult.

So in most object based languages there are objects and there are methods - which are executable properties. 

The Function object

JavaScript takes a different approach to the problem of code by introducing the idea of the Function object.

A Function object is created in the way any object is and used in the way all objects can be used.

To create a new Function object you use:

new Function();

For example:

var myFunction= new Function();

Once created you can add properties to the new object in the usual way:

myFunction.myProperty="hello function";

The point that is being made is that the Function object is "just this object". 

So what additional characteristics does the Function object have that makes it useful?

The simple answer is that a Function object can accept some code as part of its creation.

Of course we now need to know what statements JavaScript supports that we can use in a Function object. For the moment only a very simple set of statements are used. 

When you create a Function object you can specify a list of statements that form the functions "body".

For example:

var myFunction= new Function(
                 "alert('hello function body');");

This creates a Function object with a body that consists of the single statement 

alert('hello function body');

So a Function object has some code stored within it.

This code is immutable after the Function object has been created - you you can't modify it. If you want to change the code you have to create a new Function object.

You also need to take careful note that the code that constitutes the body isn't executed when the Function object is created. The body can be thought of as sort of default property of the Function object - i.e. the Function object simply stores the code for you. In fact there is a [[Call]] property that only Function objects have  but it is an internal property and not accessible within JavaScript code. 

All you can do with the function body is execute the code it by using the function evaluation operator (). 

For example

myFunction()

causes the list of statements that make up the Function object's body to be executed. In this case it simply causes an alert box to appear with the message.

Notice that

myFunction;

without the function evaluation operator, is a variable that references the Function object and

myFunction();

i.e. with the function evaluation operator, evaluates the body of the Function object that myFunction references. 

You might well be thinking if the evaluation operator evaluates the function it should return a result and this is the case. You can use the statement

return result;

to specify what the function evaluates to. 

If you don't specify a return result the function body returns undefined. 

For example

var myFunction= new Function(
                  "var ans=1+2;return ans;");

has the function body

var ans=1+2;
return ans;

Now if you try:

alert(myFunction());

you will see 3 displayed as this is the result of the function. 

The value of the function can be any object not just a Number object (actually a primitive value) as in the example. 

The final part of the Function object we need to examine is the use of parameters. 

As well as the body of the function you can also specify a list of parameters which you can specify values for when the function is evaluated. 

For example

var myFunction= new Function("a","b",
                   "var ans=a+b;return ans");

now the function will return the sum of a and b no matter what they are set to when the function is evaluated. 

For example:

alert(myFunction(1,2));

sets a to reference 1 and b to reference 2 and then evaluates the body. 

Notice that function parameters can be any object and not just the Number objects used in the example. You can also think of what is passed as being a reference to an object, even it it happens to be a primitive value, in all cases. 

You can also use as many parameters in a function definition as you care to define and use as many as you care to when you execute the function. For each parameter you give a value to there is a variable of the same name with that value as part of the function's code. Any missing parameters are undefined and it is up to your code to deal with this. 

Also notice that this implies that there is no JavaScript form of function overloading because  functions don't have fixed signatures. 

In fact parameters in JavaScript are a little more subtle than this and we will have to come back to them later after we have found some more convenient ways of creating Function objects. 

The Function expression

You could just use the Function object approach to creating JavaScript code but it isn't exactly convenient to have to enclose all code in quotes or form a String object.

This said there are times when converting a String object containing code into an executable Function object is useful but these tend to be considered advanced techniques. 

JavaScript provides another way to define a Function object - the Function expression.  

This is just a shortcut to creating a Function object and doesn't really introduce anything new but you can now write:

function(parameters){statements};

Notice that the function body is now specified as statements enclosed in curly brackets.

This is also the notation used to create compound statements in JavaScript - that is any list of statements enclosed in curly brackets is regarded as a single statement. 

For example the previous Function object can be written:

var myFunction= function(a,b){
                   var ans=a+b; return ans; };

or by including line-breaks:

var myFunction= function(a,b){
 var ans=a+b;
 return ans;
};

Which has the huge advantage that this looks like a function definition in a non-object oriented language. Notice also that you don't use

new function ()

i.e. you don't use the new keyword, so that it doesn't look like the creation of an object and looks even more like a non-object oriented function.

It is important to keep in mind that while this looks like a simple function declaration it isn't. A function expression creates a Function object and you can add properties to it as you like. 

Also notice that the variable assigned to becomes a reference to the function object. This means you can do things like 

var anotherRef=myFunction;
var a=anotherRef(1,2);

and anotherRef becomes another reference to the same Function object. 

It is the Function object that is important not the variable that references it. 

Notice also that this means that there is no real concept of "function name" introduced so far - although we will introduce it later.