DEV Community: Imran Abdulmalik

Mastering Closures in JavaScript: A Comprehensive Guide

Imran Abdulmalik — Tue, 26 Sep 2023 09:41:37 +0000

Closures are a fundamental part of JavaScript, providing an excellent tool for writing more maintainable and modular code. In this guide, we'll dive into the depths of closures, exploring their characteristics, uses, and the potential pitfalls and optimisations related to them.

Scoping in JavaScript

In JavaScript, scoping refers to the context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope", then it is unavailable for use. There are two main types of scope in JavaScript: global scope and local scope, and with the introduction of ES6, block scope came into the picture as well.

Global Scope

When a variable is declared outside of a function, it is in the global scope and its value is accessible and modifiable throughout the program. Example:

var myGlobalVar = "This is global!";

function printSomething() {
  console.log(myGlobalVar);
}

printSomething(); // Output: This is global!

Local (or Function) Scope

Variables declared within a function are in the local scope, and they cannot be accessed outside of that function. Example:

function printSomething() {
  var myLocalVar = "I'm local!";
  console.log(myLocalVar);
}

printSomething(); // Output: I'm local!

// Not allowed
console.log(myLocalVar); // Output: Uncaught ReferenceError: myLocalVar is not defined

Block Scope

Introduced in ES6, let and const allow for block-level scoping, meaning the variable is only accessible within the block it’s defined. Example:

if (true) {
  let blockScopedVar = "I'm block scoped!";
  console.log(blockScopedVar); // Output: I'm block scoped!
}

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

As we've seen, when we define a function, variables defined within the function are only available from within the function. Any attempt to access those variables outside the function will result in a scope error. This is where closures (lexical scoping) comes in!

What are Closures in JavaScript?

JavaScript follows lexical scoping for functions, meaning functions are executed using the variable scope that was in effect when they were defined, not the variable scope that is in effect when they are invoked.

A closure is the combination of a function and the lexical environment within which that function was declared. In JavaScript, closures are created every time a function is created, at function creation time.

function outerFunction() {
  let outerVar = "I'm from outer function!";

  return function innerFunction() {
    console.log(outerVar);
  }
}

In the example above, as a result of function local scoping, the innerFunction() is not available from the global scope. The innerFunction() can access all the local variables defined in outerFunction() because it is defined within the outerFunction(). The innerFunction() retains access to the outerVariable even outside its execution context.

The innerFunction() is still technically local to the outerFunction(). However, we can access the innerFunction() through the outerFunction() because it is returned from the function. Calling the outerFunction() gives us access to the innerFunction():

const closureFunction = outerFunction();
closureFunction(); // Output: I'm from outer function!

Practical Use Cases of Closures

Closures have several practical use cases in JavaScript development. Closures are commonly used to create factory functions, encapsulate data, and manage state in callbacks and event handlers.

Data Privacy/Encapsulation

Closures can be used to create private variables or methods, which is a fundamental aspect of Object-Oriented Programming (OOP). By using a closure, you can create variables that can't be accessed directly from outside the function, providing a way to encapsulate data.

Example:

function createBankAccount(initialBalance) {
  let balance = initialBalance;
  return {
    getBalance: function() {
      return balance;
    },
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
    withdraw: function(amount) {
      if (amount > balance) {
        console.log('Insufficient funds');
        return;
      }
      balance -= amount;
      return balance;
    },
  };
}

const account = createBankAccount(100);
console.log(account.getBalance()); // 100
account.deposit(50);
console.log(account.getBalance()); // 150
account.withdraw(30);
console.log(account.getBalance()); // 120

In this example, a createBankAccount function is defined that takes an initial balance as a parameter. It initializes a balance variable and returns an object with three methods (getBalance, deposit, withdraw) that can access and modify the balance.

balance is not accessible directly from outside the function, ensuring data privacy.
getBalance allows you to view the current balance.
deposit adds a specified amount to the balance.
withdraw subtracts a specified amount from the balance, if sufficient funds are available.

When createBankAccount is called, it returns an object with methods that have access to the balance, even after the createBankAccount function execution context is gone. This is an example of a closure.

Maintaining State

Closures are a great way to maintain state between function calls. This characteristic is particularly useful when working with asynchronous code, event handlers, or any situation where you need to preserve a specific state over time.

Example:

function createCounter() {
  let count = 0;
  return function() {
    count += 1;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // Output: 1
counter(); // Output: 2
counter(); // Output: 3

In this example, the counter function maintains the count state between different calls.

createCounter initialises a count variable and returns an anonymous function.
Each time the returned function is called, it increments count and logs the value.
count retains its value between calls to the returned function, allowing it to act as a persistent counter.

Factory Functions

Closures can be used to create factory functions, which return objects with methods and properties that have access to the private data within the closure.

Example:

function personFactory(name, age) {
  return {
    getName: function() {
      return name;
    },
    getAge: function() {
      return age;
    },
    celebrateBirthday: function() {
      age += 1;
    },
  };
}

const john = personFactory('John', 30);
console.log(john.getName()); // Output: John
console.log(john.getAge()); // Output: 30
john.celebrateBirthday();
console.log(john.getAge()); // Output: 31

personFactory takes name and age parameters and returns an object with three methods (getName, getAge, celebrateBirthday).
Each method has access to name and age, demonstrating closure behavior.
celebrateBirthday method can modify the age, illustrating how closures can update the enclosed variables.

Partial Application and Currying

Closures can be used to implement partial application and currying, which are techniques in functional programming.

Example:

function multiply(a, b) {
  return a * b;
}

function partialMultiply(a) {
  return function(b) {
    return multiply(a, b);
  };
}

const double = partialMultiply(2);
console.log(double(5)); // Output: 10

partialMultiply takes a single parameter and returns a function.
The returned function takes another parameter and calls multiply, which takes two parameters.
This is a simple example of partial application, where a function that takes multiple parameters is broken into multiple functions that take one parameter each.

Event Handling

Closures are used in event handling to encapsulate the state and provide access to variables across different scopes.

Example:

function setupButtons() {
  for (var i = 0; i < 3; i++) {
    document.getElementById('button' + i).addEventListener('click', (function(i) {
      return function() {
        alert('Button ' + i + ' clicked');
      };
    })(i));
  }
}

A loop is used to add event listeners to buttons.
An immediately-invoked function expression (IIFE) is used to create a closure that captures the current value of i for each iteration.
This ensures that each button click alerts the correct button number.

Timeouts and Intervals

Closures are used in setTimeout and setInterval to refer to the correct variable or state.

Example:

function delayedAlert(number) {
  setTimeout(function() {
    alert('Number: ' + number);
  }, number * 1000);
}

delayedAlert(5);

setTimeout is used to delay the execution of a function.
The function passed to setTimeout has access to the number parameter, demonstrating a closure.
The alert will display the correct number even after a delay.

In each of these use cases, closures provide a way to manage and encapsulate state, allowing for more modular and maintainable code.

Exploring Advanced Closure Patterns

In the world of JavaScript, closures are a pivotal concept that allows functions to access variables from an outer function even after the outer function has executed. Beyond their basic use, there are advanced closure patterns that developers can use to create more efficient, readable, and maintainable code. This section delves into some of these advanced closure patterns and provides practical examples to illustrate their utility.

Advanced closure patterns in JavaScript are techniques that involve utilising closures to accomplish specific, often sophisticated, programming tasks. These patterns can enhance code modularity, encapsulation, and even performance.

1. The Module Pattern

The Module Pattern is a structural pattern that uses closures to create private and public encapsulated variables and methods within a single object.

Example:

const Calculator = (function() {
  let _data = 0; // private variable

  function add(number) { // private method
    _data += number;
    return this;
  }

  function fetchResult() { // public method
    return _data;
  }

  return {
    add,
    fetchResult
  };
}());

Calculator.add(5).add(3);
console.log(Calculator.fetchResult()); // Output: 8

What's Happening?

A Calculator object is created using an Immediately Invoked Function Expression (IIFE).
Within the IIFE, _data is a private variable that is inaccessible outside of the function scope.
The add function takes a number as a parameter and adds it to _data. It returns this, allowing for method chaining (e.g., Calculator.add(5).add(3)).
The fetchResult function returns the current value of _data.
add and fetchResult are exposed to the external scope by being returned in an object.

Why is this Useful?

It provides a way to encapsulate private variables (_data) and methods (add), ensuring they cannot be accessed or modified externally.
The fetchResult method provides controlled access to _data.

2. The Factory Function Pattern

The Factory Function Pattern uses closures to encapsulate and return object instances with methods and properties, allowing for the creation of similar objects without explicitly class-based syntax.

Example:

function personFactory(name, age) {
  return {
    getName: function() {
      return name;
    },
    celebrateBirthday: function() {
      age += 1;
    },
    getAge: function() {
      return age;
    }
  };
}

const john = personFactory('John', 30);
john.celebrateBirthday();
console.log(john.getAge()); // Output: 31

What's Happening?

personFactory is a function that takes name and age parameters.
It returns an object with three methods (getName, celebrateBirthday, getAge) that have access to name and age.
john is an instance of a person created by calling personFactory.

Why is this Useful?

It allows for the creation of multiple objects (person) without explicitly defining classes.
Encloses name and age within each created object, ensuring they cannot be accessed or modified directly from the outside.

3. The Revealing Module Pattern

The Revealing Module Pattern is a variation of the Module Pattern where only the necessary variables and methods are exposed, maintaining the encapsulation of all other components.

Example:

const ArrayAnalyzer = (function() {
  function average(array) {
    const sum = array.reduce((acc, num) => acc + num, 0);
    return sum / array.length;
  }

  function maximum(array) {
    return Math.max(...array);
  }

  return {
    average: average,
    maximum: maximum
  };
}());

console.log(ArrayAnalyzer.average([1, 2, 3, 4])); // Output: 2.5

What's Happening?

ArrayAnalyzer is an object created using an IIFE.
It has two private functions, average and maximum, that are exposed as public methods in the returned object.

Why is this Useful?

It keeps the internal workings (calculations of average and maximum) encapsulated and exposes only the necessary interface.
Enhances code readability and maintainability.

4. Partial Application

Partial Application is a pattern where a function that takes multiple arguments is transformed into a series of functions each taking a single argument.

Example:

function multiply(a, b) {
  return a * b;
}

function partialMultiply(a) {
  return function(b) {
    return multiply(a, b);
  };
}

const triple = partialMultiply(3);
console.log(triple(5)); // Output: 15

What's Happening?

partialMultiply is a higher-order function that takes a single argument a and returns a new function.
The returned function takes another argument b and calls multiply, passing in both a and b.

Why is this Useful?

It allows for the creation of new functions with preset arguments, enhancing code reusability and readability.

Advanced closure patterns like the Module Pattern, Factory Function Pattern, Revealing Module Pattern, and Partial Application leverage the power of closures to achieve various programming goals, from encapsulation to functional transformations. Understanding and implementing these patterns allow developers to write robust, efficient, and clean JavaScript code, enhancing the structure and manageability of their applications.

Closures and Memory

Closures provide a powerful and flexible way to work with functions and variables. However, it’s important to have a deep understanding of how closures interact with memory to ensure efficient code performance. In this section, we will discuss how they can impact memory usage, and provide strategies for optimising memory management when working with closures.

Closures and Memory Consumption

Closures retain their surrounding lexical context, which can sometimes lead to increased memory consumption or memory leaks if not managed correctly. Each time a closure is created, it holds a reference to its outer scope, preserving the variables and preventing them from being garbage collected.

Example:

function closureCreator() {
  let largeArray = new Array(10000).fill({});
  return function() {
    console.log(largeArray.length);
  }
}

const myClosure = closureCreator();

In this code, largeArray is retained in memory as long as myClosure exists because it has access to the scope of closureCreator. If multiple closures like this are created, it can quickly lead to high memory usage.

Identifying and Preventing Memory Leaks

Strategies to manage memory when working with closures:

1. Avoid Unnecessary Variable Retention: Ensure that closures do not unnecessarily retain variables that are not used or needed beyond the life of the function.

2. Properly Release References: Explicitly nullify or delete references to objects or variables that are no longer needed.

function optimizedClosureCreator() {
  let largeArray = new Array(7000).fill({});
  return function() {
    console.log(largeArray.length);
    largeArray = null; // release the reference
  }
}

3. Utilise Weak References: Consider using WeakMap or WeakSet to store references to objects, as these data structures do not prevent their objects from being garbage collected.

const weakMap = new WeakMap();
function weakMapClosureCreator(obj) {
  weakMap.set(obj, { key: 'value' });
  return function() {
    console.log(weakMap.get(obj));
  }
}

4. Be Cautious With Event Listeners: Ensure to remove event listeners that use closures when they are no longer needed.

function setupButton() {
  const button = document.getElementById('myButton');
  const onClick = () => {
    // handle click
    button.removeEventListener('click', onClick);
  };
  button.addEventListener('click', onClick);
}

Closures can also impact the execution speed of the code. Accessing variables outside of the immediate function scope is generally slower than accessing variables within the same scope. We can improve execution speed by:

Minimising the depth of scope chain access, avoiding deeply nested closures where possible.
Caching frequently accessed variables outside the closure to avoid repeated scope chain traversal.

Understanding the interaction between closures and memory is essential for writing efficient JavaScript code. While closures offer many benefits, it's crucial to manage their memory usage effectively to ensure optimal application performance. Employ the strategies and tools outlined above to write clean, efficient, and memory-optimised JavaScript code involving closures.

Closures in Modern JavaScript (ES6 and Beyond)

In modern JavaScript, the concept of closures remains a fundamental aspect of the language, enabling functional programming patterns, data encapsulation, and dynamic function generation. With the introduction of ECMAScript 6 (ES6) and subsequent versions, JavaScript has become more robust, providing new features and syntax that further leverage closures. This section explores closures in the context of modern JavaScript, discussing its applications and demonstrating modern syntax and patterns.

ES6 Enhancements

With ES6, the syntax and functionality around closures have seen improvements. Some notable features include:

Introduction of `let` and `const`

The introduction of let and const in ECMAScript 2015 (ES6) has had a significant impact on the way developers work with closures in JavaScript. Prior to ES6, var was the only keyword available for variable declaration, which has function scope. This led to issues and confusion, especially inside loops and blocks, affecting closures unintentionally. The let and const keywords address these issues by providing block scope to variables.

Block Scoping and Closures

Block-scoped variables (let and const) significantly influence closures, especially within loops and block statements. Consider this example with var:

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
// Outputs: 5, 5, 5, 5, 5

In this example, the setTimeout function creates a closure that captures the i variable, which is function-scoped. By the time the setTimeout callbacks execute, the loop has already finished executing, and i is 5.

Now consider using let in the same scenario:

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
// Outputs: 0, 1, 2, 3, 4

In this example, i is block-scoped due to the let keyword, meaning each iteration of the loop has its own i variable. The setTimeout callback captures the i variable from each iteration, outputting the expected results.

`const` and Immutable Closure States

const is another block-scoped variable declaration introduced in ES6, used for declaring variables whose values should not be reassigned.

function outer() {
  const message = 'Hello, World!';
  return function inner() {
    console.log(message);
  };
}

const closure = outer();
closure(); // Outputs: 'Hello, World!'

In this example, the message variable is enclosed within the returned inner function. Because message is declared with const, it cannot be reassigned, ensuring the state captured by the closure remains immutable.

The introduction of let and const in ES6 significantly enhances working with closures in JavaScript. By providing block-scoping and ensuring immutability (const), these keywords offer more control and predictability, making it easier to create reliable and bug-free closures. Developers should prefer using let and const over var to benefit from these advantages while working with closures and other aspects of JavaScript.

Arrow Functions

Arrow functions provide a more concise syntax for function declaration, and they inherently create closures, carrying the scope of where they are defined.

const outer = () => {
  let outerVar = 'I am from outer function';
  const inner = () => console.log(outerVar);
  return inner;
};

const closureFunction = outer();
closureFunction(); // Output: 'I am from outer function'

Arrow functions do not have their own this context, so this inside an arrow function always refers to the enclosing execution context, which is often a desirable behaviour for closures.

Default Parameters

ES6 allows default parameters in function definitions, which can be used effectively with closures.

const greet = (name = 'Guest') => () => `Hello, ${name}!`;

const greetUser = greet('User');
console.log(greetUser()); // Output: 'Hello, User!'

Closures in Asynchronous Operations

Modern JavaScript, especially in Node.js and frontend frameworks, heavily employs asynchronous operations. Closures prove to be invaluable in handling asynchronous tasks, especially with callbacks and promises.

function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .then(data => () => data);
}

fetchData('https://api.example.com/data')
  .then(getData => console.log(getData()));

In the above example, fetchData fetches data from a URL and returns a closure that, when invoked, returns the fetched data.

Closures continue to be a fundamental and powerful feature in modern JavaScript, complementing the language’s asynchronous and functional nature. Understanding and efficiently using closures with modern syntax and features allows for cleaner, more efficient, and more robust JavaScript code.

Conclusion

Understanding closures is crucial for writing efficient and effective JavaScript code. This guide serves as a comprehensive overview, from the basics and practical use cases to debugging and performance considerations in using closures. Embrace closures, understand their behavior, and utilize them to write cleaner, more modular, and maintainable JavaScript code.

Cover Image by CopyrightFreePictures from Pixabay

How to handle server responses in ExpressJS - The easy way!

Imran Abdulmalik — Wed, 26 May 2021 15:45:17 +0000

Introduction

There are way too many HTTP status codes. If you're like me, you find it difficult to memorize these codes. Fortunately, we don't usually use every HTTP status code out there. There are the common ones that people use often and we can limit our knowledge to just the ones we need.

It would have been great if we had only codes to remember but these codes have meanings (as far HTTP is concerned). So remembering the code only is not enough, we also have to remember what they mean and when to use them. The meanings given to these codes are standard meanings, so if we aim to develop APIs that follows the HTTP standard, it is imperative we use these codes appropriately else we end up creating APIs that others can't understand or use.

Wouldn't it be nice if there was a way we can create API responses without having to worry about which appropriate HTTP code to use? It sure will! Fortunately, there are modules that help us decide which code to use depending on the context. They allow us to be more expressive about what type of response we want our API client to receive (without having to choose the HTTP code ourself, the module will almost always choose the right one for us!).

In this article, we're going to learn an easier way of handling server responses in ExpressJS (and NodeJS). The module we'll be using to achieve this is called express-response-helper.

At the time of writing this article, this module was a relatively new module but it's possible that by the time you read this, the module might have grown because it gets the job done and it's very easy to configure and use.

Using Express Response Helper

The documentation for express-response-helper does justice to the module. It covers every aspect of the module with examples. In this article, we'll see how to use the module in a real expressjs application. That said, this article is just to get you started, when it's time to learn more, the documentation is where to head to next.

We're going to create a very simple application to give you ideas on how to use the module on larger projects. You can check out the source codes for the application on Github.

I assume you have NodeJS and NPM installed. If you don't have those, you'll have to install them before proceeding. I used Node v12.21.0 and NPM v7.12.0 but later versions should work just fine. The editor used is Visual Studio Code but of course you can use your favorite IDE.

Creating the application

Create a new folder for the application (name it express-response-helper-demo or whatever you prefer) and open the folder with your editor.

Open a terminal and run this command:



npm init -y

This will create our package.json file for us:



{
  "name": "express-response-helper-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Create a new folder and name it src. Inside it, create a new index.js file. Leave it as it is for now:

Modify the package.json to look like this:



{
  "name": "express-response-helper-demo",
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT",
  "scripts": {
    "start": "node src/index.js"
  }
}

We updated the path to the main source file and also added a script command for starting the application.

Adding the dependencies

We need the express module and of course the express-response-helper module for this application. Let's add them.

Open a terminal and run this command:



npm install --save express express-response-helper

Once the command finish executing, the package.json file should now look like this:



{
  "name": "express-response-helper-demo",
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT",
  "scripts": {
    "start": "node src/index.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "express-response-helper": "^1.2.0"
  }
}

Note: depending on when you read this article, these versions will likely change. If some part of this tutorial doesn't work because of version differences please consult the official documentations of the module to learn what changed or you can simply set the versions to match the exact one used in this article.

For this article, the version of express-response-helper used is v1.2.0. Later versions should work too.

With that out of the way, we're all set!

Using the module

Open src/index.js and type this:



const express = require('express');
const responseHelper = require('express-response-helper');

const app = express();

// Configure the middleware
app.use(responseHelper.helper());

// Define routes
app.get('/', (req, res) => {
  res.respond({ message: 'Hello, World!' });
});

app.listen(3000, () => {
  console.log('Server running...');
});

What did we just do?

We start by requiring() express that we will use to run the API server. Then we also bring in the express-response-helper module.

require('express-response-helper'); returns an object. The object has two properties: helper() which is a function and responseCodes which is an object with predefined HTTP status codes.

We stored this object inside the responseHelper variable.

Next, we call the express() function and store it inside the app variable. We then register a middleware. Now this is where things get interesting. responseHelper.helper() returns a middleware function that we can attach to our express object. Calling app.use(responseHelper.helper()) registers the middleware for us:



const app = express();

// Configure the middleware
app.use(responseHelper.helper());

It is important we configure the middleware before defining routes. Routes that are defined before registering the middleware won't have access to the functions that the helper adds to our res variable!

Next, we define a route:



// Define routes
app.get('/', (req, res) => {
  res.respond({ message: 'Hello, World!' });
});

We define a route for '/'. Inside the route callback function, we send back a response using a respond() function that express-response-helper added for us. Notice how we didn't have to specify the status code for our response. By default, the helper middleware will send 200 which is the correct code to use in this case. The helper will also convert the response body to JSON for us automatically!

Now run the app by running this command:



npm start

This should spit out the following in your terminal:

With that, our server is up and running. Open a browser tab and enter http:localhost:3000. You should see something like this:

As you can see, the helper middleware is working as expected. We've only just scratched the surface. Let's look at a more complex example with more routes.

Extending the API

Let's build a more practical example. For simplicity, we won't be using any real database. Our aim is to see how the helper middleware works for different response types, it doesn't matter where data come from.

Open src/index.js and these helper variables and fucntions before the route definition:



// Create a database for users
const database = [
  {
    username: 'user1',
    email: 'user1@fake.com',
    password: 'test1',
  }
];

// A function for validating email addresses
const validEmail = email => {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
};

// A function to check if a username is unique
const isUsernameUnique = username => {
  let isUnique = true;

  database.forEach(user => {
    if (user.username === username)
      isUnique = false;
  });

  return isUnique;
};

// A function to check if an email is unique
const isEmailUnique = email => {
  let isUnique = true;

  database.forEach(user => {
    if (user.email === email.toLowerCase())
      isUnique = false;
  });

  return isUnique;
};

// A function that returns a the index of a user data given the username
const findUser = username => {
  return database.findIndex(user => {
    return user.username === username;
  });
};

Next, let's add a built-in express middleware that will help us parse data passed to our API. Add this just below where we configured the helper middleware:



app.use(express.json());

Finally, add these new route definitions to complete our API (remove the previous route):



// Define routes
app.get('/', (req, res) => {
  res.respondNoContent();
});

// To add a user
app.post('/user', (req, res) => {
  const body = req.body;
  if (body.username && body.email && body.password) {
    // Make sure the username and email is unique

    if (!isUsernameUnique(body.username)) {
      // Duplicate username
      res.failValidationError('username is taken.');
      return;
    }

    if (!isEmailUnique(body.email)) {
      // Duplicate email
      res.failValidationError('email is taken.');
      return;
    }

    // Insert the user
    const user = {
      username: body.username,
      email: body.email.toLowerCase(),
      password: body.password,
    };

    // Add to the database
    database.push(user);

    // Return a response confirming creation
    res.respondCreated('User Account Created!');
  }
  else {
    // If some or all the required data is not provided, return a failed response
    res.failValidationError('Please provide all required data!');
  }
});

// To update a user
app.put('/user/:username', (req, res) => {
  // Find the user
  const index = findUser(req.params.username);
  const body = req.body;

  if (index !== -1) {
    if (body.email) {
      // Get the user
      const user = database[index];

      // If the email equals the current one, do nothing
      if (body.email === user.email) {
        // Return a response confirming update
        res.respondUpdated('User account updated.');
      }
      else {
        // Make sure the email is unqiue
        if (!isEmailUnique(body.email)) {
          // Duplicate email
          res.failValidationError('email is taken.');
          return;
        }

        // Update the email
        user.email = body.email;

        // Return a response confirming update
        res.respondUpdated('User account updated.');
      }
    }
    else {
      // Return a failed response
      res.failValidationError('Please provide all required data!');
    }
  }
  else {
    // User not found.
    res.failNotFound('No user with such username exists!');
  }
});

// To remove a user
app.delete('/user/:username', (req, res) => {
  // Find the user
  const index = findUser(req.params.username);

  if (index !== -1) {
    // Remove the user
    database.splice(index);

    // Return a response confirming removal
    res.respondDeleted('User removed!');
  }
  else {
    // User not found.
    res.failNotFound('No user with such username exists!');
  }
});

// To authenticate a user
app.post('/login', (req, res) => {
  const body = req.body;
  if (body.username && body.password) {
    // Make sure the username and email is unique

    // Find the user
    const index = findUser(body.username);

    if (index !== -1) {
      // Get the user 
      const user = database[index];

      // Authenticate
      if (user.password === body.password) {
        // Authenticated, return basic user data
        res.respond({ username: user.username, email: user.email });
      }
      else {
        // return a response indicating that access is denied
        res.failUnathorized('Invalid password!');
      }
    }
    else {
      // User not found.
      res.failNotFound('No user with such username exists!');
    }
  }
  else {
    // If some or all the required data is not provided, return a failed response
    res.failValidationError('Please provide all required data!');
  }
});

We've defined routes to perform some basic CRUD operations. After those additions, your src/index.js should now look like this:



const express = require('express');
const responseHelper = require('express-response-helper');

const app = express();

// Create a database for users
const database = [
  {
    username: 'user1',
    email: 'user1@fake.com',
    password: 'test1',
  }
];

// A function for validating email addresses
const validEmail = email => {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
};

// A function to check if a username is unique
const isUsernameUnique = username => {
  let isUnique = true;

  database.forEach(user => {
    if (user.username === username)
      isUnique = false;
  });

  return isUnique;
};

// A function to check if an email is unique
const isEmailUnique = email => {
  let isUnique = true;

  database.forEach(user => {
    if (user.email === email.toLowerCase())
      isUnique = false;
  });

  return isUnique;
};

// A function that returns a the index of a user data given the username
const findUser = username => {
  return database.findIndex(user => {
    return user.username === username;
  });
};

// Configure the middlewares
app.use(responseHelper.helper());
app.use(express.json());

// Define routes
app.get('/', (req, res) => {
  res.respondNoContent();
});

// To add a user
app.post('/user', (req, res) => {
  const body = req.body;
  if (body.username && body.email && body.password) {
    // Make sure the username and email is unique

    if (!isUsernameUnique(body.username)) {
      // Duplicate username
      res.failValidationError('username is taken.');
      return;
    }

    if (!isEmailUnique(body.email)) {
      // Duplicate email
      res.failValidationError('email is taken.');
      return;
    }

    // Insert the user
    const user = {
      username: body.username,
      email: body.email.toLowerCase(),
      password: body.password,
    };

    // Add to the database
    database.push(user);

    // Return a response confirming creation
    res.respondCreated('User Account Created!');
  }
  else {
    // If some or all the required data is not provided, return a failed response
    res.failValidationError('Please provide all required data!');
  }
});

// To update a user
app.put('/user/:username', (req, res) => {
  // Find the user
  const index = findUser(req.params.username);
  const body = req.body;

  if (index !== -1) {
    if (body.email) {
      // Get the user
      const user = database[index];

      // If the email equals the current one, do nothing
      if (body.email === user.email) {
        // Return a response confirming update
        res.respondUpdated('User account updated.');
      }
      else {
        // Make sure the email is unqiue
        if (!isEmailUnique(body.email)) {
          // Duplicate email
          res.failValidationError('email is taken.');
          return;
        }

        // Update the email
        user.email = body.email;

        // Return a response confirming update
        res.respondUpdated('User account updated.');
      }
    }
    else {
      // Return a failed response
      res.failValidationError('Please provide all required data!');
    }
  }
  else {
    // User not found.
    res.failNotFound('No user with such username exists!');
  }
});

// To remove a user
app.delete('/user/:username', (req, res) => {
  // Find the user
  const index = findUser(req.params.username);

  if (index !== -1) {
    // Remove the user
    database.splice(index);

    // Return a response confirming removal
    res.respondDeleted('User removed!');
  }
  else {
    // User not found.
    res.failNotFound('No user with such username exists!');
  }
});

// To authenticate a user
app.post('/login', (req, res) => {
  const body = req.body;
  if (body.username && body.password) {
    // Make sure the username and email is unique

    // Find the user
    const index = findUser(body.username);

    if (index !== -1) {
      // Get the user 
      const user = database[index];

      // Authenticate
      if (user.password === body.password) {
        // Authenticated, return basic user data
        res.respond({ username: user.username, email: user.email });
      }
      else {
        // return a response indicating that access is denied
        res.failUnathorized('Invalid password!');
      }
    }
    else {
      // User not found.
      res.failNotFound('No user with such username exists!');
    }
  }
  else {
    // If some or all the required data is not provided, return a failed response
    res.failValidationError('Please provide all required data!');
  }
});

app.listen(3000, () => {
  console.log('Server running...');
});

Just like before, use the following command to start the server:



npm start

The server should start running. Leave it that way (do not kill the terminal), we're going to interact with it next.

The browser can only send GET requests for us, we need to be able to send other types of requests like POST, PUT, DELETE. For this, we'll create a separate client code to consume our API. We could use tools like curl but let's take the testing off the command line to see how a real client can consume our client.

First, let's add axios. We'll use it to send requests to our server. Open a new terminal and run this command:



npm install --save axios

Now create a new file client.js inside the src folder. Add this to the file:



const axiosModule = require('axios');

const base_url = 'http://localhost:3000/';

const axios = axiosModule.default.create({
  baseURL: base_url,
  validateStatus: (status) => {
    return status >= 200 && status < 500;
  },
});

This configures axios. We set base_url to the location of our API. We also tell axios to allow us handle HTTP status codes between 200 and 500 ourselves.

Finally, modify the "scripts" property in our package.json file:



"scripts": {
  "start": "node src/index.js",
  "client": "node src/client.js"
},

We added a command (client) that we can use to run the client code. Now we can start sending requests!

Open src/client.js and add this code below the current contents:



// Create a user (with valid data)
axios.post('user', {
  username: 'user2',
  email: 'user@fake.com',
  password: 'test2',
})
.then(res => {
  console.log({
    code: res.status,
    response: res.data,
  })
})
.catch((error) => console.log(error));

This will send a POST request to the /user endpoint. When we get a response, we simply log both the HTTP status code and the data that we receive.

Make sure the terminal for the express server is still running. Now open a new terminal and run this command:



npm run client

If all goes well, you should see this displayed:

Great! Our API workse fine. Now if you check back the source code for the route .post(/user) you'll see that we didn't have to know what status code to send, we just know that we want our response to confirm that a user was created. That's the power of express-response-helper!

To refresh your memory, here's the bit of code sending the response:



res.respondCreated('User Account Created!');

Because our API was programmed to prevent duplicates, it won't let us add the same user twice. Make sure the terminal for the server is still running, now run the command again: npm run client.

You should get this output:

The output is different because we attempted to add an existing username. Notice the type of response returned by express-response-helper:



{ 
  status: 400, 
  error: 400, 
  messages: 'username is taken.' 
}

This is an error object. The helper returns this for every failed requests. It clear tell us the status of the error and a description (that we provided, though the helper has sensible defaults for error description).

To refresh your memory again let's look at the bit of code producing this result:



res.failValidationError('username is taken.');

We just gave the helper a secription of the error message and it threw a detailed error object back to the client. Again, we didn't have to decide the HTTP status code!

This article is about server responses, not API consumption. So I'll stop here. As an exercise, go ahead and test the remaining endpoints. I've commented the source code to help you understand the code quicky.

As you read through the source code, notice how less often you have to worry about the HTTP status codes needed. express-response-helper allow us write expressive code for responses and this makes it easier for us (and others) to quicky understand what our code snippet is doing.

Goodbye!

We've come to the end of this article. I hope you learnt something new. This is probably a good time to head to the documentation for express-response-helper to learn more.

As a final note, I am a contributor to this module, so if you tried it and you didn't like it, send me a mail :)

DEV Community: Imran Abdulmalik

Mastering Closures in JavaScript: A Comprehensive Guide

Scoping in JavaScript

Global Scope

Local (or Function) Scope

Block Scope

What are Closures in JavaScript?

Practical Use Cases of Closures

Data Privacy/Encapsulation

Maintaining State

Factory Functions

Partial Application and Currying

Event Handling

Timeouts and Intervals

Exploring Advanced Closure Patterns

1. The Module Pattern

What's Happening?

Why is this Useful?

2. The Factory Function Pattern

What's Happening?

Why is this Useful?

3. The Revealing Module Pattern

What's Happening?

Why is this Useful?

4. Partial Application

What's Happening?

Why is this Useful?

Closures and Memory

Closures and Memory Consumption

Identifying and Preventing Memory Leaks

Closures in Modern JavaScript (ES6 and Beyond)

ES6 Enhancements

Introduction of let and const

Block Scoping and Closures

const and Immutable Closure States

Arrow Functions

Default Parameters

Closures in Asynchronous Operations

Conclusion

How to handle server responses in ExpressJS - The easy way!

Introduction

Using Express Response Helper

Creating the application

Adding the dependencies

Using the module

What did we just do?

Extending the API

Goodbye!

Introduction of `let` and `const`

`const` and Immutable Closure States