Lexical Scope and Closures in JavaScript

Lexical Scope and Closures in JavaScript

by

In JavaScript, Lexical Scope and Closures are used to manage variables and functions. But sometimes these two topics can be confusing😕. In this post, you’ll learn about closures and lexical scope with code examples.

Let’s jump right into it!🚀

Lexical Scope

Lexical scope refers to determining the scope of variables and functions at compile time, based on where they are declared within the code.

When you define a function inside another function, the inner function can see and use the variables of the outer function but the outer function can’t see and use the variables of the inner function.

For example:

function outerFunc() {
  let outerVar = 'I am a variable inside outer function.';

  function innerFunc() {
    console.log(outerVar);
  }

  return innerFunc;
}

outerFunc(); // Output: I am a variable inside outer function.

Now, let’s understand this example.

  • You have a function outerFunc and inside this function, you have a variable outerVar.
  • Inside the outerFunc function, there’s another function innerFunc and this innerFunc can access the outerVar variable because it’s defined in the outer function. This connection is possible due to lexical scope, which allows inner functions to reach out and use variables from their outer functions.
  • When you call outerFunc then it will return the innerFunc.
  • Now, when you later invoke innerFunc() (which was returned by outerFunc), it still remembers and can access the outerVar from its parent function.
  • So, the output you get is I am a variable inside outer function.
  • This shows how the inner function maintains access to variables from its original scope, even when called outside the outer function. That’s possible because of lexical scope.

Closures

A closure is a function having access to the parent scope, even after the parent function has closed (definition from w3schools).

To put it simply, when an inner function has access to its outer function’s (parent scope) variables, even after the outer function (parent function) has finished executing, then this is a closure.

For example:

function outerFunc() {
  let outerVar = 'I am a variable inside outer function.';

  function innerFunc() {
    console.log(outerVar);
  }

  return innerFunc;
}

const closureFunc = outerFunc();
closureFunc(); // Output: I am a variable inside outer function.

Now, let’s understand this example.

  • You have a function outerFunc and inside this function, you have a variable outerVar.
  • Inside the outerFunc function, there’s another function innerFunc and this innerFunc can access the outerVar variable from its outer function outerFunc due to lexical scope.
  • When you call outerFunc then it will return the innerFunc.
  • Then, you are storing the result of outerFunc() to closureFunc variable by const closureFunc = outerFunc();.
    Now, closureFunc is essentially innerFunc because when you call outerFunc then it returns the innerFunc.
    But closureFunc remembers the environment in which it was created and has access to outerVar.
  • Finally, on closureFunc(), you’re outside the original outerFunc but it still knows about outerVar. So, the output is: I am a variable inside the outer function.

Summary

Lexical Scope

Think of lexical scope like a set of rules that determine where in your code variables and functions live. If a function is inside another function, the inner function can use the outer function’s stuff, but the outer function can’t use the inner function’s stuff.

Closure

A closure is like a memory superpower for functions. Even after a function is done doing its thing, if it had an inner function, that inner function can still remember and use the things from its parent function.

These concepts might take time to grasp fully, but with practice and exploration, you’ll gradually master closures and lexical scope to write more efficient JavaScript code.

That’s all for today.

I hope it was helpful.

Thanks for reading.

For more content like this, click here.

You can also follow me on X(Twitter) for getting daily tips on web development.

Check out toast.log, a browser extension that lets you see errors, warnings, and logs as they happen on your site — without having to open the browser’s console. Click here to get a 25% discount on toast.log.

Keep Coding!!

Leave a Comment