JavaScript: Patterns, Part 3

279 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
279
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript: Patterns, Part 3

  1. 1. JavaScript Patterns Part 3
  2. 2. Functions● apply ○ highlights the true nature of functions ○ multiple params via []● call ○ sugar for apply ○ single param● invocation ○ sugar for apply
  3. 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. 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. 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. 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. 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. 8. Functions    Callbacks ● event handlers ○ click, key press, mouseover, mousemove ● timeouts ○ setTimeout, setInterval ● great way to provide hooks for a library
  9. 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. 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. 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

×