SlideShare a Scribd company logo

Functions - complex first class citizen

•
•
Vytautas Butkus
Vytautas Butkus

This document discusses functions in JavaScript. It defines a function as a block of code that performs a task and can be called multiple times. Functions are first-class objects that can be passed as arguments to other functions, returned from functions, and assigned to variables or object properties. Functions provide their own execution context and scope their variables to the function body. Functions are defined either with a function expression or function declaration and are called directly by name or indirectly via methods like call, apply, setTimeout. The value of the this keyword inside a function depends on how the function is called and refers to the execution context object.

1 of 16
Download to read offline
Functions - complex first class citizen Vytautas Butkus
Content ● What is a function? ● Defining functions ● Calling functions ● Context
What is a function?.. Mathematical: f(x) -> x * x Javascript: function (x) { return x * x; } Square Function
...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;
...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
...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
Content ● What is a function? ● Defining functions ● Calling functions ● Context
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)
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
Content ● What is a function? ● Defining functions ● Calling functions ● Context
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,...);
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');
Content ● What is a function? ● Defining functions ● Calling functions ● Context
Context ● Context === this ● this === { ... }
Context ● Context === this ● this === { ... }
Thank you! Questions?

More Related Content

Functions - complex first class citizen

  • 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 === { ... }