Successfully reported this slideshow.
Your SlideShare is downloading. ×

Functions - complex first class citizen

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 16 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Functions - complex first class citizen

  1. 1. Functions - complex first class citizen Vytautas Butkus
  2. 2. Content ● What is a function? ● Defining functions ● Calling functions ● Context
  3. 3. What is a function?.. Mathematical: f(x) -> x * x Javascript: function (x) { return x * x; } Square Function
  4. 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. 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. 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. 7. Content ● What is a function? ● Defining functions ● Calling functions ● Context
  8. 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. 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. 10. Content ● What is a function? ● Defining functions ● Calling functions ● Context
  11. 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. 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. 13. Content ● What is a function? ● Defining functions ● Calling functions ● Context
  14. 14. Context ● Context === this ● this === { ... }
  15. 15. Context ● Context === this ● this === { ... }
  16. 16. Thank you! Questions?

×