Lexical Scope In JavaScript

I am slightly confused as to how exactly scope works in JavaScript, mainly lexical scope. I understand that variables in global scope are accessible anywhere, and the only way to c

Solution 1:

To understand the lexical scope you need to have a basic understanding of the scope. In javascript, we have classified scope in three types

1. Function scope
2. Block Scope
3. Lexical Scope

Function Scope -> The variables defined inside the function are considered in function scope.the var keyword is used to define the variable in the function scope.

Block scope -> The variables defined in the area within if,switch condition,for,and while loops. whenever you see '{}' curly braces, its a block. In Es6 const and let keywords allow developers to declare a variable in the block scope. which means those variables exist only within the corresponding block.

   function animal(){
    if(true){
        var animal1 = "cat";
        const animal2 = "dog";
        let animal3 = "rat";
    }
    console.log(animal1);
    console,log(animal2); //animal2 is not defiend
    console,log(animal3); //animal3 is not defiend
}
animal();

result

cat

animal2 is not defined

animal3 is not defined

Lexical scope-> In 1 line I want to say "children scope have access to the variable in parent scope" `

var outerFunction = function()
{
    if(true){
        var x = 5;
        const y = 10;
    }

    var innerFunction = function(){
        if(true){
            alert(x);
            //alert(y);   //y is not defiend on line 13

        }
    }
    innerFunction();
}
 outerFunction();
 //console.log(x); // x is not defiend on line 20

`. The scope of a variable is defined by their position in the source code. In order to resolve variable javascript starts at the innermost scope and searches outward until it finds the variable it was looking for. lexical scoping is nice because we can easily figure out what the value of a variable will be by looking at the code; whereas in dynamic scoping the meaning of a variable can change at runtime by making it more difficult

Solution 2:

Your understanding of how scope works for standard functions (including closures inside closures) is correct, but for arrow functions this statement is wrong:

"this" is bound to obj because of the lexical scoping of "this" with arrow functions.

With an arrow function this within the function is the same as whatever this was outside the function when it was created. It is not bound to obj in your example, but instead to whatever it was already bound to where that obj is being created.

It is useful in a situation such as:

this.values.filter( x => x < this.max );

Inside that arrow function this is the same as it was outside the function. With a regular function it might have been written like this:

this.values.filter( function ( x ) { return x < this.max }.bind( this ) );

or:

var self = this;
this.values.filter( function ( x ) { return x < self.max } );

Solution 3:

When you look at some source code of a program, you are looking at its lexical structure. When the program actually runs, execution can jump around and evaluation of things can change.This is the part that all start making sense.

You may want to look at it as functional lexical scope and block lexical scope. For the rest, you already seem grasped the idea of it.

Solution 4:

"global" is printed twice because "foo" is a closure that has added "x" of the global scope to its memory, thats the way I learned, closure are functions that remember