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, helping create modular and reusable code. Variables are typically declared within a specific scope, such as a function, and are used only within that scope and any nested scopes. Closures allow a function to access and manipulate variables outside its own scope.

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. Understanding scope, especially lexical scope, and closures can help design more effective software solutions.

Lexical Scope

Lexical scoping means that the scope of a variable is determined by its location within the code at the time of its declaration. The scope is defined by the surrounding block structure. This makes the code more predictable and reliable because the scope is fixed at the time of writing and does not change during execution.

function eatSnack() {
  let hunger = 25;

  getHangry();

  function getHangry() {
    console.log(`I am sooooooo HANGRY! My hunger level is ${hunger}.`);
  }
}

eatSnack();

Closures

Closures are functions that capture and remember their lexical environment. Another way you can describe it is a closure is when a nested function can access variables from its outer function.

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

While closures might not seem immediately useful, they have practical applications. Some key points to understand from the previous example is:

• firstName is only accessible within the greet function, meaning greet “closes over” this variable.
• The inner function displayName can access (or modify) firstName because it is within the scope of greet.

One practical use of closures is to protect variables from external manipulation. Unlike other languages with built-in private or protected variables, JavaScript uses closures to achieve this.

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, allowing access to outer function variables. They enable the creation of private variables and can lead to efficient, modular, and maintainable code. While implementation of closures is NOT expected in your projects moving forward, they will become increasingly relevant, especially in advanced topics such as higher-order functions and memoization.

Additional Resources

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