MIT-AITI: Functions Defining and Invoking Functions Functions as Data Function Scope: The call Object Function Arguments: The arguments objects Function properties and Methods

Defining and Invoking Functions function Keyword Followed by name of function, list of parameters, and JavaScript statements contained within curly braces. Functions can have a return statement which causes it to stop executing and return the value of its expression

Example 1 Generic Form: function name(arg1, arg2) { statements; } Example: function write(msg) { document.write(msg + ” ”); }

Invoking functions Once a method is defined it is invoked using the () operator For example to invoke the previously defined method we would type the following write(“Hello,” + name); Note that within the parenthesis are the arguments which are separated by a comma if there are many.

More on Invocation Each expression specified between the parenthesis is evaluated and the resulting value used as an argument JavaScript is an untyped language You can determine the type by using the typeof operator On invocation the number of arguments are not checked. If more, the extra ones are ignored. If fewer the missing arguments are assigned undefined values

Nested Functions Function definition can occur within other function definitions Javascript uses lexical/Static scoping I.e. Functions are executed using the scope chain that was in effect when they were defined

Example 2 function SNR(stdev) { function square(x) {return x* x;} return 1/square(stdev); }

Function() Constructor Another way to create functions- makes use of the new operator e.g var f = new Function(“x”,“y”,“return x*y”); Function constructor expects any number of string arguments The last argument contains the body of the function whilst the other arguments specify the name of the parameters to the function being defined

Function() continued The Function() constructor has no argument that specifies the name of the function created. Anonymous functions Function() constructor allows us to build functions dynamically However, requires compilation each time its executed

Function Literals Yet another way to create functions A function literal is an expression that creates an unnamed lambda function Syntax is similar to that for the function statement except that its used as an expression and it has no name

Example 3 Function Literal; Var f = function(x){ return x*x} compare with Function Statement; function f(x) {return x*x;}

Function Literals continued; Suited for functions that are used only once. Functions specified by a function literal expression can be stored into a variable, passed to another function, or even invoked directly:

Example 4 a[0] = function(x) { return x*x;} //Define function and store it. a.sort(function(a,b) {return a-b;}); //Define a function; pass it to another. var tensqaured = (function(x) {return x*x;})(10); //Define and invoke. What is the advantage of using a Function literal over the Function() command

Functions as data Functions in Javascript are data and are therefore treated as any other data value. I.e they can be assigned to variables, stored in properties of objects or the elements of arrays: Operations performed on data can therefore be performed on functions

Example 5 function square(x) {return x*x;} this creates a new function object and assigns it the name square. We assign it to another variable and note it works in the same way b=square;//b now refers to the same function as square does c=b(5); // c has the value 25

Example 6 Functions can be assigned to Object properties rather than global variables o = new Object(); o.square = new Function(“x”,“return x*x”); // Note Function() constructor y=o.square(16);

Example 7 functions don’t require names as when they are assigned to array elements a= new array (10); a[0] = function(x) {return x*x;} // Note function literal a[1] = 20; a[2]= a[0](a[1]); a[2] contains 400

Function Scope The body of a Javascript function executes in a local scope that differs from the Global scope Local variables declared with the var statement are created as properties of the call object and so too are the parameters of the function. In addition to local variables and parameters the call object defines a property called arguments

Function Arguments Arguments is a special property of the call object that refers to an arguments object The above object has a number of properties and also doubles as an array. The arguments[] array hold argument values that were passed to the function.

More on arguments If you invoke a function with two parameters; this can be accessed by the the variables arguments[0] and arguments[1]. The arguments object has a length property that specifies the number of elements it contains. This property is useful in checking if a function is invoked with the correct number of arguments.

Some more on Arguments Two other properties of the argument project are the callee and caller property callee property refers to the function being currently executed. This is useful in allowing unnamed functions to call themselves recursively.

Example 8 function(x) { if(x>1) return x*arguments.callee(x-1); return x; }

And yet more caller property refers to the calling context from which the current function was invoked It does not refer to the function that invoked the current one. To refer to a calling function we must therefore use arguments.caller.callee

Function Properties and Methods The length property of a function returns the number of parameters the function expects to be passed. The length function is available both inside and outside the functions body. Arity is the new property name for length in Navigator 4 This property is useful when determining if correct number of parameters have been passed

Prototype Property Every function has a prototype property that refers to a predefined prototype object: we will learn about this some more in the next chapter You can define your own properties to a function object. This has a direct application when one wants to create static variables for use on the function alone.

Example 9 idno.counter = 0; function idno() { return idno.counter++; }

apply() in Navigator4 this method allows you to invoke a function as if it were a method of another object e.g. f.apply(o, [1,2]); this is similar to, o.m = f; o.m(1,2); delete o.m;

call() in Navigator5 Behaves like apply() except that the arguments to be passed to the function are passed as an argument list as opposed to an array e.g. f.call(o,1,2); //Arguments passed directly in an argument list.