More Javascript

Advanced Concepts

Andrew Krawchyk

3/15/15

Agenda

• First-class Functions
• Closure & Scope
• Object-Oriented Programming
• this

First-Class Functions

Functions are variables too

• Allows functions to be assigned to variables
• Allows functions to be passed as arguments
• Allows functions to be returned from functions
• Allows functions to remain anonymous

Function hoisting

Functions declared as functions are available all over: function declaration

functionExpression();

// undefined

 

functionDeclaration();

// "declaration called!"

 

var functionExpression =

 function() { ... };

 

functionDeclaration() { ... }

Functions expressed as variables are not available until that variable is declared: function expression

Passing functions as arguments

Adds even more dynamism to JavaScript

function transform(tFunc, obj) {

  Object.keys(obj).forEach(tFunc)

}

Adds even more dynamism to JavaScript

Returning functions from functions

Useful for:

var throttle = function(fn, frequency) {
    frequency || (frequency = 100);
    var throttle = false;
        
    return function(){
        if (throttle) {
            return;
        }
        throttle = setTimeout(function(){ 
            throttle = false;
        }, frequency);
        fn.apply(this, arguments);
    };
};

• Binding arguments to functions
• Saving functions for later
• Stopping function execution

.bind(context[, args...])

.call(context[, args...])

.apply(context[, [args])

Anonymous functions

Functions without names. Sometimes, you just don't need to reuse a function.

 

New functions create new scope, heavily used for this reason.

 

Also great for IIFE: immediately invoked function expression

var swigData = (function() {
    var d = { ... };
    var ret = d.common;

    Object.keys(d[options.env])

        .forEach(function(key) {
           ret[key] = d[options.env][key];
        });
    return { data: ret };
})();

Closure & Scope

It's all about nesting

• Nested functions create new scope
• Different types of scope
• Context can be saved
• Singleton pattern

Globally scoped

var globalVar = 'la terre';

(function() {

    console.log(globalVar);

})();

// always use var

(function() {
    a = 11;

    var b = 10;
})();

console.log(a);   // 11

console.log(b);   // Ref error

Available anywhere in our program

Generally to be avoided

Create scope for your application/website to live in

Return/expose what you need others to access

Locally scoped

var globalVar = 'la terre';

(function() {

    console.log(globalVar);

    var a = 10;

    console.log(a);   // 10

})();

console.log(a);   // Ref error

Available anywhere in your function

Best practice

Can indicate dependencies by passing arguments

Return/expose what you need others to access

(function($, em) {
    .... // local scope for globals
})(jQuery, Ember);

Closure

Remember values from one context regardless of the context in which they are called

function person(name) {
    function get() { return name; }
    function set(newName) {

         name = newName;  }
    return { g: get, s: set};
}

Great way to share context between functions

var getSetDave = person('Dave');
var getDave = getSetDave[0];
var setDave = getSetDave[1];

alert(getDave()); //'Dave'
setDave('Bob');
alert(getDave()); //'Bob'

var getSetMary = person('Mary');
var getMary = getSetMary[0];
var setMary = getSetMary[1];
alert(getMary()); //'Mary'

Singleton Pattern

Hides variables in a scope, out of harms way

Great for lazy loading

Only creates a class once and always uses it when asked for again

Example in above link

Object-Oriented Programming

Prototype

• Different than OOP
• Can act the same
• class keyword in ES6

Practice

jQuery Plugins: the making of