Javascript - Function Variable Scope

Introduction

When code is executed in a context, a scope chain of variable objects is created.

The scope chain provides ordered access to all variables and functions that an execution context has access to.

The front of the scope chain is the variable object of the context whose code is executing.

If the context is a function, then the activation object is used as the variable object.

An activation object starts with a single defined variable called arguments.

The next variable object in the chain is from the containing context, and the next after that is from the next containing context.

This pattern continues until the global context is reached.

Identifiers are resolved by navigating the scope chain in search of the identifier name.

The search begins at the front of the chain and proceeds to the back until the identifier is found.

Consider the following code:

var myValue = "black";

function changeValue(){
    if (myValue === "blue"){
        myValue = "red";
    } else {
        myValue = "blue";
    }
 }

changeValue();

In this simple example, the function changeValue() has a scope chain with two objects in it: its own variable object on which the arguments object is defined and the global context's variable object.

The variable myValue is accessible inside the function, because it can be found in the scope chain.

Additionally, locally defined variables can be used interchangeably with global variables in a local context. Here's an example:

var myValue = "blue";

function changeValue(){
    var anotherValue = "red";

    function swapValues(){
        var tempValue = anotherValue;
        anotherValue = myValue;
        myValue = tempValue;

        //myValue, anotherValue, and tempValue are all accessible here
    }
    //myValue and anotherValue are accessible here, but not tempValue
    swapValues();
}

//only myValue is accessible here
changeValue();

There are three execution contexts in this code: global context, the local context of changeValue(), and the local context of swapValues().

The global context has one variable, myValue, and one function, changeValue().

The local context of changeValue() has one variable named anotherValue and one function named swapValues(), but it can also access the variable myValue from the global context.

The local context of swapValues() has one variable, named tempValue, that is accessible only within that context.

Neither the global context nor the local context of swapValues() has access to tempValue.

Within swapValues(), though, the variables of the other two contexts are fully accessible, because they are parent execution contexts.

An inner context can access everything from all outer contexts through the scope chain.

The outer contexts cannot access anything within an inner context.

There are three objects in the scope chain for the local context of swapValues():

the swapValues() variable object,
the variable object from changeValue(), and
the global variable object.

Javascript - Function Variable Scope

Introduction

Related Topics