JavaScript Functions <ul><li>We’ll Cover </li></ul><ul><ul><li>syntax </li></ul></ul><ul><ul><li>arguments </li></ul></ul>...
Why? <ul><li>Functions are first class </li></ul><ul><li>Closures are powerful </li></ul><ul><li>Building block of JS know...
The Basics var   square   =   function ( x ){ return   x * x ; } square(5) Function reference Function keyword Arguments C...
3 Ways to Declare a Function var   f   =   function (){ alert ( 'hi' )} function   f (){ alert ( 'hi' )} window . f   =   ...
Everything is an Object I ask &quot;girl can I have closures, canvas, advanced features for my project?&quot; You say &quo...
Functions are First Class <ul><li>Argument </li></ul><ul><li>Variable </li></ul><ul><li>Return </li></ul>var   f   =   fun...
Functions are First Class <ul><li>Object attribute </li></ul><ul><li>Array element </li></ul>var   obj   =   { func :   fu...
Passing Arguments <ul><li>Pass by value </li></ul><ul><li>Pass by reference </li></ul>function   change ( obj ){ obj . a =...
Context <ul><li>this keyword </li></ul>function   f (){ this . barkCount ++; } f();   var   dog   =   { barkCount :   0 , ...
Context <ul><li>Apply & Call </li></ul><ul><ul><li>Invoke as if function is a method of any object </li></ul></ul><ul><ul>...
Arguments <ul><li>Overloading functions </li></ul>function   sum (){ var   s   =   0 ; for ( var   i = 0 ;   i < arguments...
Arguments <ul><li>Argument length </li></ul>function   f ( a , b ){ if ( arguments . length   !=   f . length ) alert ( 'w...
Closures <ul><li>Functions can access the variables and functions declared in its scope </li></ul>var   a = 1 ; function  ...
Closures <ul><li>Private variables </li></ul>var   Dog   =   function (){ var   breed ; this . getBreed   =   function (){...
Closures <ul><li>Callbacks </li></ul>Todo   =   { markAsCompleted :   function ( task_name ){ MVC . Ajax ( '/complete/' + ...
Closures <ul><li>(function(){…})() </li></ul><ul><ul><li>Don’t pollute global namespace </li></ul></ul>( function (){ var ...
Closures <ul><li>Most Common Misunderstanding </li></ul><ul><ul><li>Closures store reference to variable, not a copy </li>...
Closures <ul><li>Most Common Misunderstanding </li></ul><ul><ul><li>Solution is another closure that “captures” state </li...
Two Things to Remember <ul><li>You can treat a function like any other object </li></ul><ul><li>Closures are a way to use ...
Upcoming SlideShare
Loading in …5
×

JavaScript Functions

1,733 views

Published on

Brian Moschel's March 2009 JS.Chi() presentation on JavaScript Functions.

Published in: Technology, Lifestyle
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,733
On SlideShare
0
From Embeds
0
Number of Embeds
192
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • By the end: Understand complex JS code Be comfortable with passing functions around like its nothin Have a decent understanding of closures and how to use them Fully “Functional”
  • JavaScript Functions

    1. 1. JavaScript Functions <ul><li>We’ll Cover </li></ul><ul><ul><li>syntax </li></ul></ul><ul><ul><li>arguments </li></ul></ul><ul><ul><li>context </li></ul></ul><ul><ul><li>closures </li></ul></ul><ul><li>Goal : you <3 JavaScript Functions </li></ul>You.learn() Jupiter IT
    2. 2. Why? <ul><li>Functions are first class </li></ul><ul><li>Closures are powerful </li></ul><ul><li>Building block of JS knowledge </li></ul>Jupiter IT
    3. 3. The Basics var square = function ( x ){ return x * x ; } square(5) Function reference Function keyword Arguments Code body Return value Jupiter IT
    4. 4. 3 Ways to Declare a Function var f = function (){ alert ( 'hi' )} function f (){ alert ( 'hi' )} window . f = function (){ alert ( 'hi' )} Jupiter IT
    5. 5. Everything is an Object I ask &quot;girl can I have closures, canvas, advanced features for my project?&quot; You say &quot;sure, but keep it simple, everything is an object&quot; I say &quot;JavaScript you've come a long way from copy-paste hacks&quot; You blush &quot;I know, but please, call me AJAX&quot; -- Digital Crush Jupiter IT var f = function ( a , b ){ return a - b }; var g = “hi”; var h = 1;
    6. 6. Functions are First Class <ul><li>Argument </li></ul><ul><li>Variable </li></ul><ul><li>Return </li></ul>var f = function ( a , b ){ return a - b }; [1,2,3,4].sort ( f ); var g = function (){ return true ;} function bark (){ return function (){ alert ( 'bark' ); } } Jupiter IT
    7. 7. Functions are First Class <ul><li>Object attribute </li></ul><ul><li>Array element </li></ul>var obj = { func : function (){ alert ( 'i am a function' ); } } obj.func(); var a = []; a [ 0 ] = function (){ return true ;} a[0](); Jupiter IT
    8. 8. Passing Arguments <ul><li>Pass by value </li></ul><ul><li>Pass by reference </li></ul>function change ( obj ){ obj . a = obj . val + 1 ; } var obj = { a : 1 }; change ( obj ); alert ( obj . a ); function change ( x ){ x = x + 1 ; } var a = 1 ; change ( a ); alert ( a ); Jupiter IT // alerts 1 // alerts 2
    9. 9. Context <ul><li>this keyword </li></ul>function f (){ this . barkCount ++; } f(); var dog = { barkCount : 0 , bark : function (){ this . barkCount ++; } } dog . bark (); Jupiter IT
    10. 10. Context <ul><li>Apply & Call </li></ul><ul><ul><li>Invoke as if function is a method of any object </li></ul></ul><ul><ul><li>Pass in an array of arguments </li></ul></ul>doYourBusiness . call ( dog , 1 , 2 ); doYourBusiness . apply ( dog , [ 1 , 2 ]); dog . doYourBusiness ( 1 , 2 ); Jupiter IT
    11. 11. Arguments <ul><li>Overloading functions </li></ul>function sum (){ var s = 0 ; for ( var i = 0 ; i < arguments . length ; i ++){ s += arguments [ i ]; } return s ; } alert ( sum ( 1 , 2 , 3 )); Jupiter IT // alerts 6
    12. 12. Arguments <ul><li>Argument length </li></ul>function f ( a , b ){ if ( arguments . length != f . length ) alert ( 'wrong nbr of args' ); else alert(‘right nbr of args’); } f ( 1 ); f ( 1,2 ); Jupiter IT // alerts “wrong nbr of args” // alerts “right nbr of args”
    13. 13. Closures <ul><li>Functions can access the variables and functions declared in its scope </li></ul>var a = 1 ; function f ( arg ){ alert ( a ); var b = 1 ; function g (){ alert ( a + b ); } g(); } Jupiter IT
    14. 14. Closures <ul><li>Private variables </li></ul>var Dog = function (){ var breed ; this . getBreed = function (){ return breed ; } this . setBreed = function ( newBreed ){ breed = newBreed ; } } var dog = new Dog (); dog . setBreed ( 'doberman' ); alert ( dog . getBreed ()); dog.breed Jupiter IT
    15. 15. Closures <ul><li>Callbacks </li></ul>Todo = { markAsCompleted : function ( task_name ){ MVC . Ajax ( '/complete/' + task_name , { onSuccess : function ( transport ){ alert ( task_name ); } }) } } Jupiter IT
    16. 16. Closures <ul><li>(function(){…})() </li></ul><ul><ul><li>Don’t pollute global namespace </li></ul></ul>( function (){ var count = 0 ; $ ( 'some_div' )[ 0 ]. click ( function (){ count = count + 1 ; alert ( count ); }) })(); Jupiter IT
    17. 17. Closures <ul><li>Most Common Misunderstanding </li></ul><ul><ul><li>Closures store reference to variable, not a copy </li></ul></ul>var a = {}; for ( var i = 0 ; i < 3 ; i ++){ a [ i ] = function (){ alert ( i )}; } a [ 0 ](); a [ 1 ](); a [ 2 ](); Jupiter IT // alerts 2 // alerts 2 // alerts 2
    18. 18. Closures <ul><li>Most Common Misunderstanding </li></ul><ul><ul><li>Solution is another closure that “captures” state </li></ul></ul>var a = {}; for ( var i = 0 ; i < 3 ; i ++){ ( function ( j ){ a [ j ] = function (){ alert ( j )}; })( i ) } a [ 0 ](); a [ 1 ](); a [ 2 ](); Jupiter IT // alerts 0 // alerts 1 // alerts 2
    19. 19. Two Things to Remember <ul><li>You can treat a function like any other object </li></ul><ul><li>Closures are a way to use outside variables inside a function </li></ul>Jupiter IT 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

    ×