JavaScript Functions
Download as PPT, PDF2 likes1,711 views
This document discusses JavaScript functions and closures. It covers function syntax, arguments, context, and closures. Functions are the building blocks of JavaScript and can be declared in multiple ways. Functions are first-class objects that can be passed as arguments, assigned to variables, and returned from other functions. Closures allow functions to access variables from the scope in which they were declared even after that scope has closed. The most common misunderstanding with closures is that they store references to variables rather than copies.
![Functions are First Class Argument Variable Return 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](https://image.slidesharecdn.com/ajax3-090325052419-phpapp01/85/JavaScript-Functions-6-320.jpg)
![Functions are First Class Object attribute Array element var obj = { func : function (){ alert ( 'i am a function' ); } } obj.func(); var a = []; a [ 0 ] = function (){ return true ;} a[0](); Jupiter IT](https://image.slidesharecdn.com/ajax3-090325052419-phpapp01/85/JavaScript-Functions-7-320.jpg)
![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](https://image.slidesharecdn.com/ajax3-090325052419-phpapp01/85/JavaScript-Functions-10-320.jpg)
![Arguments Overloading functions 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](https://image.slidesharecdn.com/ajax3-090325052419-phpapp01/85/JavaScript-Functions-11-320.jpg)
![Closures (function(){…})() Don’t pollute global namespace ( function (){ var count = 0 ; $ ( 'some_div' )[ 0 ]. click ( function (){ count = count + 1 ; alert ( count ); }) })(); Jupiter IT](https://image.slidesharecdn.com/ajax3-090325052419-phpapp01/85/JavaScript-Functions-16-320.jpg)
![Closures Most Common Misunderstanding Closures store reference to variable, not a copy 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](https://image.slidesharecdn.com/ajax3-090325052419-phpapp01/85/JavaScript-Functions-17-320.jpg)
![Closures Most Common Misunderstanding Solution is another closure that “captures” state 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](https://image.slidesharecdn.com/ajax3-090325052419-phpapp01/85/JavaScript-Functions-18-320.jpg)
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 var square = function ( x ){ return x * x ; } square(5) Function reference Function keyword Arguments Code body Return value Jupiter IT
- 4. 3 Ways to Declare a Function var f = function (){ alert ( 'hi' )} function f (){ alert ( 'hi' )} window . f = function (){ alert ( 'hi' )} Jupiter IT
- 5. Everything is an Object 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 var f = function ( a , b ){ return a - b }; var g = “hi”; var h = 1;
- 6. Functions are First Class Argument Variable Return 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. Functions are First Class Object attribute Array element var obj = { func : function (){ alert ( 'i am a function' ); } } obj.func(); var a = []; a [ 0 ] = function (){ return true ;} a[0](); Jupiter IT
- 8. Passing Arguments Pass by value Pass by reference 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. Context this keyword function f (){ this . barkCount ++; } f(); var dog = { 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 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. Arguments Argument length 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. Closures Functions can access the variables and functions declared in its scope var a = 1 ; function f ( arg ){ alert ( a ); var b = 1 ; function g (){ alert ( a + b ); } g(); } Jupiter IT
- 14. Closures Private variables 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. 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 (){ var count = 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 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. Closures Most Common Misunderstanding Solution is another closure that “captures” state 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. Two Things to Remember You can treat a function like any other object Closures are a way to use outside variables inside a function 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
Editor's Notes
- #2: 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”