JavaScript: Patterns, Part 3

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. JavaScript Patterns Part 3
  • 2. Functions● apply ○ highlights the true nature of functions ○ multiple params via []● call ○ sugar for apply ○ single param● invocation ○ sugar for apply
  • 3. Functions● First-class objects● Local scope● Different ways to utilize ○ Declarations ○ Expressions ■ Constructors ■ Built-in ■ Custom ■ Variables ■ named and anonymous ■ can be assigned, copied, augmented, passed, returned
  • 4. FunctionsScope ● functions provide scope ● curly braces/blocks do notNamed vs. Unnamed/Anonymous ● named ○ name extremely useful for debugging ○ name needed for recursive functions ○ name is read-only ○ name is not standard, but mostly available ○ assigning a different name than the var is a bad idea ■ its possible, but not properly implemented in IE ● anonymous ○ undefined in IE ○ empty string in WebKit
  • 5. Functions    Expressions vs. Declarations ● declarations ○ part of program code (in another function or on global) ○ dont end with semi-colon ● expressions ○ may require semi-colon ○ used to create custom objects ● some prefer expressions over declarations
  • 6. FunctionsFunction Hoisting ● remember variable hoisting? ○ var declarations get hoisted to top of scope ○ the var assignments do not ● theres function hoisting too! ○ function declaration definitions get hoisted ALONG with their declarations ○ function expression definitions are not hoisted, just the variable declaration
  • 7. FunctionsCallbacks ● since functions are objects they can be passed ○ pass anonymous functions inline ○ pass declaration references ○ make sure to guard against misuse ● passed callback often belongs to some object ○ watch out for scope issues and this ○ if object method used as callback uses this ■ it work as expected when not passed as callback ■ when used as callback this will not refer to the object the method belongs to, it will refer to the scope it is call-backed from ■ solution is to also pass the object and use call
  • 8. Functions    Callbacks ● event handlers ○ click, key press, mouseover, mousemove ● timeouts ○ setTimeout, setInterval ● great way to provide hooks for a library
  • 9. FunctionsReturning ● values, objects, or... other functions ○ one-time initializing ○ create scope for private varRedefining ● overwrite function assignment inside the function ○ one-time initializing, private scope for vars ○ gotchas ■ function properties could be lost ■ re-assignment to new name will mess it up
  • 10. FunctionsImmediate Functions ● wrap chunks of code without polluting global ● uses a function expression ● executes immediately ● wrapped in parens OR set to var ● can pass in parameters ○ any various props ○ reference to global ○ reference to a parent application object ○ if more than 2, consider a configuration object ● can return values, functions, objects ● can be nested
  • 11. FunctionsMemoization ● fancy word for cache ● functions have built-in properties, like length ● add your own and call it cache ● use it to store expensive data ● for multiple/complex stored values: serialize ○ gotcha: input objects with same properties