JavaScript Lexical Scope

1. What Is Scope in JavaScript
2. What Is Lexical in JavaScript
3. Lexical Scope as a Whole in JavaScript

In this article, we will learn about JavaScript lexical scope with the help of examples.

Lexical scope is a technical term comprised of two words, lexical and scope. Let’s understand each of them individually and then return to the lexical scope as a whole.

What Is Scope in JavaScript

Scope indicates where an item such as a variable or a function is evident and reachable to the program.

We can say that scope means a particular region, area, or space. The scope can be global or local.

Global scope means the global area or public space, and the whole program can access the variables and functions defined in that specific area.

On the other side, local scope means bounded or restricted region. Let’s practice the following code example to understand the local and global scope.

let fullname = 'Mehvish Ashiq';

function displayAge() {
  let age = 30;
  return age;
}
function displayInfo() {
  console.log(fullname + ' is ' + displayAge() + ' years old');
}

displayInfo();

Output

"Mehvish Ashiq is 30 years old"

In the above code, we have a variable fullname with a global scope and can be referenced anywhere within this script.

Similarly, the functions displayAge() and displayInfo() also have global scope but the variable age is restricted to displayAge() function which means it can only be accessed within this function.

Let’s have another example to make the concept clear.

let fullname = 'Mehvish Ashiq';

function displayInfo() {
  function readName() {
    function writeName() {
      return fullname;
    }
  }
  function displayAge() {
    let age = 30;
    return age;
  }
  console.log(fullname + ' is ' + displayAge() + ' years old');
}

displayInfo();

Output

"Mehvish Ashiq is 30 years old"

Let’s understand the above code with the following diagram to better visualize the scope.

We can see that the fullname has a global scope, but it is not referenced directly. It is accessed from the writeName() function, and this is because of scope chain.

It is also essential to note that we can access the external scope variables in the inner scope but not vice versa.

For instance, we can access the fullname inside the writeName() method but can’t access the age variable outside of displayAge() function. It means the child can use the parent’s properties, but the parent can’t use the child’s properties.

What Is Lexical in JavaScript

Lexical points out a thing’s definition. It means anything about creating expression, variables, or words.

Now, we know the scope and lexical individually. Let’s combine them and try to understand what lexical scope means?

Lexical Scope as a Whole in JavaScript

Lexical scope is an expression’s definition area. More simply, It refers to the place or region in which the item is created.

The lexical scope is also known as static scope. Let’s see the following example code illustrating lexical scope.

// Define a variable in the global scope
let fullname = 'Mehvish Ashiq';

// Call fullname variable from a function
function printName() {
  return fullname;
}

We wrote a printName() function to access fullname variable which is defined in global scope. Notice that we have declared and initialized fullname in global scope but called in the local scope of printName().

So, what is the lexical scope of fullname? Always remember, the lexical scope is about definition space only.

It does not have any concerns with invocation space. Thus, the lexical scope of fullname is the global scope because it is defined in a global environment.

Let’s look at another example to understand the lexical scope.

function outerFunction() {
  var name = 'Mehvish';
  // We can not access 'likes' variable here
  function innerFunction() {
    // the 'name' variable is accessible here
    // the 'likes' variable is not accessible here
    function innerMostFunction() {
      // Here is the innermost level of the scope chain
      // We can also access the 'name' variable here
      var likes = 'Reading';
    }
  }
}

Here the lexical scope of name is the local scope of outerFunction(). Similarly, the lexical scope of likes is the local scope of innerMostFunction().

Now, you might be wondering why lexical scoping is so important? It is because lexical scoping tells how variable names will be resolved in nested functions, which means inner functions has the parent functions’ scope even if that (parent function) has returned.