In the context of JavaScript, a language renowned for its widespread use in web development, understanding scope is crucial to writing efficient and bug-free code.

Whether you're a seasoned developer or just starting your coding journey, the concept of scope in JavaScript is a topic that demands your attention.

What is Scope?

At its core, scope in JavaScript refers to the context or environment in which variables are declared and can be accessed.

It dictates the visibility and lifetime of a variable, determining where in your code a particular variable is valid and accessible.

A solid grasp of scope is indispensable because it can affect how your code behaves and interacts with other parts of your application.

Scope is not a mere technicality – it profoundly influences the way you structure your code, manage your data, and prevent conflicts between variables.

A lack of understanding of scope can lead to bugs, unexpected behaviors, and increased maintenance efforts, all of which can be avoided with proper comprehension and application of scope rules.

JavaScript offers various types of scope, with the three primary ones being global, local, and block scope.

These scopes control the accessibility of variables in different parts of your code and play a pivotal role in maintaining code organization and preventing variable conflicts.

The purpose of this article is to provide a comprehensive understanding of the different scopes in JavaScript, namely global, local, and block scope.

We will delve into the intricacies of each type of scope, explore examples to illustrate their practical applications, and highlight best practices for utilizing them effectively.

By the end of this article, you will have a solid foundation in JavaScript scope, enabling you to write more robust, maintainable, and efficient code in your web development projects.

So, let's embark on this journey to unravel the mysteries of scope in JavaScript.

Table of Contents

• Global Scope

• Variables Declared in Global Scope

• How to Access Global Variables

• Potential Issues with Global Scope

• Best Practices for Using Global Scope

• Local Scope

• Variables Declared in Local Scope

• How to Access Local Variables

• The Concept of Variable Shadowing

• Benefits of Using Local Scope

• Block Scope

• Variables Declared in Block Scope

• Differences between Block Scope and Local Scope

• How to Use Block Scope with let and const

• Block Scope in Conditional Statements and Loops

• Scope Chain

• How JavaScript Resolves Variable References

• Understanding Lexical Scope

• Nested Scopes and Their Impact on the Scope Chain

• Closures and Function Scope

• How Function Scope and Closures are Related

• Practical Examples of Closures

• Scope Best Practices

• Tips for Avoiding Common Scope-Related Issues

• The Importance of Minimizing Global Variables

• Using Appropriate Variable Names for Clarity

• When to Use Different Types of Scope

• Conclusion

Global Scope

In JavaScript, global scope is the widest scope available. Variables declared in global scope are accessible from anywhere in your code, whether it's inside functions, conditional statements, loops, or other blocks of code.

You can think of global scope as the "public square" of your program, where everyone can see and access what's going on.

To illustrate, let's consider an analogy. Imagine your JavaScript program as a small town, and the global scope as the town's central square.

Everything you declare in global scope is like putting up a billboard in the square for everyone to see. Any function or code block within your program can read and modify these global variables.

Variables Declared in Global Scope

Variables declared in global scope are typically defined outside of any functions or code blocks. For example:

var globalVariable = "I'm in global scope";

function myFunction() {
  // This function can access globalVariable
  console.log(globalVariable);
}

myFunction();

Here, globalVariable is declared in global scope, and myFunction can access and use it directly.

How to Access Global Variables

Accessing global variables is straightforward. You can use them within functions or any part of your code without any special effort. It's like having a public notice board in the town square where everyone can read and post messages.

var townMessage = "Welcome to our lovely town!";

function welcomeMessage() {
  console.log(townMessage); // Accessing the global variable
}

welcomeMessage();

Potential Issues with Global Scope

While global scope can be quite convenient, it comes with potential downsides.

Since global variables are accessible from anywhere, they are susceptible to unintended changes and conflicts.

For instance, if multiple parts of your code modify the same global variable, it can lead to unexpected behaviors and bugs that are hard to track down.

Moreover, global variables can make your code less modular and organized. If everything is in the town square, it becomes challenging to manage and isolate different aspects of your program.

Best Practices for Using Global Scope

To minimize the potential issues associated with global scope, consider the following best practices:

1. Use global scope sparingly: Only declare variables in global scope when they genuinely need to be accessed globally.

2. Avoid overwriting global variables: Be cautious when modifying global variables to prevent unintended side effects.

3. Use descriptive variable names: Choose variable names that clearly convey their purpose, especially in global scope where they can affect many parts of your code.

Global scope in JavaScript is like the town square where everyone can access and modify variables.

While it provides broad visibility, it should be used judiciously to maintain code clarity and prevent unintended side effects.

Understanding global scope is a crucial step in mastering JavaScript's scope mechanics.

Local Scope

Local scope in JavaScript is like a private room within a building – it's an enclosed space where variables are only accessible from within that specific room.

When you declare a variable in local scope, it is limited in visibility to the block of code, function, or conditional statement in which it is defined.

Variables in local scope are protected from interference or modification by code outside their scope, providing a level of isolation.

Variables Declared in Local Scope

Variables in local scope are typically declared within functions, conditional statements, loops, or other code blocks.

These variables are, in essence, "local" to that block of code, and they cannot be directly accessed from outside it.

Consider this analogy: if a local scope is like a private room, a variable declared within that scope is akin to an object or piece of furniture placed inside that room.

Others can't directly interact with it from outside – they would need permission, like a key, to enter the room and access the variable.

Here's an example:

function myFunction() {
  var localVariable = "I'm in local scope";
  console.log(localVariable);
}

myFunction();
// Accessing localVariable here would result in an error

In this code, localVariable is in local scope, which means it's only accessible within the myFunction block.

How to Access Local Variables

Accessing local variables is straightforward within the scope where they are defined.

These variables are isolated from the outside world, ensuring that they won't accidentally clash with other variables in your program

function greet() {
  var greeting = "Hello, world!";
  console.log(greeting); // Accessing the local variable
}

greet();

In this example, greeting is a local variable, and it's safely accessed within the greet function without affecting variables outside of it.

The Concept of Variable Shadowing

Variable shadowing occurs when you declare a variable with the same name inside a local scope, effectively "hiding" the variable with the same name in a higher scope.

This is similar to placing an object with the same name in multiple rooms, and the one in the inner room takes precedence when you try to access it.

Consider this example:

var message = "Global message";

function showMessage() {
  var message = "Local message"; // This "shadows" the global variable
  console.log(message); // Accessing the local variable
}

showMessage();
console.log(message); // Accessing the global variable

In this code, the local variable message shadows the global variable with the same name when you're inside the showMessage function.

Benefits of Using Local Scope

Local scope offers several advantages:

1. Isolation: It prevents unintended interference with variables in other parts of your code, reducing the risk of bugs and conflicts.

2. Modularity: It allows you to compartmentalize your code, making it more manageable and easier to maintain.

3. Reusability: Variables in local scope can be defined and used within specific functions or blocks, promoting code reusability without affecting the rest of your program.

Understanding local scope and how it provides encapsulation is a fundamental concept in JavaScript that allows for organized, modular, and less error-prone code.

Block Scope

Block scope in JavaScript is like a series of nested boxes within a larger container, each with its own set of variables.

Unlike global and local scopes, which are defined by functions or global context, block scope is created within specific code blocks, such as conditional statements (if, else, switch) and loops (for, while).

Variables declared in block scope are confined to that block, offering a high degree of isolation.

To illustrate, imagine a Russian nesting doll. The larger doll represents the global scope, and each smaller doll nested inside it represents a block scope.

Variables within a block scope can't escape to the outer scopes, just as a doll within a doll can't get out.

Variables Declared in Block Scope

Variables declared in block scope are only accessible within the block in which they are defined. These variables are like hidden treasures inside each nesting doll, known and accessible only within their respective compartments.

Here's an example using a block scope within an if statement:

if (true) {
  let blockVariable = "I'm in block scope";
  console.log(blockVariable);
}
// Accessing blockVariable here would result in an error

In this code, blockVariable is defined within the block created by the if statement and is inaccessible outside of it.

Differences between Block Scope and Local Scope

Block scope is often confused with local scope, but there's a key distinction.

In local scope, variables are typically defined within a function, while block scope is created within code blocks like if, for, or while statements.

Local scope is function-level, meaning it encompasses the entire function, while block scope is limited to the specific block where the variable is declared.

Consider the following code to highlight the difference:

function myFunction() {
  if (true) {
    var localVariable = "I'm in block scope";
    let blockVariable = "I'm also in block scope";
  }
  console.log(localVariable); // Accessible
  console.log(blockVariable); // Error: blockVariable is not defined
}

In this example, localVariable is accessible within the function because it's in local scope. On the other hand, blockVariable is accessible only within the if block due to block scope.

How to Use Block Scope with let and const

The introduction of the let and const keywords in JavaScript significantly enhanced block scope.

These keywords allow you to declare variables with block scope, making it easier to control variable visibility and lifespan.

function exampleBlockScope() {
  if (true) {
    let blockVariable = "I'm block-scoped with 'let'";
    const constantBlockVar = "I'm block-scoped with 'const'";
  }
  console.log(blockVariable); // Error: blockVariable is not defined
  console.log(constantBlockVar); // Error: constantBlockVar is not defined
}

In this code, blockVariable and constantBlockVar are block-scoped and inaccessible outside their respective blocks.

Block Scope in Conditional Statements and Loops

Block scope is often used in conditional statements and loops to control the scope of variables. Consider this example:

function checkCondition() {
  let result = "Before condition";
  if (true) {
    let result = "Inside condition"; // Block-scoped variable
  }
  console.log(result); // "Before condition" from the outer scope
}

In this code, the variable result is block-scoped inside the if statement, and it doesn't affect the result variable in the outer scope.

Block scope is a powerful tool for managing variable visibility and preventing unintended variable clashes within specific code blocks.

It enhances code modularity and helps you write more maintainable and predictable JavaScript code. Understanding block scope is essential for efficient and organized coding.

Scope Chain

The scope chain in JavaScript is like a stack of transparent sheets, each representing a different scope. These sheets are stacked on top of each other, with the global scope at the bottom.

When you reference a variable, JavaScript searches for it starting from the top sheet (the current local or block scope) and moves down through the sheets, looking in each scope until it finds the variable.

This process of searching for variables through multiple scopes is known as the "scope chain."

Imagine you have a pile of sheets representing different scopes, like a book with many pages. Each page contains some information (variables) that you can access.

When you need a piece of information, you start from the current page, and if it's not there, you turn the pages until you find it.

How JavaScript Resolves Variable References

To understand the scope chain better, consider the following example:

var globalVariable = "I'm global";

function outerFunction() {
  var outerVariable = "I'm in outer scope";

  function innerFunction() {
    var innerVariable = "I'm in inner scope";
    console.log(innerVariable); // Access innerVariable
    console.log(outerVariable); // Access outerVariable
    console.log(globalVariable); // Access globalVariable
  }

  innerFunction();
}

outerFunction();

In this example, the innerFunction can access variables from its local scope (for example, innerVariable), the outer scope (for example, outerVariable), and the global scope (for example, globalVariable). JavaScript follows the scope chain to find these variables.

Understanding Lexical Scope

The scope chain in JavaScript follows a principle known as lexical (or static) scoping.

Lexical scoping means that the scope of a function is determined by where the function is declared, not where it's called.

This concept is similar to how a book's pages are ordered and arranged in a specific sequence, with each page having access to the previous ones.

Consider the following code:

var a = "I'm global";

function firstFunction() {
  var a = "I'm in firstFunction";

  function secondFunction() {
    console.log(a); // Accesses a from firstFunction, not the global a
  }

  secondFunction();
}

firstFunction();

In this example, even though secondFunction is called from within firstFunction, it still references the a variable from the scope where it was declared (lexical scope), which is the firstFunction.

Nested Scopes and Their Impact on the Scope Chain

The scope chain can become more complex when you have nested functions or code blocks.

Each new layer introduces a new sheet in the stack. Variables in inner scopes can shadow (hide) variables with the same name in outer scopes.

Here's an example to illustrate this concept:

var x = 10;

function outer() {
  var x = 20;

  function inner() {
    var x = 30;
    console.log(x); // Accesses x from the innermost scope (x = 30)
  }

  inner();
  console.log(x); // Accesses x from the outer scope (x = 20)
}

outer();
console.log(x); // Accesses x from the global scope (x = 10)

In this code, each scope has its own x variable, and the scope chain determines which one is accessed.

Understanding the scope chain and how it follows the rules of lexical scoping is crucial for effectively managing variable access and avoiding unexpected variable clashes in complex JavaScript programs.

It's like flipping through a book's pages to find the information you need in the right order.

Closures and Function Scope

Closures are a fascinating and powerful concept in JavaScript that involves the interplay of function scope and the scope chain.

Think of closures as little "bundles" of code that encapsulate both a function and the variables it needs to work with.

These bundles are like self-contained units of functionality that can be stored, passed around, and executed independently.

Analogously, consider a lunchbox that contains a sandwich and some ingredients. The lunchbox keeps everything together and allows you to enjoy your meal when and where you like.

In a similar way, closures bundle a function with its associated variables, making them portable and self-contained.

How Function Scope and Closures are Related

In JavaScript, a closure is formed when a function is declared within another function, and the inner function has access to the variables of the outer function.

This behavior is a result of function scope and the scope chain.

Let's look at an example to illustrate closures:

function outerFunction() {
  var outerVariable = "I'm in outerFunction";

  function innerFunction() {
    console.log(outerVariable); // Accesses outerVariable from the outer scope
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // This still has access to outerVariable

In this code, innerFunction is declared inside outerFunction, forming a closure.

When outerFunction is called and assigned to the closure variable, it retains access to outerVariable even after outerFunction has completed.

This is the essence of a closure: the inner function remembers the scope in which it was created and can access its variables even when the outer function has finished executing.

Practical Examples of Closures

Closures are used in various scenarios in JavaScript. Here are a few practical examples:

• Data Encapsulation: Closures allow you to encapsulate data and behavior. It's like a sealed envelope containing information that can only be accessed through specific methods.

function createCounter() {
  var count = 0;
  return {
    increment: function() {
      count++;
    },
    getCount: function() {
      return count;
    }
  };
}

var counter = createCounter();
counter.increment();
console.log(counter.getCount()); // Accesses the count variable via closures

• Event Handlers: Closures are commonly used in event handling. An event handler function can "remember" the context in which it was created, making it easy to access variables when handling events.

function setupEvent() {
  var message = "Hello, world!";
  document.getElementById("myButton").addEventListener("click", function() {
    alert(message); // Accesses the message variable via a closure
  });
}

• Module Pattern: Closures can be used to create modular and organized code structures. You can hide internal implementation details and expose only the necessary interface.

var module = (function() {
  var privateVariable = "I'm private";

  return {
    publicFunction: function() {
      console.log(privateVariable); // Accesses privateVariable via a closure
    }
  };
})();

module.publicFunction();

Closures are a fundamental concept that enables advanced JavaScript programming techniques and is essential for understanding topics like callbacks, promises, and asynchronous programming.

They provide a means to create self-contained, reusable, and secure code components, much like the way a lunchbox contains everything you need for a meal.

Scope Best Practices

Effective management of scope is a fundamental aspect of writing clean, maintainable, and efficient JavaScript code.

By following best practices, you can avoid common pitfalls, reduce the likelihood of bugs, and improve the overall quality of your code.

Here are some scope-related best practices:

Tips for Avoiding Common Scope-Related Issues

• Limit Global Variables: Minimize the use of global variables. Overusing them can lead to naming conflicts and make it challenging to maintain your code as it grows.Only use global scope for variables that truly need to be accessed from various parts of your application.

• Use Strict Mode: Enable strict mode in your JavaScript code. Strict mode helps catch common programming mistakes and "unsafe" actions, including accidentally creating global variables.

To enable strict mode, add the following line to the top of your scripts:

"use strict";

• Avoid Variable Shadowing: Be cautious when reusing variable names in nested scopes, as this can lead to confusion and unexpected behavior. Use descriptive variable names and minimize shadowing to improve code readability.

The Importance of Minimizing Global Variables

• Data Encapsulation: Encapsulate your data within functions and modules. By keeping data within local or function scope, you reduce the risk of unintended interference and make your code more modular and maintainable.

• Avoid Side Effects: Minimizing global variables helps reduce unintended side effects in your code. Global variables can be modified from multiple locations, making it difficult to trace the source of changes and leading to unexpected results.

Using Appropriate Variable Names for Clarity

• Descriptive Naming: Use clear and descriptive variable names that convey their purpose. This practice is especially crucial in global scope, where variable names can affect multiple parts of your code. Descriptive names improve code understanding and maintainability.

• Avoiding Single-Letter Variables: While single-letter variable names like i and j are common in loops, try to use them sparingly outside of loop contexts. Meaningful variable names enhance code readability and make it easier for you and others to understand your code.

When to Use Different Types of Scope

• Global Scope: Use global scope only for variables that genuinely need to be accessed throughout your application. Global variables should be rare exceptions and carefully managed.

• Local and Block Scope: Embrace local and block scope to keep variables isolated and contained. Use local scope within functions and block scope for variables within specific code blocks like loops and conditional statements.

• Closures: Utilize closures for encapsulating data and behavior when necessary. Closures provide a powerful way to create self-contained units of functionality and are particularly valuable for data privacy and modularity.

Mastering scope in JavaScript is crucial for writing efficient and maintainable code.

By following these best practices, you can minimize common scope-related issues, reduce the risk of bugs, and create code that is easier to read, understand, and maintain.

Keep in mind that scope is not just a technical aspect of programming. It also plays a pivotal role in writing code that is both reliable and scalable.

Conclusion

Scope in JavaScript is a fundamental concept that influences the behavior and structure of your code.

Understanding the intricacies of global, local, and block scope, as well as the scope chain, is essential for becoming a proficient JavaScript developer.

In this article, we've explored these concepts in depth, providing analogies and code examples to aid your understanding.

JavaScript's scope mechanisms are like the foundation of a building – they determine the structure, stability, and functionality of your code.

The scope you choose and how you manage it can significantly impact the quality and maintainability of your projects.

As you conclude this exploration of scope, it's crucial to reiterate some key takeaways:

1. Scope is a Crucial Concept: Scope is not just a technicality. It's a core concept that influences the way you write, organize, and maintain your JavaScript code.

2. Global, Local, and Block Scope: JavaScript offers different types of scope, each serving specific purposes. Global scope provides broad accessibility, local scope offers isolation, and block scope controls visibility within specific code blocks.

3. Scope Chain and Closures: Understanding the scope chain is essential for comprehending how JavaScript resolves variable references. Closures, which leverage function scope, play a pivotal role in encapsulating data and behavior.

4. Best Practices Matter: Following scope best practices, such as minimizing global variables, using descriptive variable names, and embracing local and block scope, will lead to cleaner and more maintainable code.

As you work on real-world projects, keep these scope-related principles in mind, and apply them to create code that is not only robust but also adaptable to the evolving demands of web development.

Continue exploring and practicing these concepts, and you'll be well on your way to JavaScript mastery.

You may have come across or written code similar to this when writing JavaScript:

function sayWord(word) {
    return () => console.log(word);
}

const sayHello = sayWord("hello");

sayHello(); // "hello"

This code is interesting for a couple of reasons. First, we can access word in the function returned from sayWord. Second, we have access to word’s value when we call sayHello – even though we call sayHello where we do not otherwise have access to word.

In this article, we’ll learn about scope and closures, which enable this behavior.

Introducing Scope in JavaScript

Scope is the first piece that will help us understand the previous example. A variable’s scope is the part of a program where it is available for use.

JavaScript variables are lexically scoped, meaning that we can determine a variable’s scope from where it is declared in the source code. (This is not entirely true: var variables are not lexically scoped, but we will discuss that shortly.)

Take the following example:

if (true) {
    const foo = "foo";
    console.log(foo); // "foo"
}

The if statement introduces a block scope by using a block statement. We say that foo is block-scoped to the if statement. This means it can only be accessed from within that block.

If we try to access foo outside of the block, we get a ReferenceError because it is out of scope:

if (true) {
    const foo = "foo";
    console.log(foo); // "foo"
}

console.log(foo); // Uncaught ReferenceError: foo is not defined

Block statements in other forms, such as for and while loops, will also create a scope for block-scoped variables. For instance, foo is scoped within a function body below:

function sayFoo() {
    const foo = "foo";
    console.log(foo);
}

sayFoo(); // "foo"

console.log(foo); // Uncaught ReferenceError: foo is not defined

Nested Scopes and Functions

JavaScript allows nested blocks and therefore nested scopes. Nested scopes create a scope tree or scope chain.

Consider the code below, which nests multiple block statements:

if (true) {
    const foo = "foo";
    console.log(foo); // "foo"

    if (true) {
        const bar = "bar";
        console.log(foo); // "foo"

        if (true) {
            console.log(foo, bar); // "foo bar"
        }
    }
}

JavaScript also allows us to nest functions:

function foo(bar) {
    function baz() {
        console.log(bar);
    }

    baz();
}

foo("bar"); // "bar"

As expected, we can access variables from their direct scope (the scope where they get declared). We can also access variables from their inner scopes (the scopes that nest within their direct scope). That is, we can access variables from the scope they get declared in and from every inner scope.

Before we go further, we should clarify the difference in this behavior between variable declaration types.

Scope of let, const, and var in JavaScript

We can create variables with the let, const, and var declarations. For let and const, block scoping works as explained above. However, var behaves differently.

let and const

let and const create block-scoped variables. When declared within a block, they are only accessible within that block. This behavior was demonstrated in our previous examples:

if (true) {
    const foo = "foo";
    console.log(foo); // "foo"
}

console.log(foo); // Uncaught ReferenceError: foo is not defined

var

Variables created with var are scoped to their nearest function or the global scope (which we will discuss shortly). They are not block scoped:

function foo() {
    if (true) {
        var foo = "foo";
    }
    console.log(foo);
}

foo(); // "foo"

var can create confusing situations, and this information is only included for completeness. It is best to use let and const when possible. The rest of this article will pertain only to let and const variables.

If you’re interested in how var behaves in the example above, you should check out my article on hoisting.

Global and Module Scope in JavaScript

In addition to block scopes, variables can be scoped to the global and module scope.

In a web browser, the global scope is at the top level of a script. It is the root of the scope tree that we described earlier, and it contains all other scopes. Thus, creating a variable in the global scope makes it accessible in every scope:

<script>
    const foo = "foo";
</script>
<script>
    console.log(foo); // "foo"

    function bar() {
        if (true) {
            console.log(foo);
        }
    }

    bar(); // "foo"
</script>

Each module also has its own scope. Variables declared at the module level are only available within that module – they are not global:

<script type="module">
    const foo = "foo";
</script>
<script>
    console.log(foo); // Uncaught ReferenceError: foo is not defined
</script>

Closures in JavaScript

Now that we understand scope, let’s go back to the example that we saw in the introduction:

function sayWord(word) {
    return () => console.log(word);
}

const sayHello = sayWord("hello");

sayHello(); // "hello"

Recall that there were two interesting points about this example:

1. The returned function from sayWord can access the word parameter
2. The returned function maintains the value of word when sayHello is called outside the scope of word

The first point can be explained by lexical scope: the returned function can access word because it exists in its outer scope.

The second point is because of closures: A closure is a function combined with references to the variables defined outside of it. Closures maintain the variable references, which allow functions to access variables outside of their scope. They “enclose” the function and the variables in its environment.

Examples of Closures in JavaScript

You have probably encountered and used closures frequently without being aware of it. Let’s explore some more ways to use closures.

Callbacks

It is common for a callback to reference a variable declared outside of itself. For example:

function getCarsByMake(make) {
    return cars.filter(x => x.make === make);
}

make is available in the callback because of lexical scoping, and the value of make is persisted when the anonymous function is called by filter because of a closure.

Storing state

We can use closures to return objects from functions that store state. Consider the following makePerson function which returns an object that can store and change a name:

function makePerson(name) {
    let _name = name;

    return {
        setName: (newName) => (_name = newName),
        getName: () => _name,
    };
}

const me = makePerson("Zach");
console.log(me.getName()); // "Zach"

me.setName("Zach Snoek");
console.log(me.getName()); // "Zach Snoek"

This example illustrates how closures do not just freeze the values of variables from a function’s outer scope during creation. Instead, they maintain the references throughout the closure’s lifetime.

Private methods

If you’re familiar with object-oriented programming, you might have noticed that our previous example closely resembles a class that stores private state and exposes public getter and setter methods. We can extend this object-oriented parallel further by using closures to implement private methods:

function makePerson(name) {
    let _name = name;

    function privateSetName(newName) {
        _name = newName;
    }

    return {
        setName: (newName) => privateSetName(newName),
        getName: () => _name,
    };
}

privateSetName is not directly accessible to consumers and it can access the private state variable _name through a closure.

React event handlers

Lastly, closures are common in React event handlers. The following Counter component is modified from the React docs:

function Counter({ initialCount }) {
    const [count, setCount] = React.useState(initialCount);

    return (
        <>
            <button onClick={() => setCount(initialCount)}>Reset</button>
            <button onClick={() => setCount((prevCount) => prevCount - 1)}>
                -
            </button>
            <button onClick={() => setCount((prevCount) => prevCount + 1)}>
                +
            </button>
            <button onClick={() => alert(count)}>Show count</button>
        </>
    );
}

function App() {
    return <Counter initialCount={0} />;
}

Closures make it possible for:

• the reset, decrement, and increment button click handlers to access setCount
• the reset button to access initialCount from Counter's props
• and the “Show count” button to display the count state.

Closures are important in other parts of React, such as props and hooks. Discussion about these topics is out of scope for this article. I recommend reading this post from Kent C. Dodds or this post from Dan Abramov to learn more about the role that closures play in React.

Conclusion

Scope refers to the part of a program where we can access a variable. JavaScript allows us to nest scopes, and variables declared in outer scopes are accessible from all inner ones. Variables can be globally-, module-, or block-scoped.

A closure is a function enclosed with references to the variables in its outer scope. Closures allow functions to maintain connections with outer variables, even outside the scope of the variables.

There are many uses of closures, from creating class-like structures that store state and implement private methods to passing callbacks to event handlers.

Let's connect

If you’re interested in more articles like this, subscribe to my newsletter and connect with me on LinkedIn and Twitter!

Acknowledgements

Thanks to Bryan Smith for providing feedback on drafts of this post.

Cover photo by Karine Avetisyan on Unsplash.