This document summarizes JavaScript functions and patterns. It covers function application using call and apply, functions as first-class objects with local scope, different ways to declare functions like expressions and constructors. It also discusses named vs anonymous functions, function hoisting, functions as callbacks, returning and redefining functions, immediate functions, and memoization.
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. Functions
Scope
● functions provide scope
● curly braces/blocks do not
Named 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
■ it's 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)
○ don't end with semi-colon
● expressions
○ may require semi-colon
○ used to create custom objects
● some prefer expressions over declarations
6. Functions
Function Hoisting
● remember variable hoisting?
○ var declarations get hoisted to top of scope
○ the var assignments do not
● there's function hoisting too!
○ function declaration definitions get hoisted ALONG with
their declarations
○ function expression definitions are not hoisted, just the variable
declaration
7. Functions
Callbacks
● 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. Functions
Returning
● values, objects, or... other functions
○ one-time initializing
○ create scope for private var
Redefining
● overwrite function assignment inside the function
○ one-time initializing, private scope for var's
○ gotchas
■ function properties could be lost
■ re-assignment to new name will mess it up
10. Functions
Immediate 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. Functions
Memoization
● 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