DEV Community: Thomas Finch

Scope and Closures in JavaScript

Thomas Finch — Thu, 01 Jun 2023 14:29:33 +0000

Photo by Jan van der Wolf

Scope and closures are essential concepts that are applicable to every JavaScript code base. While most developers may have some familiarity with these concepts, they are fundamental topics that deserve dedicated attention.
Understanding scope and closures is crucial for writing efficient and maintainable JavaScript code. In this article we will be covering the following topics:

The Scope
Global Scope
Function Scope
Block Scope
Closures

1. The Scope

Scope as a defined by a quick google search is as follows, “the extent of the area or subject matter that something deals with or to which it is relevant.”

In the context of JavaScript, scope refers to the extent of a variable's accessibility within our code. JavaScript encompasses three types of scope: Global, Function, and Block.

2. Global Scope

A variable with global scope is accessible globally throughout our code base. Any variable declared outside of a function with either the var, let or const keywords is said to have global scope.

let a = 1
const b = {someProperty: '2'};
var c = 'hello world';

function outer(){
    console.log(a);

    function inner(){
        console.log(b);   
    }
    inner();
}

console.log(c);

outer(); 

/*
Output:

1
{someProperty: '2'}
hello world

*/

3. Function Scope

Every function has it’s own scope, therefore, a variable declared in a function is only accessible within that function scope therefore the variable has function scope. This applies to any variable declared with var, let and const.

function outer(){
    let a = 1
    const b = {someProperty: '2'};
    var c = 'hello world';

    function inner(){
        console.log(b);   
    }

    console.log(a);
    console.log(b);
    console.log(c);
    inner();
}

outer(); 
/*
Output:

1
{someProperty: '2'}
hello world
{someProperty: '2'}
*/

console.log(a);
/*
Output:

ReferenceError: a is not defined
*/

As you can see in the final output, accessing the a variable outside of it’s functional scope is not possible and will result in a reference error.

Another interesting thing you can see here is that b in the outer function is accessible inside the nested inner function. This ability, where an inner function has access to the parent’s surrounding scope is known as the lexical or static scope.

We can nest functions as much as we like and each inner function will have access to the scope of all it’s outer functions.

Let’s look at one more example.

function outer(){
    const a = 1

    function inner(){
        const a = 'hello world'
        console.log(a);   
    }

    inner();
    console.log(a);
}

outer(); 
/*
Output:

hello world
1
*/

In the above function we can see that although the inner function has access to the outer function’s scope, the variable a in it’s own scope with the same name takes precedence when accessing the variable of that name. This concept is known as variable shadowing or shadowing.

4. Block Scope

The block scope was introduced with the release of ES6 in 2015 and only applies to the two new variable types that were also introduced, const and let.

A block is considered as group of statements enclosed within curly braces. The statements typically consist of control flow statements e.g. if, else, switch, variable declarations and function calls.

Any variables declared with the variable type var will simply ignore the block scope and apply either function or global scope depending on the given lexical environment.

Let’s checkout an example demonstrating block scope.

const a = true;

if (a) {
  let b = 1;
  {
    const c = 2;
    var d = 3;
    console.log(b);
    console.log(c);
  }
  console.log(b);
}

console.log(d);

/*
Output:

1
2
1
3
*/

As you can see block scope behaves identically to function scope except that it only applies to const and let variables, where the d variable declared with the var type simply ignores the block scope.

Additionally the block scope also adheres to the same shadowing and lexical scope behaviours we explored in function scopes.

5. Closures

MDN web docs defines a closure as “the combination of a function and the lexical environment within which that function was declared”.

Let’s take a look at an example which should provide a more intuitive understanding of this definition.


function outerFunction() {
  const outerVariable = 'I am the outer variable';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction();
closure();  

/*
Output:

I am the outer variable
*/

The closure function in this example is the innerFunction(), it captures the scope of it’s parent function, which is the variable outerVariable, within it’s own scope.

The innerFunction() can then access the outerVariable at any time during execution even if not during execution of the parent function.

Putting it more simply, a closure is a function that simply remembers the lexical scope from the place where it was defined regardless of where or when it is executed later.

Let’s take a look at some real world use cases of closures.

5.1 Event handling

Here is an example of how keep we can keep track of the number of times a button is pressed.

// Assume we have an html button with id #button

function buttonSetup() {
    const buttonRef = document.getElementById("#button");
    let count = 0;

    buttonRef.addEventListener("click", function () {
      count++;
      console.log(count);
    });
}

buttonSetup();

/*
Button clicked:
1

Button clicked again:
2

Button clicked again:
3

*/

As you can see here the anonymous event listener callback function captures the count variable in the buttonSetup() function in a closure.

Every time the button is clicked the count variable is simply incremented and its value logged to the console.

5.2 Private variables and encapsulation

In this example let’s model a toggle switch and hide access to it’s private internal state from the outside world.

function createToggleSwitch() {
  let toggleSwitch = "off";

  return {
    flickSwitch: function () {
      toggleSwitch = toggleSwitch === "off" ? "on" : "off";
    },

    logState: function () {
      console.log("state: ", toggleSwitch);
    }
  };
}

const toggle = createToggleSwitch();
toggle.logState();
toggle.flickSwitch();
toggle.logState();
toggle.flickSwitch();
toggle.flickSwitch();
toggle.logState();

/*
Output:

state:  off
state:  on
state:  on
*/

As you can see the internal toggleSwitch variable is completely inaccessible to anything outside of the createToggleSwitch. However we can still manipulate the toggle switch state through accessor functions that have closures capturing the lexical scope of their parent function createToggleSwitch().

5.3 Currying

Currying is a closure pattern that transforms a function that takes multiple arguments into a sequence of functions, each taking a single argument. Each function captures the lexical scope of it’s parent.

This pattern allows us chain and compose multiple functions whilst increasing code reuse and improving readability.

In this example we want to use the process of currying to apply different discounts to a customer depending on the customer type.

const discountRules = {
  staff: 10,
  manager: 20,
  customer: 0
};

function calcDiscount(percentDiscount) {
  return function (purchasePrice) {
    return (purchasePrice * (100 - percentDiscount)) / 100;
  };
}

function createDiscount(customerType) {
  const discountAmount = discountRules[customerType];
  return calcDiscount(discountAmount);
}

const applyManagerDiscount = createDiscount("manager");
const applyStaffDiscount = createDiscount("staff");
const applyCustomerDiscount = createDiscount("customer");

console.log("manager final price: ", applyManagerDiscount(45));
console.log("staff final price: ", applyStaffDiscount(45));
console.log("customer final price: ", applyCustomerDiscount(45));

/*
Output:

manager final price:  36
staff final price:  40.5
customer final price:  45
*/

In the above example there are two curried functions, createDiscount() and calcDiscount(). Both have distinct functionality where createDiscount() selects the percentage discount depending on the customer type and calcDiscount() applies the actual price discount transformation to the purchase price. By chaining these functions together we then create the specialised discount functions, applyManagerDiscount(), applyStaffDiscount() and applyCustomerDiscount().

It then becomes very intuitive to use and apply these specific discounts to the different customer types.

Another commonly confused but related concept to currying is ‘partial applications’. A partial application is the process of fixing or providing some arguments to a function, resulting in a new function with fewer parameters.

It is actually a more general concept where currying is a specialised type of partial applications, which takes multiple arguments and applies them to a sequence of functions each taking a single argument.

If you're interested in learning more about partial applications, a quick Google search will yield plenty of excellent content to explore.

6. Conclusion

There are 3 types of scope in JavaScript, Global, Function and Block.

Global scope means that a given variable is accessible throughout the code base. Function scope means that a given variable is only accessible within a function. Block scope, which only applies to const and let variables, means that a given variable can be accessed within a block i.e. a group of statements enclosed within curly braces.

The type of scope that applies to a given variable is based on the location or position of a given variable in the source code, this mechanism is known as the Lexical scope.

A closure allow us to capture a variable in a given lexical scope and reuse it in a different place from where it was defined regardless of where or when it is executed later.

There are many useful design patterns that employ closures this includes but is not limited to ‘event handling’, ‘encapsulation’ and ‘currying’.

Node.js - module.exports vs exports

Thomas Finch — Tue, 09 May 2023 13:17:06 +0000

Photo by Julia Volk

I've recently started reading the excellent "Node.js Design Patterns" book by Mario Casciaro and Luciano Mammino. The second Chapter of Book discusses the Node.js module system and provides an explanation of the CommonJs modules system through a minimal example implementation.

Though a fairly straightforward concept I thought there was some potential for confusion regarding the discussion of module.exports versus exports and although the authors do address this I saw no harm in reiterating the point in this post.

We'll start by briefly covering the idea of software modules followed by looking at how to use the JavaSCript CommonJS module system with example implementations, and then finally we'll explore the important caveat of exports by taking a peek under the hood at how the CommonJS module system actually works.

1. So what are modules?

Modules are a key tenet behind programming languages they provide an explicit way of encapsulating data and functions from other areas of our code. They also encourage code re-usability and by wrapping modules into packages and libraries they provide a convenient way of sharing and distributing code.

In modern JavaScript there are two standard module systems, ECMAScript modules (ES modules) and CommonJS. Although CommonJS is certainly in decline relative to the introduction of ES modules in 2015 it is certainly still relevant in the current developer landscape and you have likely or will come across it in many Node.js code bases.

2. How do we import and export modules with CommonJS?

Two foundational concepts in CommonJS are module.exports and require. Simply put, module.exports allows us to export a module, and require is a resolving function that allows us to import an exported module from a specified file. The example implementation below demonstrates how we can export a single add function from the calculate.js file and import it into the main.js file.

// calculate.js

function add(num1, num2) {
    return num1 + num2;
}

module.exports = add;

// main.js

const calculateAddition = require("./calculate");
const result = calculateAddition(2, 2);
console.log(result);

// result:
// 4

Notice how when exporting via this method we lose the original exported function name add and instead, we pass a reference to the exported function to the variable calculateAddition. If we didn't want to lose the function name we could instead assign an object literal containing the add function to module.exports

// calculate.js

module.exports = {add};

or equivalently we can use the dot notation to append an additional property to module.exports

// calculate.js

module.exports.add = add;

To import and access this function we can use the following code

// main.js

const calculate = require("./calculate");
const result = calculate.add(2,2);

Additionally, we can change the name of the exported function

// calculate.js

module.exports.addition = add;

// main.js

const calculate = require("./calculate");
const result = calculate.addition(2,2);

We can also easily export multiple functions, classes, primitives, and objects which are all accessible on the single exported object literal.

// calculate.js

function add(num1, num2) {
    return num1 + num2;
}

function sub(num1, num2) {
    // some code logic ...
}

function multiply(num1, num2) {
    // some code logic ...
}

const someConstantValue = 8;

const calculateObject = {
    a: 5,
    b: 6
};

class CalculationClass{
    calcSquareRoot(){
        // some code logic ...
    }
}



module.exports = {
    add,
    sub,
    multiply,
    someConstantValue,
    calculateObject,
    CalculationClass
}

Anything that isn't explicitly exported remains only accessible in the file in which it was declared. This means it will be hidden from any other file importing it and allow us to encapsulate private logic and data, this is a common pattern in JavaScript and is known as the "revealing module pattern".

Instead of module.exports we could also use the alias exports though this has an important caveat which we will cover in the next section. An example of how we can export both a subtract and add function using the exports keyword can be seen below.

// calculate.js

exports.add = add;
exports.subtract = subtract;

And to import and use these functions

// main.js

const calculate = require("./calculate");
const additionResult = calculate.add(2,2);
const subtractionResult = calculate.subtract(2,2);

3. What is the important caveat of using 'exports'?

Let's go back to the first example where we assigned the add function to module.exports and try using the exports alias instead

// calculate.js

function add(num1, num2) {
    return num1 + num2;
}

// replacing
// module.exports = add;

// with
exports = add;

If we attempt to import this in another file you'll get the following error


// main.js

const add = require("./calculate"); // 2.
const result = add(2, 2);
console.log(result);

// result:
// TypeError: add is not a function

So why is that? To answer the question we'll need to take a brief look under the hood at how the module system in CommonJS works.

Every JS file in a Node.js application is actually a module. Before any code execution, Node.js will wrap all the code in each JS file inside a function wrapper. This function wrapper ensures that all functions, classes, variables, and objects remain private unless explicitly stated otherwise. Each function wrapper is passed the following parameters that are accessible to the code written in the file, exports, require, module, __filename, and __dirname .

The module parameter is simply an object that represents the current module and contains multiple properties including exports. The default value of the key exports in module is simply an empty object {}. As we saw in previous examples, export values can either be appended to this object using the dot notation

module.exports.add = add;
module.exports.sub = subtract;

or can be assigned a new value e.g. Classes, Objects, functions, variables using

module.exports = add;

// or

module.exports = {add};

So why can't we assign values directly to the exports parameter? Very simply this is because exports is a reference to the module.exports object. So we can append new properties to the module.exports object, for example using

exports.add = add;
exports.sub = sub;

However, as the exports exports parameter is simply a reference if we attempt to assign it a new object using

exports = add;

All we're doing is changing the reference of the object the exports parameters is pointing to rather than actually modifying the properties exported from the module.

4. Summary

Modules provide a convenient way for us to encapsulate our code within tightly coupled units that facilitate code reuse and sharing.
ES Modules and CommonJS represent the most common module systems used in modern JavaScript.
In CommonJS, we can use either module.exports or exports in any JS file to export values from a module and we use require to import values from another module.
Anything we don't explicitly export remains only accessible in the file in which it was declared, in other words 'encapsulated'.
module.exports represents the actual value of the exported values in a module and exports is simply a reference to module.exports.
We can append new values e.g. functions, objects, and primitives to either module.exports or exports using dot notation but we can only assign new values to module.exports.
Valid export examples
- module.exports = {aFunction, anotherFunction}
- module.exports = aFunction
- module.exports.aFunction = aFunction
- module.exports.renamedFunction = aFunction
- exports.aFunction = aFunction
- exports.aFunction = {aFunction}
Invalid export examples
- exports = {aFunction, anotherFunction}
- exports = aFunction