MIT-AITI: Functions

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

2. 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

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

4. 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.

5. 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

6. 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

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

8. 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

9. 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

10. 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

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

12. 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:

13. 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

14. 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

15. 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

16. 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);

17. 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

18. 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

19. 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.

20. 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.

21. 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.

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

23. 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

24. 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

25. 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.

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

27. 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;

28. 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 argumentlist.