Closures

Learning Goals

• Describe and speak to lexical scoping in JavaScript
• Understand and implement closures
• Identify scenarios where closures can be useful in code, and use closures to solve specific programming challenges

Vocab

• lexical scope in JavaScript means that the accessibility of a variable is determined by its location in the source code and the structure of nested functions.
• closure a function that has a reference to its outer/lexical environment

Some Context

Closures are an important concept in programming that can help developers to create more modular and reusable code. Typically variables are declared within a specific scope, such as a function, and are then used only within that scope and any nested scopes. Closures, on the other hand, allow a function to access and manipulate variables that are declared outside of its own scope.

In addition to creating more efficient and maintainable code, closures can also improve security by preventing unintended access to sensitive data. They are particularly useful in functional programming, where functions are treated as first-class citizens and can be passed as arguments or returned as values. Understanding how scope, more specifically lexical scope, and closures work can help design more effective and flexible software solutions.

Lexical Scope

Though we haven’t put a name to it until now, our conversations around scope and the scope chain are directly related to what we call lexical scoping.

Lexical scoping means that our scope is determined by its location within the code at the time of its declaration, meaning the scope is determined by its surrounding block structure. As a result, our code is more predictable and reliable in behavior because the scope is fixed at the time of writing and does not change during execution. Examples of lexical scope include variables like let and const, although not var. var is statically scoped, meaning the value is determined during the creation-phase (also known as build time), where hoisting also happens. You can see lexical scope by looking directly at code below:

function eatSnack() {
  let hunger = 25;

  getHangry();

  function getHangry() {
    console.log('I am sooooooo HANGRY!');
  }
}

eatSnack();

Closures

Closures are expressions (usually functions) which can work with variables set within a certain context. In other words, a closure is formed when a function is defined inside of another function (one function nested inside of another function). This allows the inner function to access the outer function’s variables via the scope chain.

Let’s build on a definition together. At the most basic level, a closure is when an inner function is defined inside of another function.

This is syntactically and factually correct, but it doesn’t tell us much about what’s significant here. So a more thorough definition might be: a closure is when an inner function has access to its outer function’s variables.

function greet() { 
  const firstName = 'Alan';

  function displayName() {
    console.log(firstName);
  }

  displayName();
} 

greet(); 

Expanding On Our Closure Definition

Now let’s modify this example a bit. Instead of invoking displayName right away within our greet function, we’ll return it:

function greet() { 
  const firstName = 'Alan'; 

  function displayName() {
    console.log(firstName);
  }

  return displayName;
} 

var createGreeting = greet();

Closures for Protecting Variables

This still might not seem like an incredibly useful feature of JavaScript, but there are some more practical use-cases for closures. Before we move on, What we want to point out about this example, in order to better understand closures, is that:

• firstName is not available anywhere outside of the greet function. We would say that the greet function “closes over” this variable
• the inner function, displayName can reference (or even modify) the firstName variable because it is inside the scope of the outer function greet

So one use-case for closures is to protect variables from any sort of outside manipulation (we’re not talking about security here). Other languages often have some really nice way of implementing private or protected variables, but JavaScript doesn’t. So if this is something we want to achieve, we would use a closure.

function analyzeGrades() {
  // We keep these variables private inside this closure
  let privateGrades = [93, 95, 88, 0, 55, 91];
  
  return {
    changeGrades() {
      privateGrades = privateGrades.map(grade => {
        return grade + 5;
      });
    },
    
    viewGrades() {
      return privateGrades;
    }
  }
};
  
console.log(privateGrades)
console.log(analyzeGrades)
console.log(analyzeGrades())

let instructor = analyzeGrades();
instructor.changeGrades(); // What is this doing here?
console.log(instructor.viewGrades());

const rentPrice = (initialRent) => {
  // your code goes here
}

var rent = rentPrice(8000);
  
// Update data using private methods 
console.log(rent.getRent()); // returns 8000
console.log(rent.incRent(2000));
console.log(rent.decRent(1500));
console.log(rent.decRent(1000)); 
console.log(rent.incRent(2000)); 
console.log(rent.getRent()); // returns 9500

Conclusion

Closures are functions that capture and remember the environment in which they were created, and can be used to create private variables. Implementation of closures can result in efficient, modular, and maintainable code, and avoid common pitfalls such as global namespace pollution, code duplication, and side effects. While implementation of closures is NOT expected in your projects moving forward, they will become even more relevant when working with React functional components in the future. They are also used in more advanced topics such as higher order functions and memoization, which you’ll explore more in the future.

Additional Resources

• practical uses for closures
• closures in depth
• memoization
• simple closures analogy