Understanding JavaScript Scope

#javascript #scope #tutorial #webdev

What is Scope actually ?

Scoping is determining where variables, functions, and objects are accessible in your code during runtime. This means the scope of a variable(where it can be accessed) is controlled by the location of the variable declaration.

In JavaScript there are two types of scope:

Local Scope
Global Scope

Before jumping into Local Scope and Global Scope, Let's a have look on Block and Function

Here's a new keyword Block Scope / Function Scope. right ? What's these actually?
Well, It's defination is defined in itself. 😕 sounds crazy? Don't worry. I'll explain it now.

A Block is created with a pair of Curly braces { }

    function functionScope() {
        // This a Block Scope.
        // It's also a Function Scope.

        // All codes inside this function are `function scoped` along with `block scope`.
    }

    if (CONDITION) {
        // This is a Block Scope
    }

Local Scope:

If varibales, funcitons, objects are declared inside a Block, It's called Local Scope.That's mean, A local Scope is created inside a Block / Function


    function localScope() {
        // declear variables inside this block;
        const countryName = 'Bangladesh';

        console.log(`I love my country ${countryName}`); // I love my country Bangladesh
    }

    // if we print the variable outside of that block,
    console.log(`I love my country ${countryName}`); // Uncaught ReferenceError: countryName is not defined

Global Scope:

If variables, functions and objects are declared outside a curly brace/Globally, are called global scope.

    // declare our variables outside of any curly brace
    const name = 'Shaon Kabir';
    const age = 22;
    const married = false;


    function hello() {
        console.log(name) // Shaon Kabir
        console.log(age) // 22
        console.log(married) // false

        // we haven't declared anything here,
        // but we can still have access on our variables beacuse they are declared globlly.  
    }

    // We can print our variables value everywhere.
    console.log(name) // Shaon Kabir
    console.log(age) // 22
    console.log(married) // false

Global + Local Scope Example:

    // This function is created globally, we can get access on it from anywhere.
    function globalFunction() {

        // declear variables
        const language = "JavaScript";

        console.log("I am executing from GLOBAL function");

        // create a local function
        function localFunction() {
            console.log("I love to code in" + language);

            // Here, we have access to "language" variable because it's declared in `this`(localFunction) Parent scope
        }

        // Call innerFunction
        localFunction();
    }

    // What if happen, If we call the inner Function outside of global Function ?
    localFunction(); // Uncaught ReferenceError: localFunction is not defined

One last things, we've noticed that somethings is happending inside the localFunction. we've talked about Parent scope. Let's learn about it

Lexical Scoping:

✔ A relation between Parent Function and Child Function is called Lexical Scoping 🔥

Child can access Parent's Properties/variables/methods.

Here's globalFunction have a innerFunction named localFunction which is also a local function of globalFunction. That's mean, there no existance of localFunction outside of globalFunction. so we've to call this innerFunction inside the Block.
Also, variable language is declared outside of localFunction but, still it've the access on it. Because, In JavaScript, Child can access Parent's Properties/variables/methods.