Functions - complex first class citizen

697 views
619 views

Published on

From basic to complex stuff about Functions in Javascript

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
697
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Functions - complex first class citizen

  1. 1. Functions - complex firstclass citizenVytautas Butkus
  2. 2. Content● What is a function?● Defining functions● Calling functions● Context
  3. 3. What is a function?..Mathematical:f(x) -> x * xJavascript: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 functions 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 functions 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})()})()})()})()VSvar 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 created2. Assign object { } internal [[Prototype]] property to the prototypeproperty 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?

×