Lexical Scope and Closures in JavaScript
Published: 2024-01-09 09:48:36

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:

```js
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](https://www.w3schools.com/)).

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:

```js
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](https://shefali.dev/blog).

You can also follow me on [X(Twitter)](https://twitter.com/Shefali__J) for getting daily tips on web development.

Keep Coding!!
<a href="https://www.buymeacoffee.com/devshefali" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>