Loading...

Scope in JavaScript


In English, "scope" is defined as: "The extent of the area that something is relevant". In JavaScript, this definition holds, with one small adjustment: "The extent of the area that something is accessible". With this in mind there are two basic areas with which a variable can be contained and is accessible: globally and locally.

Global Scope

Variables with global scope are part of the global object. In a web browser, this will usually be the Window object. This global object can be grabbed from anywhere in the JavaScript program.

Local Scope

Variables scoped locally, are confined inside of curly brackets { }. This can be part of a function, or as a stand-alone block. There are a few different types of local scope. These are outlined below.

Function Scope - Local

This is encased in the function brackets function() { ...this is within the Function scope }

var

function varScopeDemo() {

    var firstVariable = "First Variable";

    for (var i = 0; i & lt; = 5; i++) {

        var secondVariable = "Second Variable";
    };

    console.log(secondVariable);
    //  RESULT: "Second Variable" because var secondVariable used within the for loop is available anywhere in the function
}

varScopeDemo();

console.log(firstVariable);
//  RESULT: "Uncaught ReferenceError: firstVariable is not defined" - This happens because var firstVariable is used within the function and so not available anywhere outside the function

Block Scope - Local

This scope is any any area enclosed by curly brackets. This could be functions, if statements, stand-alone brackets, etc: { ...this is within the Block scope }

There are two ways to make a variable block scoped: const and let.

let can be changed and is bound by block scope.

function letScopeDemo() {

    let firstVariable = "First Variable"

    for (let i = 0; i <= 5; i++) {
        let secondVariable = "Second Variable";
    };

    console.log(secondVariable); 
   //  RESULT: "Uncaught ReferenceError: firstVariable is not defined" - This happens because let secondVariable used within the for loop is available anywhere in the function

}

letScopeDemo();

console.log(firstVariable); 
//  RESULT: "Uncaught ReferenceError: secondVariable is not defined" - This happens because var firstVariable is used within the function and so not available anywhere outside the function

const can not be changed and is bound by block scope. While you can not change the object the variable points to, you can change the object itself ( unless Object.freeze() is used

function constScopeDemo() {

    const firstVariable = "First Variable";

    for (let i = 0; i & lt; = 5; i++) {

        firstVariable = "New Value";
        const secondVariable = "Second Variable" 

        //  Uncaught TypeError: Assignment to constant variable. because firstVariable was initially set up using const

    };

    console.log(secondVariable); 
    //  RESULT: Uncaught ReferenceError: secondVariable is not defined because const secondVariable used within the for loop is available anyere in the function

}
constScopeDemo();

console.log(firstVariable); 
//  RESULT: "Uncaught ReferenceError: firstVariable is not defined" because const firstVariable is used within the function and so not available anywhere outside the function

To show the immutable nature of const and the ability to change the Object data.

const myVariable = {

    name: "John"
};

console.log(myVariable); //  RESULT: "John"

myVariable = {

    newObjectName: "New Name"
};
//    RESULT: VM506:6 Uncaught TypeError: Assignment to constant variable. because const myVariable is used making it unchangeable

myVariable.name = "The Changed Name"
console.log(myVariable);
//  RESULT: "The Changed Name" because the values can be changed with const

Object.freeze(myVariable);

myVariable.name = "Change after .freeze()"

console.log(myVariable);
//  RESULT: "The Changed Name" because the Object was frozen and now even the properties can not be changed const

Lexical Scope - Local

Lexical Scope refers to the fact that nested functions have access to the resources of their parent function. This is to say that nested functions are "lexically bound" to their parents. This works only in one direction heading down from the parent to the nested children, but will not work in reverse. This means parents do not have access to resources locally coped to their children. The basic setup is:

function parentFunct() {

    ...parent variables

    function nestedFunct() {

        ...code with access to the parent variables
    }
}

โ†“ Example โ†“

function parent() {

    var material = 'Wood';
    // color is not accessible here

    function childParent() {

        // material is accessible here
        // color is not accessible here

        function child() {

            // material is accessible here
            // color is accessible here

            var color = 'red';
        }
    }
}

One Reply to “Scope in JavaScript”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

q
↑ Back to Top