JavaScript Functions

1. JavaScript Functions • We’ll Cover • syntax • arguments • context • closures • Goal: you <3 JavaScript Functions You.learn() Jupiter IT

2. Why? • Functions are first class • Closures are powerful • Building block of JS knowledge Jupiter IT

3. The Basics Function keyword Arguments Function reference varsquare=function(x){ returnx*x; } square(5) Code body Return value Jupiter IT

4. 3 Ways to Declare a Function varf=function(){alert('hi')} functionf(){alert('hi')} window.f=function(){alert('hi')} Jupiter IT

5. Everything is an Object varf=function(a,b){returna-b}; varg= “hi”; varh= 1; I ask "girl can I have closures, canvas, advanced features for my project?"You say "sure, but keep it simple, everything is an object"I say "JavaScript you've come a long way from copy-paste hacks"You blush "I know, but please, call me AJAX" -- Digital Crush Jupiter IT

6. Functions are First Class • Argument • Variable • Return varf=function(a,b){returna-b}; [1,2,3,4].sort(f); varg=function(){returntrue;} functionbark(){ returnfunction(){ alert('bark'); } } Jupiter IT

7. Functions are First Class • Object attribute • Array element varobj={ func:function(){ alert('i am a function'); } } obj.func(); vara=[]; a[0]=function(){returntrue;} a[0](); Jupiter IT

8. Passing Arguments • Pass by value • Pass by reference functionchange(x){ x=x+1; } vara=1; change(a); alert(a); // alerts 1 functionchange(obj){ obj.a=obj.val+1; } varobj={ a:1 }; change(obj); alert(obj.a); // alerts 2 Jupiter IT

9. Context • this keyword functionf(){ this.barkCount++; } f(); vardog={ barkCount:0, bark:function(){ this.barkCount++; } } dog.bark(); Jupiter IT

10. Context • Apply & Call • Invoke as if function is a method of any object • Pass in an array of arguments doYourBusiness.call(dog,1,2); doYourBusiness.apply(dog,[1,2]); dog.doYourBusiness(1,2); Jupiter IT

11. Arguments • Overloading functions functionsum(){ vars=0; for(vari=0;i<arguments.length;i++){ s+=arguments[i]; } returns; } alert(sum(1,2,3)); // alerts 6 Jupiter IT

12. Arguments • Argument length functionf(a,b){ if(arguments.length!=f.length) alert('wrong nbr of args'); else alert(‘right nbr of args’); } f(1); f(1,2); // alerts “wrong nbr of args” // alerts “right nbr of args” Jupiter IT

13. Closures • Functions can access the variables and functions declared in its scope vara=1; functionf(arg){ alert(a); varb=1; functiong(){ alert(a+b); } g(); } Jupiter IT

14. Closures • Private variables varDog=function(){ varbreed; this.getBreed=function(){ returnbreed; } this.setBreed=function(newBreed){ breed=newBreed; } } vardog=newDog(); dog.setBreed('doberman'); alert(dog.getBreed()); dog.breed Jupiter IT

15. Closures • Callbacks Todo={ markAsCompleted:function(task_name){ MVC.Ajax('/complete/'+task_name,{ onSuccess:function(transport){ alert(task_name); } }) } } Jupiter IT

16. Closures • (function(){…})() • Don’t pollute global namespace (function(){ varcount=0; $('some_div')[0].click(function(){ count=count+1; alert(count); }) })(); Jupiter IT

17. Closures • Most Common Misunderstanding • Closures store reference to variable, not a copy vara={}; for(vari=0;i<3;i++){ a[i]=function(){alert(i)}; } a[0](); a[1](); a[2](); // alerts 2 // alerts 2 // alerts 2 Jupiter IT

18. Closures • Most Common Misunderstanding • Solution is another closure that “captures” state vara={}; for(vari=0;i<3;i++){ (function(j){ a[j]=function(){alert(j)}; })(i) } a[0](); a[1](); a[2](); // alerts 0 // alerts 1 // alerts 2 Jupiter IT

19. Two Things to Remember • You can treat a function like any other object • Closures are a way to use outside variables inside a function Poppin' bottles with Document Object Models,So many lonely nights with Prototype.Opera, IE, Firefox, or Chrome,I write cross browser code and give you a home. -- Digital Crush Jupiter IT