From basic to complex stuff about Functions in Javascript

1. Functions - complex first
class citizen
Vytautas Butkus

2. Content
● What is a function?
● Defining functions
● Calling functions
● Context

3. What is a function?..
Mathematical:
f(x) -> x * x
Javascript:
function (x) {
return x * x;
}
Square Function

4. ...what else is a function?
● Functions are objects
○ function() {} instanceof Object //true
○ Can be passed as an argument
- doMagic(function () {})
- function magic() {}; addPower(magic);
○ Can have other objects/functions as properties
- typeof $ //"function"
- $.Event, $.ajax, $.each, etc..
○ Always passed by reference
- function addPower (fn) { fn.fire = true; }
- magic.fire //true;

5. ...what else is a function?
● Function is a scope provider
○ No scope in if (condition) { ... } else { ... } blocks
○ Variables are scoped to function's body block

6. ...what else is a function?
● Function is a scope provider
○ No scope in if (condition) { ... } else { ... } blocks
○ Variables are scoped to function's body block

7. Content
● What is a function?
● Defining functions
● Calling functions
● Context

8. Defining functions
● Function expression
○ var expression = function (arg1, arg2) { ... }
○ Anonymous callback functions
● Function declaration
○ function declaredFunction (arg1, arg2) { ... }
○ always hoisted to the top
○ named functions
● IIFE (Immediately-Invoked Function Expression)
○ (function () { ... })(); //Anonymous function
○ Used to create variable scopes (basically memory leaks)
○ Used to define modules (must return reference)

9. Named functions
(function firstClosure () {
(function secondClosure () {
(function thirdClosure () {
(function fourthClosure () {
console.log(1);
debugger
})()
})()
})()
})()
(function () {
(function () {
(function () {
(function () {
console.log(1);
debugger
})()
})()
})()
})()
VS
var activity = function workout () { ... }
totally legal

10. Content
● What is a function?
● Defining functions
● Calling functions
● Context

11. Calling functions
● Function(arg1, arg2,...);
● Function.call(context, arg1, arg2,...);
● Function.apply(context, [arguments]);
● setTimeout(Function, delay, arg1, arg2,...);
● setInterval(Function, delay, arg1, arg2,...);
○ requestAnimationFrame(...);
● new Function(arg1, arg2,...);

12. Calling functions
● Function(arg1, arg2,...);
● Function.call(context, arg1, arg2,...);
● Function.apply(context, [arguments]);
● setTimeout(Function, delay, arg1, arg2,...);
● setInterval(Function, delay, arg1, arg2,...);
● new Function(arg1, arg2,...);
Black magic explained:
1. New object { } is created
2. Assign object { } internal [[Prototype]] property to the prototype
property of Person
- object { }.[[prototype]] = Person.prototype;
3. Call Person as normal, passing it the object { } as this:
- Person.call(object { }, 'Jim');

13. Content
● What is a function?
● Defining functions
● Calling functions
● Context

14. Context
● Context === this
● this === { ... }

15. Context
● Context === this
● this === { ... }

16. Thank you! Questions?