1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. 22 Outline Review JavaScript Programming Closure Anonymous functions Recursion Next Class JavaScript Objects

3. Closure A JavaScript function is an object. In JavaScript, a closure is created when a function is defined within another function (function nesting) 3

4. Closure The nested (inner) function is private to its containing (outer) function. The inner function can be accessed only from statements in the outer function. The inner function can use the arguments and variables of the outer function, The outer function cannot use the arguments and variables of the inner function. 4

5. Closure - Example function addSq(a, b) { var y = Number(prompt("Enter a number", "0")); return add(y); // return add(y + x); // error- x is not defined // outer function cannot access variables in inner func function add(x) { return sq(a)+ sq(b)+ sq(x); } function sq(n) { return n*n;} } alert(addSq(2,3)); sq(6); // error – sq is not defined // inner function is private to outer function 5

6. Multiply-nested functions function A(x) { B(2); function B(y) { C(3); function C(z) { alert(x + y + z); } } A(1); 6 B can access A C can access A & B => Scope chaining A cannot access B or C B cannot access C

7. Closure – Name Conflicts When two arguments or variables in the scopes of a closure have the same name, there is a name conflict. More inner scopes take precedence, so the inner- most scope takes the highest precedence, while the outer-most scope takes the lowest. 7

8. Example: function outside(y) { var x = 10; return inside(); function inside() { // var y = 100; return x+y; } alert( outside(20)); 8 Closure – Name Conflicts Display ? if remove //

9. Anonymous Function Dynamically declared at runtime. Not given a name. Are declared using the function operator instead of function declaration. E.g.: var sq = function(x) { return x*x; }; alert(sq(3)); var y = sq; alert(y(3)); 9

10. Closure & Anonymous function function sum(a) { var sum2 = function(x, y) { return a+ x+y; }; return sum2; } //alert (sum(100)(2,4)); // this line is equivalent to the next two lines var temp = sum(100); alert(temp(2,4)); 10

11. Why closures? Analogy to OOP. – A closure makes it possible to associate some data (the environment) with a function to operate on the data. – This is analogous to Object Oriented Programming (OOP), where we can associate some data (properties) to the object with one or more methods – The scoped variables in the inner function become private variables, which is the “Encapsulation” in Object Oriented Programming. 11

12. Why closures? Private methods. The mechanism of closures, (inner function can only be accessed/ invoked by its outer function), implements the same concept of private methods in other Object Oriented Programming (OOP) languages. Private methods provide powerful ways to manage the global namespace to keep the non-essential methods from cluttering up the public interface. 12

13. Why closures? Avoid global variables. Global variables are not reliable. They are not secure. They may conflict with other global variables in the same application which may cause your code failure and their code failure. And it is almost impossible to test it. 13

14. Why closures? Function factory. you can create more functions with the same function body definition and different environments 14 function makeAdder(x) { return function(y) { return x + y; }; } var add5 = makeAdder(5); var add10 = makeAdder(10); alert(add5(2)); // 7 alert(add10(2)); // 12

15. Recursive Functions A function that calls itself. function factorial(n) { return (n <= 1) ? 1 : n * factorial(n-1); } // recursion do { var x = Number(prompt("Enter a number (0 to stop):", “1”)); alert("The factorial of "+ x + " is: "+ factorial(x)); } while (x != 0); 15

16. Next Class JavaScript Objects 16

17. Thank you!