The Last How to Guide on Closures (I mean it 2022 JavaScript Noob)

Closures are one of those subjects in JavaScript that at first glance appears challenging but in fact rather simple and fascinating.

What is a closure, then?

An inner function can access the variables of the outer function when there is a closure.

Let's look at the following example:

Take note of the closure we have here. It's because the getUser function has a function called getWelcomeMessage.

The code is explained as follows:

Liam is the value of a variable name that is defined by the getUser function.

Then, we define the function getWelcomeMessage inside of that function, which returns Hello $name.

Then, we deliver a returned object that includes the message and the name.

where message is getWelcomeMessage's output ().

You may have noted that because getWelcomeMessage is declared inside getUser, the variable name is accessible to getWelcomeMessage. The name will therefore be available to any function declared inside getUser, in this case getWelcomeMessage, because name is defined there.

Look at how the getUser function creates a name variable in the above illustration. This variable is then accessible in any function that is specified inside of getUser.

Because getUser defines getWelcomeMessage, you can utilise the variable name.

That's all :)

Be aware that the idea of closures doesn't just apply to functions inside other functions;

for instance:

If you rephrase it using arrow functions, the same principle still holds true:

We will still achieve the same outcome because the same idea still holds true.

Closures are handy when we want to define a new function while maintaining access to the variables declared in the outer function, although this is not their primary application. Closures may appear to be a "feature" that you choose to employ, but in reality, they are the result of defining a function.

One query that can come up is, "What happens if there is an existing variable name in the current function?"

The solution is that before leaving the function, JavaScript will start by looking in the current context. It continues until it encounters the window object, which is the global context.

You need not worry about this because we generally advise using distinctive variable names. Here is an example that makes use of the same variable name, though:

Let's now define a variable sample inside the function with a value of 2:

Avoid using the variable name name when working with such examples because window.name has already been specified by the browser.

An inner function can access the variables of the outer function when there is a closure.

JavaScript functions can access their outside scope. Which is called closures.

You automatically receive closures when you define a function; you don't need to "enable" or choose to utilise them.

The variables defined in the outer function may be used by functions defined inside of it.

Save this post for future reference, you can leave your doubts in the comments.