Clarity on closures in JavaScript

In Section 10 of The Complete JavaScript Course 2023 (Udemy, Jonas Schmedtmann), there is a confusing concept about closures mentioned towards the end. In my last post on Data encapsulation in JavaScript, I discussed closures.

What I understand about closures

Jonas stated: "A closure always makes sure that a function does not lose the connection to the variables that were present at its birthplace."

Ok, that makes sense. A closure is a function that retains access to variables in its scope, even after the scope has closed.

When an inner function is defined within an outer function, the inner function has access to the variables of the outer function, and any variables defined within the inner function are not accessible from the outside.

This allows you to encapsulate data within the closure and make it accessible only through the returned function.

This feature of closures is particularly useful when you want to create a function that needs to maintain some state, or when you want to pass data to a callback function without making it globally accessible.

What I didn't understand about closures

Jonas stated: "So whenever something like this happens, where you reassigned functions even without returning them, keep in mind that also this will create a closure."

I was confused by this statement and the code reference didn't clarify it.

I asked ChatGPT to help me understand closures using Jonas' words.

Me: Does this mean that whenever something like this happens, such as where you have reassigned functions even without returning them, that also this will create a closure?

ChatGPT: Reassigning a function does not create a closure. A closure is created when an inner function is defined within an outer function and has access to the variables in the outer function's scope even after the outer function has finished executing.

In this case, when you reassign a function, you are simply creating a new reference to the same function, but it does not create a closure. However, if you reassign a function and the new function references variables from the outer scope, it creates a closure. Here's an example:

function outerFunction() {
  let myVar = "I'm in the outer function";
  function innerFunction(){
    console.log(myVar);
  }
  return innerFunction;
}
let newFunction = outerFunction();
newFunction(); // this will print "I'm in the outer function"

In this example, when you reassign the innerFunction to newFunction, it creates a closure because newFunction still has access to the variable myVar from the outerFunction. So, whenever newFunction is invoked, it will be able to access the myVar variable.

It is important to note that simply reassigning a function does not create a closure, it's only when the reassigned function references variables from the outer scope that creates a closure.

Clarity on closures

Reassigning a function without returning it does not create a closure.

A closure is created when an inner function references variables from its outer scope after the outer function has finished executing.

If you reassign a function without returning it, the inner function will no longer have access to the outer function's scope and it will not be a closure. For example:

let myVar = "I'm a global variable";
function outerFunction() {
  myVar = "I'm in the outer function";
}
outerFunction();
console.log(myVar); // this will print "I'm in the outer function"

In this example, the outerFunction does not return an inner function that references to myVar, so it is not a closure. The reassignment of myVar is performed in the outer scope and it becomes a global variable.

It's important to note that, closures are created when an inner function references variables from its outer scope after the outer function has finished executing and those variables are not available in the global scope.

In summary, closures are functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created. Using closures in your code can help you keep track of and access variables in different scopes when needed. Closures can be used to create private variables and methods, and can provide better structure and organization to your code. Closures can also be used to create callback functions, which are passed as arguments to other functions and executed at a later time.

Thanks for reading! Disclaimer: This was produced with the help of artificial intelligence.