TIE: JavaScript Closures

Welcome to TIE: Today I Explain. This is part one in a series on key JavaScript concepts that help js developers become better js developers.

And with that, JavaScript closures!

Question: What is a closure?

Answer: A closure is an inner function that has access to its outer function’s variables.

Additionally, a closure has access to variables in three scopes:

1. its own scope
2. its outer function’s scope
3. the global scope

// AN EXAMPLE
const globalVar = 'big tornado';
function outerFunction() {
  const outerVar = 'medium tornado';
  
  function innerFunction() {  // <-- HERE IS OUR CLOSURE!
    const innerVar = 'small tornado';
    return `${globalVar} ${outerVar} ${innerVar}`;
  }
  return innerFunction();
}
outerFunction(); // 'big tornado medium tornado small tornado'

In the above example, we have innerFunction() enclosed by outerFunction(). Starting with the inner function’s scope going outwards, we have declared the variable innerVar and assigned it a value ‘small tornado.’ The inner function has access to const innerVar because const InnerVar is in the inner function’s scope. That part is straight forward.

But because the inner function is a closure, it also has access to const outerVar and const globalVar. That means we can invoke these variables within innerFunction(), which we do here:

return `${globalVar} ${outerVar} ${innerVar}`

Ultimately, outerFunction() returns innerFunction(), so when we call outerFunction(), our result is ‘big tornado medium tornado small tornado.’

Why bother with imbedding a function within a function? Check out the following example.

// A REFERENCE ERROR EXAMPLE
1.  const globalVar = 'big tornado';
2. 
3.  function firstFunction() {
4.    const firstVar = 'medium tornado';
5.    return secondFunction();
6.  }
7.
8.  function secondFunction() {  
9.    const secondVar = 'small tornado';
10.   return `${globalVar} ${firstVar} ${secondVar}`; // <-- HOUSTON, WE HAVE A PROBLEM
11. }
12.
13. firstFunction(); // ReferenceError: firstVar is not defined

In the example above, we have globalVar, a variable that exists in the global scope and is therefore accessible to the following functions. We have two separate functions, but neither of them are closures. This causes a problem when we try to return secondFunction() within firstFunction() on line 5.

The issue isn’t that we’re returning secondFunction() on line 5. We can absolutely do that. See below:

1.  const globalVar = 'big tornado';
2. 
3.  function firstFunction() {
4.    const firstVar = 'medium tornado';
5.    return secondFunction(); // <-- THIS IS OKAY
6.  }
7.
8.  function secondFunction() {  
9.    const secondVar = 'small tornado';
10.   return secondVar; 
11. }
12.
13. firstFunction(); // 'small tornado'

The issue is exactly what the reference error says: “firstVar is not defined.” Within secondFunction(), we’re invoking firstVar on line 10. However, firstVar is declared and initialized on line 4 within firstFunction(). Our secondFunction() doesn’t have access to that variable, as it doesn’t have access to firstFunction()’s scope!

Is JavaScript demented? Yes. We all love it though, don’t we?

Next time I’ll talk about hoisting.