Functions and Closures

1. Functions and Closures

2. JavaScript Closures Are Everywhere • In JS we often want to say “when this thing happens, do something” • event driven programming • For example: • When the user clicks on an image, show a bigger version of the image • On clicking the image, show a new image styled a particular way. • This is all done through closures

3. All functions are closures! So what is a Closure?

4. Lexis means word (greek) “the words are bound/enclosed” Lexical Closure

5. Function Definition • function foo(bar) { • return 1+1; • } • console.log(typeof foo);

6. Function Expression • var foo = function (bar) { • return 1+1; • }; • console.log(typeof foo);

7. Functions take parameters and return a value (an Object)

8. Notice the lack of difference between a function expression and definition. They’re the same!

9. Functions are just another type of object like String, Date, Array, Number, etc.

10. Let’s consider the implications

11. We can instantiate an object inside our function and return it • function foo() { • var d = new Date(); • return d.toLocaleString(); • } • console.log(foo()); • // this looks normal

12. We can instantiate an object inside our function and return it • varfoo = function() { • var s = "and on earth peace to all people of good will"; • return s; • } • console.log(foo()); • // this looks normal

13. What happens if we replace a common object (like Date or String) with Function object?

14. We can instantiate an object inside our function and return it • function foo() { //<-- the outer function • var bar = function () { //<-- the inner function • return "hello world from an inner function"; • }; • return bar; • } • varaFunction = foo(); • console.log(aFunciton()); • // this looks weird at first.

15. There are some interesting repercussions of this.

16. The inner function’s scope includes the scope of the outer function Feel free to read that a few times.

17. When you can reference a variable Reminder: What is Scope?

18. function scope as you’re used to it. • var n = 1; • function foo() { • var n = 2; • console.log("n ==="n); • } • console.log("n === " +n); • foo(); console.log("n === " +n);

19. function scope in functional languages • var n = 1, inner; • function foo() { • var n = 2; • console.log("n ===", n); • return function () { • console.log("inner n === " + n); • }; • } • console.log("n === " + n); • inner = foo(); • inner(); • console.log("n === " + n);

20. It also means this will print 1 each time • var n = 1, inner; • function foo() { • console.log("n ===" +n); • return function () { • console.log("inner n === " +n); • }; • } • console.log("n === " +n); • inner = foo(); • inner(); • console.log("n ===" +n);

21. A Partial Summary • Variables from outer functions are available to inner functions.

22. So what’s a global variable? A variable which forces itself from an inner scope into an outer.

23. Why do this? An example with setTimeout

24. Takes a function and a time. Will call the function after that many seconds setTimeout

25. Simple reminder script • var reminder = prompt("What do you need to be reminded of?"); • setTimeout(function () { • alert(reminder) • }, 10);