From the base syntax, we can create the first function form, called a function declaration. A function declaration is the simplest of all function forms, and most developers use this form for their code. The following code defines a new function called add:

// a function named `add`
function add(a, b){
    return a + b;
};

console.log(typeof add);    // 'function'
console.log(add.name);      // 'add'
console.log(add.length);    // 2

console.log(add(20, 5));    // 25

The identifier in a function declaration is required, and it will be used to create a variable in the current scope whose value is the function. In our example, an add variable is created in the global scope with the name property of add, equivalent to the function identifier, and the length property is 2 because we have two formal parameters.

Because JavaScript is lexically scoped, identifiers are scoped based on where they are defined rather than on their syntax or where they are executed. This is important to remember because JavaScript allows us to define functions inside other functions and scoping rules might get confusing:

// outer function, global scope
function outer(){

    // inner function, local scope
    function inner(){
        // ...
    };

};

// check the outer function
console.log(typeof outer);  // 'function'

// run outer to create the new functions
outer();

// check the inner function
console.log(typeof inner);  // 'undefined'

In this example, an outer variable is created in the global scope and given the value of our outer function. When it is invoked, the outer function creates a local variable called inner that is given the value of our inner function. When we check the values using the typeof operator, the outer function appears available in the global scope but the inner function is available only from inside the outer function—because the inner function is stored in a local variable.

Because a function declaration also creates a variable with the same name as its identifier, you have to make sure that there are no variables with the same name as the identifier in your current scope. Otherwise, it'll override the value of that variable with the function:

// a variable in the current scope
var items = 1;

// a function declaration with the
// same name; overrides value
function items(){
    // ...
};

console.log(typeof items); // 'function', not 'number'

We'll learn more about the details of JavaScript's scoping in a while, so let's first take a look at other function forms.

The next form takes advantage of the fact that functions can be stored in variables. This form is called a function expression because rather than explicitly defining a function, you "express" a function as a value of a variable.

Here's the same add function we declared above, but using a function expression.

var add = function(a, b){
    return a + b;
};

console.log(typeof add);    // 'function'
console.log(add.name);      // '' or 'anonymous'
console.log(add.length);    // 2

console.log(add(20, 5));    // 25

In this example, we create a function literal that becomes the value of our variable add. We can then use this variable to invoke our function, as illustrated on the last line where we use the function to add two numbers.

You'll notice that the length property of the function is the same as its function declaration counterpart, but the name property is different. In some JavaScript interpreters, its value will be a blank string (''), while in others it'll be 'anonymous'. This happens because we didn't specify an identifier for the function literal. In JavaScript, a function without an explicit identifier is called an anonymous function.

The scoping rules for function expressions are a bit different from function declarations because they depend on variable scoping. Remember that in JavaScript, the var keyword defines a variable to be scoped locally, and omitting the keyword creates a global variable instead:

// outer function, global scope
var outer = function(){

    // inner function, local scope
    var localInner = function(){
        // ...
    };

    // inner function, global scope
    globalInner = function(){
        // ...
    };

};

// check the outer function
console.log(typeof outer);          // 'function'

// run outer to create the new functions
outer();

// check the new functions
console.log(typeof localInner);     // 'undefined'
console.log(typeof globalInner);    // 'function'

The function outer is defined to be of global scope, because while we use the var keyword, it's on the top level of the application. Inside the function are two other functions, localInner and globalInner. The localInner function is stored in a variable that's local to the inside of the outer function and can't be accessed in the global scope. However, globalInner is stored in a variable that's defined without the var keyword, making both the variable and the function it contains global.

Although function expressions are usually written using anonymous functions, you can also specify an explicit identifier for your function. This is a variation of the function expression called a named function expression.

var add = function add(a, b){
    return a + b;
};

console.log(typeof add);    // 'function'
console.log(add.name);      // 'add'
console.log(add.length);    // 2

console.log(add(20, 5));    // 25

This example is the same as a function expression that uses an anonymous function, but we specify an identifier for the function literal. Unlike in the previous example, the name property of this function is 'add', which is consistent with the identifier we specified, rather than 'anonymous' or an empty string.

JavaScript allows an explicit identifier for function expressions so that a function can reference itself from the inside. You might be asking why you'd need this feature, so let's look at two different examples.

var myFn = function(){
    // reference the function
    console.log(typeof myFn);
};

myFn(); // 'function'

In the example above, the function myFn could easily reference itself via the variable holding it because the variable that contains the function is available inside the function scope. However, consider the next example:

// global scope
var createFn = function(){

    // result function
    return function(){
        console.log(typeof myFn);
    };

};

// different scope
(function(){

    // put the result function of `createFn`
    // into a local variable
    var myFn = createFn();

    // check if reference is available
    myFn(); // 'undefined'

})();

This example might be a little too complex, but we'll tackle the details later. Right now, just focus on the functions. In our global scope, we create a new function called createFn, which returns a new logging function like our previous example. Next, we create a new localized scope and define a variable myFn and assign the return value of createFn.

The code is similar to the earlier example, but here we use the function value that's returned from another function instead of directly assigning the function literal to the variable. Also, the variable myFn is on a different localized scope, which is not accessible to our resulting function value. Thus, it'll log 'undefined' rather than 'function' in this case, because the scoping doesn't allow the function to reference itself via the variable holding it.

By adding an explicit identifier to our result function, we'll be able to reference the function itself even if we don't have access to the variable holding it:

// global scope
var createFn = function(){

    // result function, with identifier
    return function myFn(){
        console.log(typeof myFn);
    };

};

// a different scope
(function(){

    // put the result function of `createFn`
    // into a local variable
    var myFn = createFn();

    // check if reference is available
    myFn(); // 'function'

})();

Adding an explicit identifier is like creating a new variable that's available from inside the function that can be used to reference the function itself, making it possible for the function to call itself from the inside (for recursive operations) or perform actions on itself.

A named function declaration has the same scoping rules as a function declaration with an anonymous function: the scope of the variable determines whether the function will be local or global. However, the additional identifier has a different scoping rule: it's only available from inside the function.

// a function with different identifiers
var myFn = function fnID(){
    console.log(typeof fnID);
};

// the variable
console.log(typeof myFn);   // 'function'

// the identifier
console.log(typeof fnID);   // 'undefined'

myFn(); // 'function'

This example shows that while the variable myFn could be used to reference the function, the identifier fnID isn't accessible from the outside. However, accessing this identifier variable from the inside of the function itself works.

The last function form, the function object, is different from all the rest because it does not use a function literal. The basic syntax of this form is as follows:

// a function object
new Function('FormalArgument1', 'FormalArgument2', ..., 'FunctionBody'),

Here, we use the Function constructor to create a new function by passing strings as arguments. The first arguments define the named arguments for the function, and the last argument defines the function body.

Here's our add function using this form:

var add = new Function('a', 'b', 'return a + b;'),

console.log(typeof add);    // 'function'

console.log(add.name);      // '' or 'anonymous'
console.log(add.length);    // 2

console.log(add(20, 5));    // 25

You'll notice that the code is similar to using an anonymous function literal. Like an anonymous function, a function object has either a blank string or 'anonymous' for its name property value. In the first line, we create a new function using the Function constructor, passing in the arguments 'a', 'b', and 'return a + b;'. The first two strings will become the named arguments of the function, and the final string will become the function body. Using this form is like using eval: the last string argument is turned into executable JavaScript code and used as the body of the function.

While this form has its uses, as we'll see in later in this book where it'll be used as a templating engine, a Function object has a disadvantage over a function literal because the function's scope is limited to the global scope:

// global variable
var x = 1;

// localized scope
(function(){

    // local x variable
    var x = 5;

    // a function object
    var myFn = new Function('console.log(x);'),
    myFn(); // 1, not 5.

})();

Even though we have a local variable x in our separate scope, the function object will not be able to reference this because it's evaluated in the global scope.

JavaScript differentiates between three kinds of executable code:

The following example shows these different kinds of executable code:

// this is global code
var name = 'John';
var age = 20;

function add(a, b){
    // this is function code
    var result = a + b;
    return result;
};

(function(){
    // this is function code
    var day = 'Tuesday';

var time = function(){
        // this is also function code,
        // but it is separate from the code
        // above
        return day;
    };
})();

// this is eval code
eval('alert("yay!");'),

The variables name, age, and most of the functions we created all reside in the top level, which mean they're global code. However, the code inside functions is function code, and it's seen as separate from the global code. In cases where there are functions inside other functions, the content of the inner functions is also treated as separate function code—which is why the code inside the time function is separate.

So why do we have different types of code in JavaScript? In order to keep track of exactly where it is when interpreting code, the JavaScript interpreter uses an internal mechanism called an execution context. During the course of running a script, JavaScript will create and enter several execution contexts, not only to keep track of its location within the program but also to store data that's used for proper execution of the program.

A JavaScript program will have at least one execution context, normally called the global execution context. When a JavaScript interpreter starts executing your program, it "enters" the global execution context and begins interpreting the code using this execution context. When it encounters a function, the interpreter creates a new execution context and then enters this new context and executes the function code using this context. When the function has finished executing or when it has returned a value, the interpreter exits the execution context and returns to the previous one.

This might get confusing, so let's clear it up a bit with a little example.

var a = 1;

var add = function(a, b){
    return a + b;
};

var callAdd = function(a, b){
    return add(a, b);
};

add(a, 2);

callAdd(1, 2);

This code is simple enough to understand, and it's a good example of how JavaScript creates, enters, and leaves execution contexts. Let's go through it step by step:

Execution contexts may be a bit confusing but since you'll never actually deal with them directly with your code, it's acceptable if you don't understand them fully at first. Still, a question comes to mind: if we're not gonna deal directly with execution contexts, why do we need to discuss them?

The answer lies in the other uses for execution contexts. I already mentioned that JavaScript interpreters use execution contexts to keep track of their position in the code, but aside from this important use, several internal objects are also associated with execution contexts that directly affect your JavaScript program.

The first of these internal objects is the variable object. Each execution context has its own variable object that's used to keep track of all the variables that are defined within that context.

The process of creating variables in JavaScript is called variable instantiation. Because JavaScript is a lexically-scoped language, the scope of a variable depends on where it is instantiated in your code. The only exceptions to this rule are global variables created by omitting the var keyword:

var fruit = 'banana';

var add = function(a, b){
    var localResult = a + b;
    globalResult = localResult;
    return localResult;
};

add(1, 2);

In this snippet, the variable fruit and the function add are globally scoped and can be used throughout the whole script. On the other hand, the variables localResult, a, and b are locally scoped and are available only inside the add function. The variable globalResult, however, is globally scoped because the var keyword is omitted.

Variable instantiation is the first thing that happens when a JavaScript interpreter enters an execution context. The interpreter creates a variable object for the execution context and then checks for var declarations in the current context. These variables are then created and added in the variable object and given the value undefined. When we consider this with our example code, we can say that the variables fruit and add are instantiated using the variable object of the global execution context, while the variables localResult, a, and b are instantiated using the variable object of the local execution context of the add function. The variable globalResult, however, is a tricky one, and we'll discuss its implications later.

An important point to remember about variable instantiation is that it's connected with execution contexts in a deeper way. If you recall, we have three types of executable code in JavaScript: global code, function code, and eval code. In turn, we can say we also have three types of execution contexts: the global execution context, function execution contexts, and eval execution contexts. And since variable instantiation uses the variable object of an execution context, it follows that we can have only three main types of variables in JavaScript: global variables, variables that are local to a function, and variables from evaluated code.

This leads us to one of the things that confuse a lot of people about the language: JavaScript has no block scope. In other C-like languages, code inside a pair of curly braces form what is called a block, which has its own separate scope. However, because variable instantiation happens at the level of the execution context, a variable that's instantiated anywhere in a current execution context will be available throughout that context, not just in the current block.

var x = 1;

if (false) {
    var y = 2;
}

console.log(x); // 1
console.log(y); // undefined

In a language that has block scope, the line console.log(y) should produce an error since you're trying to access a variable that's not been instantiated (because the line var y = 2; will never be evaluated). However, JavaScript doesn't throw an error with this code, but instead tells us that the value of y is undefined, which is the value of a variable that's been instantiated but not given a value. Seems like curious behavior, doesn't it?

However, if we remember that variable instantiation happens at the level of the execution context, we'll know that this behavior is expected. When JavaScript interprets the snippet above, it starts by entering the global execution context and then does variable instantiation by looking for all variable declarations throughout the whole context and adds these variables to the variable object. So our code is really interpreted like this:

var x;
var y;

x = 1;

if (false) {
    y = 2;
}

console.log(x); // 1
console.log(y); // undefined

The same context-level instantiation also applies to functions:

function test(){
    console.log(value); // undefined
    var value = 1;
    console.log(value); // 1
};

test();

Even though our variable is defined after the first call to console.log, we still get a log of undefined rather than an error because variable instantiation happens before any other code inside the function is run. Our variable is already instantiated and given the value of undefined before the first line of the function body is executed, but it is only given a value of 1 on the second line. This is why it's always good to put all your variable declarations at the start of your code or at the beginning of a function. By declaring all variables at the beginning, you make it clear that the variable will be available across the whole of the current scope.

As you can see, the process of creating the variable (instantiation) and the process of assigning a value to a variable (declaration) are done separately by the JavaScript interpreter. This leads us back to a previous example:

var add = function(a, b){
    var localResult = a + b;
    globalResult = localResult;
    return localResult;
};

add(1, 2);

In this snippet, the variable localResult is local to the function, but the variable globalResult becomes global. The most common explanation for this is that when you omit the var keyword, the variable will be global, but that's a very naive explanation. Since we know that the processes of variable instantiation and declaration are separate, we can rewrite the function to look like how the interpreter might see it:

var add = function(a, b){
    var localResult;
    localResult = a + b;
    globalResult = localResult;
    return localResult;
};

add(1, 2);

The variable localResult will be instantiated and a reference to it will be stored in the variable object of the execution context. When the interpreter sees the line localResult = a + b;, it checks the variable object of the current execution context to see if there's a variable with the same name stored, and because there is such a variable in our example, the value is assigned to that variable. However, when it executes globalResult = localResult, it does not find any references so it proceeds to check whether the variable is present in the variable object of the previous context (in this case, the global execution context). But because it still does not find a reference to this variable, the interpreter assumes that it's new and creates a new variable in the last execution context it checked—which is always the global execution context. Therefore, the variable becomes a variable of the global execution context.

That process of looking up variables in an execution context's scope is called identifier resolution and it's powered by another internal object associated with execution contexts, the scope chain. As its name implies, the scope chain is an ordered list containing objects that the JavaScript interpreter uses to figure out which variable a particular identifier is referring to.

Each execution context has its own scope chain that's created before the interpreter enters the execution context. A scope chain can contain several objects, one of which would be the variable object of the current execution context. Let's consider this simple code:

var fruit = 'banana';
var animal = 'cat';

console.log(fruit); // 'banana'
console.log(animal); // 'cat'

The code runs within the global execution context, so the variables fruit and animal are stored in the variable object of the global execution context. When the interpreter encounters the line console.log(fruit), it sees the identifier fruit and looks for the value of this identifier by searching through the current scope chain—which contains a single object, the variable object of the global execution context. The interpreter then figures out that the variable has the value of 'banana'. The same thing happens to the line after that.

Coincidentally, the variable object of the global execution context is used for another purpose, as the global object. This global object has its own internal representation inside the interpreter, but it's also available through JavaScript itself via the window object in the browser or the global object in certain JavaScript interpreters. All global variables are actually members of the global object: in the example above, you can reference the variables fruit and animal via window.fruit or global.fruit and window.animal or global.animal, depending on where you're running the script. The global object is present in all scope chains for all execution contexts, and in the case of global code, the global object is the only object inside the scope chain.

It gets more complicated with functions, though. Aside from the global object, the scope chain of a function also contains the variable object of its own execution context.

var fruit = 'banana';
var animal = 'cat';

function sayFruit(){
    var fruit = 'apple';

    console.log(fruit); // 'apple'
    console.log(animal); // 'cat'
};

console.log(fruit); // 'banana'
console.log(animal); // 'cat'

sayFruit();

For code within the global execution context, the identifiers fruit and animal refer to the variables with the values 'banana' and 'cat' respectively, because those are the references stored in the variable object (i.e., the global object) of the execution context. However, inside the sayFruit function the identifier fruit has a different value because another variable fruit was also declared inside that function. Since the variable object of the current execution context is in the front of the chain before the global object, the interpreter knows that we are referring to a local variable rather than the global one and correctly resolves the identifier.

Since JavaScript is a lexically-scoped language, identifier resolution also respects the position of functions in the code. A function inside another function can see the variables from the outer function, as in this example:

var fruit = 'banana';

function outer(){
    var fruit = 'orange';

    function inner(){
        console.log(fruit); // 'orange'
    };

    inner();
};

outer();

The variable fruit inside the inner function has the value 'orange' because the scope chain of the function not only contains its own variable object but also the variable object of the function where it was declared in the code (in this case, the outer function). When the interpreter encounters the identifier fruit inside the inner function, it first looks at its own variable object. Since there's no such identifier there, it goes to the next object, which is the variable object of the outer function. The interpreter then finds the identifier it needs, so it stops there and concludes that the value of fruit is 'orange'.

That, however, only applies to functions created using function literals. Function objects created using new Function() that are inside other functions behave differently as they won't be able to access the variables from their external function:

var fruit = 'banana';

function outer(){
    var fruit = 'orange';

    var inner = new Function('console.log(fruit);'),

    inner(); // 'banana'

};

outer();

In this example, our inner function wasn't able to access the local variable fruit inside the outer function, so the output of console.log(fruit) inside the inner function is 'banana' rather than 'orange'. This happens because functions created using the new Function() form have scope chains that contain only their own variable objects and the global object. The variable objects of any surrounding functions aren't added to the scope chain of these functions, and this limits scope resolution to only local and global variables.

The creation of the scope chain happens right after the interpreter creates the execution context and before variable instantiation. In the case of global code, the interpreter first creates the global execution context, then the scope chain. It then proceeds to create the variable object of the global execution context (which also becomes the global object), then it does variable instantiation before adding the variable object to the scope chain. In the case of function code, the same thing happens but the global object is added to the function's scope chain first, then the variable objects of surrounding functions (if any), with the function's own scope chain being added last. Since the scope chain is technically a logical stack, the order of lookup during identifier resolution depends on which object was added first, so the most local of variable objects is added last to ensure that the local variable objects would be searched first during identifier resolution.

The presence of first-class functions in JavaScript and the ability of these functions to reference variables from surrounding functions give the language the base for another powerful function feature: closures. This language feature makes JavaScript functions extra useful, though it's also one of the more difficult to understand parts of the language. But because we already discussed how JavaScript functions work internally in the previous sections, we should be able to figure out how exactly closures work and how we can use them in our code.

Normally, the lifetime of a JavaScript variable is limited by where it was declared. A global variable will persist until the program is finished while a variable local to a function will only be available until the function is done. When the function exits, the local variables are destroyed by the interpreter via garbage collection and are no longer available. However, when an inner function inside another function retains a reference to a variable from the outer function and this inner function is then kept in reference even after the execution of the outer function, the variable persists even though the outer function has finished. When this happens, we get a closure.

Confusing? Let's check some examples:

var fruit = 'banana';

(function(){
    var fruit = 'apple';
    console.log(fruit); // 'apple'
})();

console.log(fruit); // 'banana'

Here, we have a single execution function that creates a variable fruit. Within that function, the value of the variable fruit is 'apple'. When the function is done, the variable fruit with the value of 'apple' is destroyed. We're left with the global variable fruit that has the value 'banana'. No closure was created. Let's take a look at another one.

var fruit = 'banana';

(function(){
    var fruit = 'apple';

    function inner(){
        console.log(fruit); // 'apple'
    };

    inner();
})();

console.log(fruit); // 'banana'

This example is similar to one we saw in another section. The single execution function creates a variable fruit and a function called inner. When the inner function gets called, it references the variable fruit from the outer function and we get the value 'apple' rather than 'banana'. Unfortunately, the inner function is local to the single execution function, which means it also gets destroyed after the function is done. Still no closure, so let's look at one more.

var fruit = 'banana';
var inner;

(function(){
    var fruit = 'apple';

    inner = function(){
        console.log(fruit);
    };

})();

console.log(fruit); // 'banana'
inner(); // 'apple'

And now it gets interesting. In this code we declared a variable called inner in the global scope and, within our single execution function, we gave this global variable the value of a function that logs the value of the fruit variable. Normally, the variable fruit inside the single execution function should be destroyed after the function is done, like in our previous examples, but because we referenced this variable inside our inner function, it is retained, which is why we get the value 'apple' when we call the function. And this is a closure.

A closure is created when a function inside another function gets stored outside the outer function's scope while retaining references to a variable from the outer function. Even though the function no longer operates inside its surrounding function, references to the variables from the surrounding function are still retained because the internal scope chain of the function still contains the variable object of the surrounding function, even though the surrounding function may no longer exist.

Remember that a function's scope chain is tied to its execution context, and like every other object associated with an execution context, it is created right after the creation of the execution context and destroyed together with the execution context when the function exits. Also, the interpreter only creates a function's execution context (and therefore its scope chain) when the function is invoked. In the case of our example above, the inner function is invoked during the last line of our code and, by that time, the execution context (along with its scope chain and variable object) of the original anonymous function has already been destroyed. So how can the inner function reference the local variable fruit inside the anonymous function when the original variable object containing it is already long gone by then?

The answer lies in a function's internal property called the scope property. All JavaScript functions have their own internal scope property that contains references to the objects that will be used to build the scope chain. When the interpreter creates the scope chain for a function, it looks at the function's scope property to see which items to add to the scope chain. Since this scope property is associated with the function itself rather than the execution context, it persists until the function is finally destroyed—making it usable no matter how many times the function is invoked.

A function created in the global context has a scope property that contains the global object, so its scope chain consists only of the global object and its own variable object. A function created inside another function has a scope object that contains all the objects inside the encapsulating function's scope property and the encapsulating function's variable object.

function A(){
    function B(){
        function C(){
        };
    };
};

In this snippet, the A function's scope property contains only the global object. The B function's scope property will inherit the contents of the A function's scope property (in this case, only the global object) plus the variable object of the A function because it's nested inside. Finally, the C function will have a scope property that inherits all of the objects from the B function's scope property—the global object and the variable object of A—plus the preceding function's variable object.

Function objects created with the new Function() form, on the other hand, only have one item in their scope property (which is the global object). This means that they can't access the local variables from surrounding functions, and therefore can't be used to create closures.

We'll wrap up these sections on function internals in a bit, but we have one final item to discuss: the this keyword. If you have experience in other object-oriented programming languages, you might have come across a similar keyword, usually called this or self, that's used to refer to the current instance (more on this in Chapter 3). However, JavaScript's this keyword is a little trickier, since its value is dependent upon the execution context and the caller of the function. It's also mutable, which means its value can be changed during runtime.

The value of this will always be an object, and there are several rules that dictate which object will become the this in a particular piece of code. The simplest rule is that in the global context, this refers to the global object:

var fruit = 'banana';

console.log(fruit); // 'banana'
console.log(this.fruit); // 'banana'

If you recall, all variables that are declared in the global context are actually properties of the global object. Here we see that this.fruit correctly resolves to the fruit variable, showing us that the this keyword in the snippet is in fact the global object. Functions declared in the global context will also have the this keyword pointing to the global object inside their function bodies:

var fruit = 'banana';

function sayFruit(){
    console.log(this.fruit);
};

sayFruit(); // 'banana'

(function(){
    console.log(this.fruit); // 'banana'
})();

var tellFruit = new Function('console.log(this.fruit);'),

tellFruit(); // 'banana'

For functions that are created as properties of objects (often termed methods), the this keyword will refer to the object itself rather than the global object:

var fruit = {

    name: 'banana',

    say: function(){
        console.log(this.name);
    }

};

fruit.say(); // 'banana'

We'll get further into the topic of objects in the next chapter, but for now, notice how the line this.name resolves properly to the name property of the fruit object. In essence, it's the same for previous examples: since the functions in the previous examples were properties of the global object, the this keyword inside the function body referred to the global object. So it follows that functions that are properties of any object will have the object itself as the this value in their body.

Nested functions, on the other hand, follow one simple rule: they always have the global object as their default this value, no matter where they appear:

var fruit = 'banana';

(function(){
    (function(){
        console.log(this.fruit); // 'banana'
    })();
})();

var object = {

    fruit: 'orange',

    say: function(){
        (function(){
            console.log(this.fruit); // 'banana'
        })();
    }

};

object.say();

Here, we see that the identifier this.fruit inside our two nested single execution functions resolved to the global fruit variable. In the case of the single execution function inside the say function, the value of this.fruit was still 'banana' even though the say function itself has its this keyword pointing to the object object. This means that the outer function doesn't affect the this value of the inner nested function.

Earlier I said that the this value is mutable and this ability to change the value of the keyword has several uses in JavaScript. Functions have two methods that can be used to change the this value: apply and call. These methods are actually used to invoke the function without the invocation operator (i.e., without the use of ( ) after the function identifier), but you can also provide arguments to these methods to change the behavior of the function.

The apply method takes two arguments: thisValue, which is used as the value of this inside the function, and params, which is an array of arguments to pass to the function. When the apply method is called on a function without any arguments or when the first argument passed is null, the this value of the function becomes the global object and no arguments are passed:

var fruit = 'banana';

var object = {

    fruit: 'orange',

    say: function(){
        console.log(this.fruit);
    }

};

object.say(); // 'orange'
object.say.apply(); // 'banana'

Reusing a snippet from the last example, we see that when we used apply without arguments to the object.say function, the this value of the function becomes the global object rather than the object itself—thereby resolving this.fruit to be 'banana' rather than 'orange'.

To set the this value of a function to another object, you simply have to pass a reference to the object using the apply function:

function add(){
    console.log(this.a + this.b);
};

var a = 12;
var b = 13;

add(); // 25

var values = {a: 50, b: 23};

add.apply(values); // 73

The apply method's second argument can be used to pass arguments to the function being called. This argument should be in the form of an array containing values that correspond to the function's formal parameters:

function add(a, b){
    console.log(a); // 20
    console.log(b); // 50
    console.log(a + b); // 70
};

add.apply(null, [20, 50]);

The other function method, call, works the same way as apply and thus follows the same rules indicated above. The only difference is that call can take multiple arguments after the thisValue argument, and these arguments will correspond to the formal parameters of the function in the order they were declared:

function add(a, b){
    console.log(a); // 20
    console.log(b); // 50
    console.log(a + b); // 70
};

add.call(null, 20, 50);

Let's say we have a program that needs to keep track of the user's name and age. We have a variable, user, which is an object where we keep the necessary data and two sets of functions, setName and getName, setAge and getAge, that we'll use to set and get the data:

// the `user` object where we keep the data
var user = {name: 'Mark', age: 23};

function setName(name){
    // make sure the name is a string

if (typeof name == 'string') user.name = name;
};

function getName(){
    return user.name;
};

function setAge(age){
    // make sure the age is a number
    if (typeof age == 'number') user.age = age;
};

function getAge(){
    return user.age;
};

// set a new name
setName('Joseph'),
console.log(getName()); // 'Joseph'

// set a new age
setAge(22);
console.log(getAge()); // 22

So far, so good. Our setName and setAge functions have checks to ensure that our values are of the correct type before setting them. However, we notice that the user variable is in the global scope and it's accessible everywhere. This presents a problem since you could just set the names without using the functions we've declared:

user.name = 22;
user.age = 'Joseph';

console.log(getName()); // 22
console.log(getAge()); // 'Joseph'

This isn't good, since we want the values to be correctly typed.

So what can we do? If you recall, variables declared inside a function are local to the function itself and are not accessible outside, and closures provide a way for a function to retain references to the local variables of its surrounding function. We can combine both of these points to limit our user variable to a local scope and then use closures for our setter and getter functions:

// create a single execution function
// to encapsulate the code and localize the user variable
(function(){

    // our variable is now local
    var user = {name: 'Mark', age: 23};

    // make our functions global
    setName = function(name){
        if (typeof name == 'string') user.name = name;
    };

    getName = function(){
        return user.name;
    };

    setAge = function(age){
        if (typeof age == 'number') user.age = age;
    };

    getAge = function(){
        return user.age;
    };

})();

// set a new name
setName('Joseph'),
console.log(getName()); // 'Joseph'

// set a new age
setAge(22);
console.log(getAge()); // 22

Now, if someone tries to set the values of user.name or user.age without going through the functions, it will result in a runtime error since the user object is no longer available to any other code except our getter and setter functions.

One of the best things about having first-class functions is the ability to create these functions during runtime and store them in variables. Say we have the following snippet:

function add(a, b){
    return a + b;
};

add(5, 2);
add(5, 5);
add(5, 200);

Our last three lines call the function add to add 5 and another number. We're adding the same base number (5) to different numbers multiple times and it seems better if we could just set the function to add 5 instead of having to type it every time. We could modify our add function to use 5 + b instead, but other parts of our program might already use the add function, so this won't do. Wouldn't it be nice if we could dynamically modify our add function without changing it entirely?

It turns out we can. This technique is called partial application or currying, and it involves creating a function that "applies" some of the arguments ahead of time:

function add(a, b){
    return a + b;
};

function add5(b){
    return add(5, b);
};

add5(2);
add5(5);
add5(200);

Here, we create an add5 function that calls our add function with a preset value (in this case, 5). The add5 function is essentially our add function but with an argument already applied (hence, partial application). However, the snippet above doesn't show the dynamic part. What if we have other parts in our code where we can use this? If we were to do as we did above, we'd have to create a new function for each of the partially applied functions we want.

This is where first-class functions come in handy. Instead of explicitly declaring our new add5 function, we can have another function that takes a function as its argument and then returns a modified copy of that function. In our case, we can create a function that modifies our add function dynamically to create a new partially applied function:

function add(a, b){
    return a + b;
};

function curryAdd(a){
    return function(b){
        return add(a, b);
    };
};

var add5 = curryAdd(5);

add5(2);
add5(5);
add5(200);

In this snippet we introduce a new function called curryAdd. It takes a single argument, a, which will be the value passed as the a argument to the original add function. It then returns a new function that has one formal parameter, b, which will be used as the b argument to add. When we call this new function via curryAdd(5), it returns a new partially applied function that we store in a variable. Because we have a closure, the partially applied function retains a reference to the a variable from our curryAdd function, making it usable for the next invocations.

This, of course, is a very trivial application of curried functions, but it suffices to show how the technique works. You'll find uses for currying in many parts of your code and it's a technique that comes in handy during day-to-day development.

Another technique that uses dynamic modification of functions and closures is decoration. The operative word is "decorate," and function decoration involves taking a function and adding new "features" to it dynamically.

Say we have a function that takes a single object as its argument and stores the key-value pairs in another object:

(function(){

    var storage = {};

    store = function(obj){
        for (var i in obj) storage[i] = obj[i];
    };

    retrieve = function(key){
        return storage[key];
    };

})();

console.log(retrieve('name')); // undefined

store({name: 'Mark', age: 23});
console.log(retrieve('name')); // 'Mark'

What if we want our store function to take in a pair of arguments instead of just a single object? So instead of doing store({name: 'Mark'}), we also want to be able to do store('name', 'Mark'). We could modify our store function to do this, but we've also used a similar style in other parts of our code, so it's better if we can do this dynamically.

What we can do is to create a decorator function that will wrap our store function:

var decoratePair = function(fn){
    return function(key, value){
        if (typeof key == 'string'){
            var _temp = {};
            _temp[key] = value;
            key = _temp;
        }
        return fn(key);
    };
};

(function(){

    var storage = {};

    store = decoratePair(function(obj){
        for (var i in obj) storage[i] = obj[i];
    });

    retrieve = function(key){
        return storage[key];
    };

})();

console.log(retrieve('name')); // undefined

store('name', 'Mark'),
console.log(retrieve('name')); // 'Mark'

This is one of the more complex examples we've seen so far, so let's take it step by step. First, we declared a new function called decoratePair that takes a single argument, fn, which is the function we're decorating. decoratePair then returns a new decorated function that takes two arguments, key and value. Since our original store function takes only a single object as its argument, the decorated function checks whether the first argument is an object or a string. If it's not a string, the wrapped function will immediately be called. However, if it's a string, the function turns it into an object before it calls the wrapped function. When we define the store function, we pass the original function to decoratePair as a literal.

Our decorator above ensures that we have proper arguments for the wrapped function before calling it, but decorators can also add features after the function is called. Here we have a simple decorator that takes the arguments from our add function and multiplies them by the second argument:

var add = function(a, b){
    return a + b;
};

var decorateMultiply = function(fn){
    return function(a, b){
        var result = fn(a, b);
        return result * b;
    };
};

var addThenMultiply = decorateMultiply(add);

console.log(add(2, 3)); // 5
console.log(addThenMultiply(2, 3)); // 15

Here we created the function addThenMultiply dynamically by passing the original add function to decorateMultiply. The result is a function that saves the results of the add function and modifies it before returning the value.

Function decoration is useful for a lot of tasks and it enables you to extend functions without having to modify them directly. This is especially handy for built-in functions that you can't modify directly, as well as third-party code you can't control.

A similar technique to decoration is combination, which involves putting together two functions to create a new function. Unlike decoration, combination involves directly passing the results of one function to another.

Here's a simple example of how it works:

var add = function(a, b){
    return a + b;
};

var square = function(a){
    return a * a;
};

var result = square(add(3, 5));
console.log(result); // 64

The square(add(3, 5)) code shows how combination works, but it's not exactly a combined function. Here, the value returned from add(3, 5), which is 8, is passed to the square function, which in turn returns 64. To make this a combined function, we have to automate the process so that we don't have to type square(add(a, b)) all the time.

While we could simply create a function that has the square(add(a, b)) code inside it, the better way is to write a combinator function that takes two functions and combines them:

var add = function(a, b){
    return a + b;
};

var square = function(a){
    return a * a;
};

var combine = function(fnA, fnB){
    return function(){
        var args = Array.prototype.slice.call(arguments);
        var result = fnA.apply(null, args);
        return fnB.call(null, results);
    };
};

var addThenSquare = combine(add, square);

var result = addThenSquare(3, 5);
console.log(result); // 64

Our new combinator in this snippet, called combine, is a function that takes two arguments, fnA and fnB, which correspond to the two functions to be combined. It then returns a new combined function. The innards of the combined function are more complex than what we've seen in past examples, but it essentially takes the arguments passed to the function, turns them into an array, uses the apply method of functions to invoke the first function, fnA, and then stores the result in a variable. The result is then passed to the second function, fnB, before it's returned. We then create a new function, addThenSquare, by passing the references to our add and square functions to our combinator. The result is a function that combines our two small functions together.

Note that the order is important when combining functions, as well the number of arguments. In our example, we can't have a squareThenAdd function, since square takes only one argument and returns one value while add needs two arguments. And since JavaScript only allows for one return value, combined functions are usually limited to functions that take a single argument.

If you recall from a previous section, we learned that a function's this value is mutable and that we can change it using the apply and call methods. However, there are cases when it's time-consuming if we have to use apply and call each time:

function setName(name){
    this.name = name;
};

var object = {name: 'Mark'};

setName.call(object, 'Joseph'),
setName.call(object, 'Olie'),
setName.call(object, 'Patrick'),

A better solution would be to create a new version of the setName function that would be automatically bound to the object:

function setName(name){
    this.name = name;
};

var object = {name: 'Mark'};

function setObjectName(name){
    setName.call(object, name);
};

setObjectName('Joseph'),
setObjectName('Olie'),
setObjectName('Patrick'),

This technique is called binding, and it's much better than the earlier example since it eliminates the need to use call all the time. But it's a bit time-consuming to declare new functions for all functions you want to rebind. Fortunately, MooTools gives us an easier way to do this using the bind method of functions. Our code above can be simplified using this method:

function setName(name){
    this.name = name;
};

var object = {name: 'Mark'};

var setObjectName = setName.bind(object);

setObjectName('Joseph'),
setObjectName('Olie'),
setObjectName('Patrick'),

The first argument to the bind method is an object that will be the this value of the new function. The method then returns a new function similar to the example we had in the previous snippet.

All arguments passed to bind after the first argument are passed as arguments to the function being bound. If we have several calls to setName.call(object, 'Mark') in our code, we could simply create a new function using var setObjectToMark = setName.bind(object, ['Mark']), and replace our previous calls with setObjectToMark(). Note, however, that bind does not do partial application: if we leave out any arguments to the function, they will be set to undefined.

While MooTools already includes several useful function methods, it also allows developers to add new function methods easily. We'll discuss much of how this native extension mechanism works in Chapter 6, but right now we'll focus on how we can use this MooTools feature to add new methods.

The MooTools way to add new function methods is via Function.implement. Here's an example:

// create a new function method `thenAdd`
Function.implement('thenAdd', function(num){
    var self = this;
    return function(){
        var args = Array.prototype.slice.call(arguments);
        var result = self.apply(null, args);
        return result + num;
    };
});

var add = function(a, b){
    return a + b;
};

// modify the add function to add 5 to the result
var addThenAdd5 = add.thenAdd(5);

console.log(addThenAdd5(2, 3)); // 10

var square = function(a){
    return a * a;
};

// modify the square function to add 2 to the result
var squareThenAdd2 = square.thenAdd(2);

console.log(squareThenAdd2(5)); // 27

To create the new method, we called Function.implement with two arguments: a string with the value 'thenAdd', which will be the name of the method, and a function, which will be the actual method. Our actual thenAdd method is a function that takes one argument, num, which is the number to add to the result of the function we're modifying. It then returns a new function that wraps the original function.

You'll notice that we didn't have to specify the function itself that we were modifying in our thenAdd method. Since it's a function method, the this keyword inside our method body already points to the function, so when we called add.thenAdd(5), this referred to the add function, and the same thing happens for the square.thenAdd(2) call. One other thing we did was to save the reference to the function to a local variable via the line var self = this; so that we can reference the function inside the new function we're creating. If we didn't do this, we'd lose reference to the function since the value of this inside the new function would be the global object instead of the function we're modifying.

As in previous examples, you'll see that a closure is created, enabling us to reference both the original function via self and the number argument to the thenAdd method. We also used the Array.prototype.slice.call(arguments) technique to turn our arguments object into an array so that we can use it with the apply method, and this also gives our new function flexibility to handle a variable number of arguments. The result is a new function method that adds a number to the result of the original function.

In the previous section on combination, we used a combinator function to join two functions. We could rewrite our old combinator function into a new function method to make it easier to reuse the function:

Function.implement('combine', function(fn){
    var self = this;
    return function(){
        var args = Array.prototype.slice.call(arguments);
        var result = self.apply(null, args);
        return fn(result);
    };
});

var add = function(a, b){
    return a + b;
};

var square = function(a){
    return a * a;
};

var addThenSquare = add.combine(square);

var result = addThenSquare(3, 5);
console.log(result); // 64

If you're creating more than one method, you can pass Function.implement a single object argument instead of a string and a function. If we were to add our two methods above in one go, we could do this by passing an object instead:

Function.implement({

    addThen: function(num){
        var self = this;
        return function(){
            var args = Array.prototype.slice.call(arguments);
            var result = self.apply(null, args);
            return result + num;
        };
    },

    combine: function(fn){
        var self = this;
        return function(){
            var args = Array.prototype.slice.call(arguments);
            var result = self.apply(null, args);
            return fn(result);
        };
    }

});