Closure and Scope in JavaScript

Just heard someone mentioning closure and scope and you've no idea what they are? I got you.

Let's have a brief look over that they mean:

• Scope refers to the variables and functions within a block of code.
• Closure is when a function is able to access and use variables from outside its own scope.

The key difference between scope and closure is that Scope refers to variables that are accessible to a certain portion of code, while closure is when a function remembers the variables from the scope in which it was created, even if that scope no longer exists.

Confused? here is a simple example to show how closure works:

Suppose we have a function called Add() that takes in a single number as an argument. This function returns another function that takes in a second number, adds the two numbers together, and returns the result:

function Add(x) {
  return function(y) {
    return x + y;
  };
}

Now, if we create a new variable called addFive and set it equal to the result of calling Add() with 5 as an argument, we can see that the addFive function has access to the x variable from the Add() function:

const addFive = Add(5);
console.log(addFive(2)); // 7

This is because the addFive function has closure over the x variable from the Add() function. The x variable is not declared inside of the addFive function, but the function still has access to it.

There are a few things to keep in mind with closures.

• If a function has closure over a variable, that variable will stay in memory as long as the function is used. This can lead to memory leaks if the function is never called or is called but never removed from memory.

• Functions with closure can access variables from any scope, not just the immediate scope in which they are defined. So, if a function has closure over a global variable, it can modify that variable even if it is not defined inside of the function.

• Because functions with closure can access variables from any scope, they can also access variables from any future scope. So, if a function is defined inside of another function, it will have closure over all of the variables from the outer function. This can be used to create closures that are variables in themselves:
  

function Counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

let counter = Counter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

In above code we've a counter that can be incremented and accessed from any scope. The counter function has closure over the count variable, which means that the count variable will stay in memory as long as the counter function is used.

Closures can be a powerful tool, but they should be used with caution. Because they can access variables from any scope, they can lead to unexpected results.

So what are you waiting for, fire up the editor and try it all yourself.

Feel free to comment with what you have learnt or any queries that you've.