Lexical Scope in JavaScript

Introduction

Welcome back to our journey through JavaScript scope! In this blog post, we'll delve into the concept of lexical scope, building on what we learned in our previous discussion. By the end of this blog, you'll have a clear understanding of lexical scope in JavaScript and be able to explain it effortlessly to others.

What is Lexical Scope?

Ever wondered how JavaScript keeps track of variables, especially when you have functions nested within each other? Enter lexical scope! But don't worry, it's not as daunting as it may sound. In simple terms, lexical scope refers to where a variable or function is created.

In simple terms, lexical scope refers to where a variable or function is created within your code. To understand this concept better, imagine your JavaScript code as a house, with each function representing a different room. Lexical scope acts like a set of rules guiding JavaScript to the right room when it needs to find a variable. Just like you wouldn't search for your keys in the living room when you left them in the bedroom, JavaScript knows exactly where to look for variables based on where they were defined within your code.

Why is Lexical Scope Important?

Understanding lexical scope is like having a GPS for JavaScript variables. It helps the language know exactly where to look when you're working with nested functions. This clarity ensures your code behaves predictably and avoids any confusion about which variable to use.

How Does Lexical Scope Work?

Let's visualize this with an example. Suppose we have an outerFunction, inside which there's an innerFunction. When innerFunction wants to use a variable, it first checks its own room (scope). If it doesn't find the variable there, it goes up one level to where outerFunction is defined and looks there. This process continues until it finds the variable or reaches the global scope (the whole house).

function outerFunction() {
  const outerVariable = 'Outer'; // Variable in the outer room (scope)

  function innerFunction() {
    console.log(outerVariable); // Accesses the outerVariable from the outer room 
  }

  innerFunction();
}

outerFunction(); // Output: Outer

In this example, innerFunction can access the variable outerVariable because it's defined in the same room as innerFunction, according to the rules of lexical scope.

question

What would be the output of the following code and can you explain why and how you arrived at the answer? Feel free to leave your answer in the comments below!

function outerFunction() {
  const outerVariable = 'Outer'; 

  function innerFunction() {
    const outerVariable = 'Inner'; 
    console.log(outerVariable); 
  }

  innerFunction();
}

outerFunction(); 

Conclusion

Lexical scope may sound fancy, but it's simply a set of rules that JavaScript follows to find variables in your code. Understanding these rules empowers you to write cleaner and more reliable code, ensuring JavaScript always knows where to find the variables it needs.