Forem: Shubham Dutta

Mastering JavaScript Debugging: Best Practices and Traps to Avoid

Shubham Dutta — Thu, 20 Apr 2023 05:43:25 +0000

Introduction

The process of developing software always involves debugging, and JavaScript programmers frequently devote a lot of effort to doing so. A systematic approach is necessary for good debugging, and there are a number of best practises that developers may use to streamline the procedure. The recommended practises for debugging JavaScript code and typical traps to avoid will be covered in this blog post.

General Best Practices:

Start with a plan: Before you begin debugging, make sure you have a clear plan for what you want to achieve. Identify the problem you're trying to solve, and break it down into smaller, more manageable steps.

Reproduce the bug:
- In order to debug a bug, you need to be able to reproduce it consistently.
- Try to identify the conditions that cause the bug to occur, and replicate those conditions as closely as possible.
Check for syntax errors:
- Syntax errors are one of the most common causes of bugs in JavaScript code.
- Make sure your code is free of syntax errors before you begin debugging.
Use meaningful variable names:
- Using clear and descriptive variable names can make your code easier to understand and debug.
- Avoid using generic names like "x" or "y".
Keep your code organized:
- Well-organized code is easier to read and debug.
- Use proper indentation and formatting, and break your code into logical sections.
Stay calm and focused:
- Debugging can be frustrating, but it's important to stay calm and focused.
- Take breaks when you need to, and approach the problem with a clear and open mind.

Specific Techniques for Debugging JS Code:

A. Use console.log():

Console.log() is a simple and effective way to debug JavaScript code.
By placing console.log() statements in your code, you can see the values of variables and functions at different points in the code execution.
This can help you identify bugs and understand the flow of the code.

B. Display objects as a table:

Sometimes you want to view a complicated collection of objects.
Either log them and browse the list, or use the console.table helper. It makes it simpler to understand what you're up against!

C. Using the console.time() and console.timeEnd() benchmark functions:

Knowing an item's precise execution time can be quite helpful, especially when troubleshooting slow loops. By giving the method a label, you can even create numerous timers. Let's examine its operation:

D. Get a function's stack trace.

The Web console receives a stack trace through the console.trace() method (MDN Reference).

Output:

E. Use breakpoints:

Breakpoints are a debugging tool that let you pause a piece of code from running at a particular place.
This may help in finding problems and understanding the logic of the code.
You may see the values of variables and functions at that time in the execution of the code by inserting breakpoints at strategic locations in the code.

F. Use conditional breakpoints:

Conditional breakpoints are a particular kind of breakpoint that only causes the execution of the code to pause when a specific circumstance occurs.
This can be useful in locating bugs that only appear under specific circumstances.
You can reduce the scope of the bug and find the reason more quickly by utilising conditional breakpoints.

G. Use the debugger statement:

The debugger statement is a simple way to pause the execution of code and launch the browser's developer tools.
By placing the debugger statement in your code, you can inspect the values of variables and functions at that point in the execution.

H. Use a linter:

A linter is a tool that analyzes your code and flags potential errors or issues.
By using a linter, you can catch potential bugs before they become major issues.
This can help you save time and improve the effectiveness of the debugging process.
Let's take the scenario where we want to utilise a linter to search for unused variables. We may utilise a well-liked linter called ESLint by doing the following:

Install ESLint by running the following command in your terminal:
```
npm install eslint --save-dev
```
Create a new file called .eslintrc.json in your project root directory, and add the following configuration:
Enter the following command in your terminal to launch ESLint:

npx eslint <file_name>.js

I. Avoid using global variables:

Global variables can be difficult to debug, as they can be accessed from anywhere in your code.
Global Variables can also lead to naming conflicts, code maintainability issues, and scope issues
To make your code easier to debug, try to avoid using global variables whenever possible for more modular approach.

J. Understand scoping rules:

JavaScript contains complex scoping restrictions that are occasionally challenging to figure out.
By understanding how scoping works in JavaScript, you can avoid common scoping-related bugs and make your code easier to debug.

K. Develop unit tests

Automated tests called unit tests are used to check the functionality of your code.
You can ensure that your code functions as intended and find errors before they reach the production environment by writing unit tests.
You can create and execute unit tests for your JavaScript code using testing frameworks like Jest or Mocha.
Example:
- Consider a JavaScript function that takes a number array as input and outputs the total of all the even integers in the array. The function's code is provided below:
- You might use a testing framework like Jest to create a unit test case for this function. Here is a sample test scenario:

Other Best Practices:

Use the browser's developer tools:

The majority of modern browsers have robust developer tools that let you examine a web page's HTML, CSS, and JavaScript code.
By utilising these tools, you can test your code across various devices and screen sizes and find and repair errors more quickly.

Write modular code:

Modular code is a type of code that has been divided up into smaller, easier-to-maintain chunks.
You may more easily find and repair errors as well as reuse code across many projects by segmenting your code into smaller modules.
Example:

utils.js file:

index.js file:

Document your code:

Documenting your code can assist other developers working on the same project understand and troubleshoot it more easily.
Documenting your code will help

Conclusion

In conclusion, successful debugging is a crucial step in the software development process, and you may improve the process by adhering to these recommended practises. You can find and fix bugs more quickly and effectively, producing more robust and reliable code, by using console.log() statements, understanding error messages, using breakpoints, testing your code incrementally, using a linter, avoiding global variables, using descriptive variable names, understanding scoping rules, and using a debugger.

Follow Shubham Dutta for more content like this.

Polyfills in React Application: A Complete Guide

Shubham Dutta — Mon, 17 Apr 2023 20:54:03 +0000

Overview

A well-liked JavaScript library for creating user interfaces is called React. Developers can easily and effectively manage state with React and build reusable components. But when several browsers and gadgets don't support the same functionalities, there may be compatibility problems, just as with any JavaScript programme. Polyfills are useful in this situation.

Describe Polyfills

Code fragments called polyfills offer functionality for features that might not be supported by all browsers or operating systems. They enable programmers to guarantee that their code operates as intended across all platforms, regardless of any restrictions on feature support.

If you want to know more about polyfills go to this link

Why Do React Users Use Polyfills?

Making sure a React application is compatible with as many browsers as feasible is crucial when developing one. This is crucial for developing online applications that consumers may access on a variety of platforms and devices.

Many of the contemporary JavaScript features used by React might not be supported by earlier browsers like Internet Explorer. By providing fallback code for features that aren't supported, polyfills can aid in ensuring that these features function properly across all browsers.

Examples of Polyfills in React

Here are some more examples of popular JavaScript features used in React that may require polyfills:

Promise:
- Promises are used in React for asynchronous operations. However, they are not supported in older versions of Internet Explorer.
- To use Promises in all browsers, you can add a polyfill for them, such as the es6-promise package.
- This package provides a Promise implementation that works in older browsers, allowing you to use Promises in your React application without any compatibility issues.
Object.assign():
- This method is used in React for merging objects. However, it is not supported in older versions of Internet Explorer.
- To use Object.assign() in all browsers, you can add a polyfill for it, such as the object-assign package.
- This package provides an Object.assign() implementation that works in older browsers, allowing you to use this method in your React application without any compatibility issues.
Fetch API:
- The Fetch API is used in React for making HTTP requests. However, it is not supported in older versions of Internet Explorer.
- To use the Fetch API in all browsers, you can add a polyfill for it, such as the whatwg-fetch package.
- This package provides a Fetch API implementation that works in older browsers, allowing you to use this feature in your React application without any compatibility issues.
Symbol:
- Symbols are used in React for creating unique identifiers. However, they are not supported in some older browsers.
- To use Symbols in your React application, you can add a polyfill for them, such as the core-jspackage.
- This package provides a Symbol implementation that works in older browsers, allowing you to use this feature in your React application without any compatibility issues.
String.startsWith():
- startsWith method determines whether a string begins with the characters of a specified string, returning true or false as appropriate. However, it is not supported in older versions of Internet Explorer.
- To use startsWith in your React application, you can add a polyfill for them, such as the core-js package.
- This package provides a String.prototype.startsWith() implementation that works in older browsers, allowing you to use this method in your React application without any compatibility issues.
Array.includes():
- The Array.includes() method in React is used to determine whether an array contains a specific value. Older versions of Internet Explorer do not, however, support it.
- You can include a polyfill for Array.includes(), such as the array-includes package, to make it work in all browsers.
- You can use the Array.includes() method in your React application without encountering any compatibility problems thanks to this package's implementation, which supports older browsers.
Object.entries():
- This method is used in React for getting an object's key-value pairs as an array. However, it is not supported in older versions of Internet Explorer.
- To use Object.entries() in all browsers, you can add a polyfill for it, such as the object.entries package.
- This package provides an Object.entries() implementation that works in older browsers, allowing you to use this method in your React application without any compatibility issues.

Writing polyfills from scratch

Here is an example of how to write a polyfill from scratch for the startsWith method in React:

In this example, we first determine whether the String prototype's startsWith method already exists. If it doesn't already exist, we define it as a function that accepts search and pos as parameters.

The substr method is then used by the function to extract a section of the string beginning with the pos argument, or 0 in the absence of pos or if pos is less than 0. The search parameter is then compared to this substring using rigorous equality (===), and a boolean result is returned.

The startsWith method may be made to function as intended in all browsers, even those that don't support it natively, by specifying this polyfill.

Here's another example of how to create a polyfill for the array includes method:

This polyfill verifies whether the Array.prototype object already defines the includes method. It generates a new function that accepts an elementToBeSearched parameter if it is not defined.

The function then used a for loop to iterate through the array, inspecting each element to see if it matches the elementToBeSearched parameter. It returns true if it discovers a match. The function returns false if it cannot locate a match.

If you want to write more polyfill from scratch go to this link

NOTE:

It's important to note that writing a polyfill from scratch can be challenging, especially for complex features. In addition, it's important to thoroughly test the polyfill in various browsers and environments to ensure it behaves correctly and doesn't cause any unexpected issues.

How to Add Polyfills in React

You can use a library containing a collection of polyfills that will perform the same function for you instead of manually checking for the existence of a feature and adding a polyfill.

Use pre-existing polyfills or packages whenever possible; only create your own if absolutely essential and if you have the necessary knowledge and experience.

Example 1:

Adding polyfills in React is a simple process. Here's how you can add a polyfill for startsWith:

Install the core-js package as a dependency in your project:



  npm install core-js

Import the startsWith polyfill at the top of your JavaScript file:



  import 'core-js/actual/string/starts-with';

Now you can use the startsWith method in your React components, like this:



  const testString = 'Hi all JavaScript Developer out there!';
  const startsWithHi = testString.startsWith('Hi');

  console.log(startsWithHi); // true

We can make sure that the startsWith method functions as intended in all browsers, even those that don't support it natively, by importing the startsWith polyfill from core-js.

Example 2:

Let's take another example of how to add a polyfill for Array.includes():

Install the array-includes package using npm:



  npm install array-includes

Import the package in your JavaScript code:



  import 'array-includes/auto';

This will automatically add the polyfill for Array.includes() to your React application.

Example 3:

Here is another example of how to use a polyfill for Promise in a React project:

Install the es6-promise package using npm:



  npm install es6-promise

Import the package in your JavaScript code:



  import 'es6-promise/auto';

This will automatically add the polyfill for Promise to your React application.

Conclusion

Polyfills are an essential tool for ensuring browser compatibility in React applications. By providing fallback code for unsupported features, polyfills help developers create web applications that work seamlessly across all browsers and platforms.

If you're developing a React application, it's important to consider the use of polyfills to ensure maximum compatibility. With the right polyfills in place, you can be confident that your application will work as intended, regardless of any feature support limitations in the browser or environment.

Follow Shubham Dutta for more content like this.

Polyfills for JavaScript: A Full Overview

Shubham Dutta — Sun, 16 Apr 2023 21:31:57 +0000

Overview:

You may be familiar with the phrase "polyfill" as a developer. In a continuously changing technological landscape where new capabilities are frequently added to programming languages and online platforms, polyfills are an essential component of web development. Since not all browsers and environments immediately support the newest features, it can be difficult for developers to stay up to date with these changes.

A polyfill is a piece of code that enables the usage of new programming language or web platform features in outdated browsers or environments that do not support them. We will look deeply into JavaScript polyfills in this blog article, discussing their advantages and how to use them in your code.

The Need for Polyfills

New features: Polyfills enable programmers to use cutting-edge functions of a web platform or programming language in older browsers or environments that don't support them.
Browser Compatibility: The latest features of a programming language or web platform may not be supported by all browsers and environments, which can cause compatibility problems for developers. Polyfills aid in ensuring that the code functions consistently on various browsers and gadgets.

Benefits of Using Polyfills

Better User Experience: Polyfills allow developers to improve user experience by adding features and capabilities, even in older browsers.
Reduced development time: By enabling developers to use new capabilities without having to write specific code for older browsers, polyfills can save developers a significant amount of effort.
Cost-effective: Using polyfills saves money by preventing the need to design specialised solutions for every browser or device by ensuring that your code works on a variety of browsers and mobile devices.
Enhanced security: Using polyfills can also increase security by offering a different implementation of a feature that might have security flaws in earlier browser versions.
Better cross-browser compatibility: Polyfills enable programmers to use new capabilities of a programming language or web platform in situations or environments that don't support them, ensuring that their code functions reliably across various browsers and devices.
Future-proofing: By incorporating new capabilities that might become standards in upcoming iterations of the programming language or web platform, developers can future-proof their code by utilising polyfills.
Open-source community: Developers can use a variety of open-source polyfill libraries to take use of the skills and knowledge of other developers.
Better accessibility: By offering fallbacks for features that may not be supported by assistive technologies, polyfills can help make web applications more accessible to users with impairments.

Implementing Polyfills in JavaScript

The method of implementing polyfills in JavaScript is simple. In this part, we'll examine a couple of code examples that demonstrate how to use polyfills. We will go over the steps for putting polyfills into JavaScript in this section:

Step 1: Identify the missing feature

Finding the feature that is absent from the browser or environment is the first step in constructing a polyfill.
This can be accomplished by determining whether the feature is compatible with the browser or by determining whether it is present using feature detection methods like typeof, in, or window.

Step 2: Write the fallback implementation

The next step is to develop the fallback implementation that offers a similar functionality once the missing feature has been located.
A pre-existing polyfill library or pure JavaScript code can both be used to do this.

Step 3: Examine the polyfill

It is crucial to properly test the polyfill after implementation to make sure it functions as intended.
To check that the code provides the same functionality across various contexts and browsers, you can test it.

Step 4: Implement the polyfill in your code

Implementing the polyfill in your code comes after testing it.
To achieve this, enclose the code that makes use of the lacking feature in an if statement that verifies the feature's support.
The polyfill code is run in its place if the feature is not supported.

Example 1:

Let's imagine we wish to use the Array.includes() method. This method was added in ECMAScript 2016, but earlier browsers like Internet Explorer 11 do not support it. We may build a polyfill in the manner described below to use this approach on earlier browsers:

In this example, we use the! operator to see if Array.prototype.includes() is available. We implement the polyfill that offers a similar capability if it is not supported.

Example 2:

Here's an example of implementing a polyfill for the Object.assign() method:

In this example, we first check whether Object.assign() is supported using the typeof operator. If it is not supported, we implement the polyfill that provides a similar functionality.

Example 3:

Let's take an example of polyfill implementation for the Math.trunc() method. The function Math.trunc(n) "cuts off" the decimal portion of an integer. For example, Math.trunc(1.23) returns 1.

Example 4:

Here's another example of a polyfill for the Array.from() method:

In this example, we use the ! operator to first determine whether Array.from() is supported. We implement the polyfill that offers a similar capability if it is not supported.

Example 5:

Here's another example of a polyfill for the Promise object:



// Check if Promise is supported
if (!window.Promise) {
    // Implement the polyfill
    window.Promise = function (executor) {
      if (typeof executor !== 'function') {
        throw new TypeError('Promise resolver ' + executor + ' is not a function');
      }

      var self = this;
      self.status = 'pending';
      self.value = undefined;
      self.reason = undefined;
      self.onFulfilledCallbacks = [];
      self.onRejectedCallbacks = [];

      function resolve(value) {
        if (self.status === 'pending') {
          self.status = 'fulfilled';
          self.value = value;
          self.onFulfilledCallbacks.forEach(function (callback) {
            callback(value);
          });
        }
      }

      function reject(reason) {
        if (self.status === 'pending') {
          self.status = 'rejected';
          self.reason = reason;
          self.onRejectedCallbacks.forEach(function (callback) {
            callback(reason);
          });
        }
      }

      try {
        executor(resolve, reject);
      } catch (e) {
        reject(e);
      }
    };

    window.Promise.prototype.then = function (onFulfilled, onRejected) {
      var self = this;
      var newPromise;

      if (self.status === 'fulfilled') {
        return newPromise = new Promise(function (resolve, reject) {
          try {
            var x = onFulfilled(self.value);
            resolve(x);
          } catch (e) {
            reject(e);
          }
        });
      } else if (self.status === 'rejected') {
        return newPromise = new Promise(function (resolve, reject) {
          try {
            var x = onRejected(self.reason);
            resolve(x);
          } catch (e) {
            reject(e);
          }
        });
      } else if (self.status === 'pending') {
        return newPromise = new Promise(function (resolve, reject) {
          self.onFulfilledCallbacks.push(function (value) {
            try {
              var x = onFulfilled(value);
              resolve(x);
            } catch (e) {
              reject(e);
            }
          });

          self.onRejectedCallbacks.push(function (reason) {
            try {
              var x = onRejected(reason);
              resolve(x);
            } catch (e) {
              reject(e);
            }
          });
        });
      }
    };

    window.Promise.prototype.catch = function (onRejected) {
      return this.then(null, onRejected);
    };
  }

In this example, we use the! operator to first determine whether the Promise object is supported. We implement the polyfill that offers a similar capability if it is not supported.

Conclusion

Developers need polyfills because they enable them to use new capabilities in less modern browsers and contexts that don't support them. By utilising polyfills instead of writing special code for outdated browsers, developers can increase browser compatibility, improve user experience, increase security and save time. Using polyfills in your JavaScript code is a simple and straightforward process if you have the correct information and resources. Follow Shubham Dutta for more content like this.

MongoDB Aggregation Pipeline - $lookup

Shubham Dutta — Sun, 12 Feb 2023 20:35:00 +0000

Introduction:

The Aggregation Pipeline in MongoDB is a strong tool that lets you handle and examine data kept in a MongoDB collection. The $lookup step, which enables you to carry out a left outer join between two collections, is one of the crucial stages in the Aggregation Pipeline. When you need to compile data from various collections into a single document, this stage is quite helpful.

A versatile and effective tool that can handle a variety of usage situations is the $lookup stage. For instance, you could use it to unite a collection with a reference data collection to add more information to your papers or to integrate data from two collections to create a customer order report.

To use the $lookup stage, you need to specify the following parameters:

from: the collection's name that will be merged with the existing one
localField: the current collection's field that serves as the join key
foreignField: the from collection field that serves as the join key
as: The new array field's name in the result document, which will include the join's outcomes

Syntax

{
   $lookup:
     {
       from: <collection to join>,
       localField: <field from the input documents>,
       foreignField: <field from the documents of the "from" collection>,
       as: <output array field>
     }
}

Pseudo SQL Statement

SELECT *, <output array field>
FROM collection
WHERE <output array field> IN (
   SELECT *
   FROM <collection to join>
   WHERE <foreignField> = <collection.localField>
);

Example:

Orders Collection:

{
  "_id": 1,
  "user_id": 1,
  "total": 100
}

{
  "_id": 2,
  "user_id": 2,
  "total": 200
}

User Collection:

{
  "_id": 1,
  "name": "John"
}

{
  "_id": 2,
  "name": "Jane"
}

You can use the following aggregation pipeline to combine user and order data:

db.orders.aggregate([
  {
    $lookup: {
      from: "users",
      localField: "user_id",
      foreignField: "_id",
      as: "user_info"
    }
  }
])

Output:

{
  "_id": 1,
  "user_id": 1,
  "total": 100,
  "user_info": [
    {
      "_id": 1,
      "name": "John"
    }
  ]
}

{
  "_id": 2,
  "user_id": 2,
  "total": 200,
  "user_info": [
    {
      "_id": 2,
      "name": "Jane"
    }
  ]
}

Join Conditions and Subqueries on a Joined Collection

A powerful tool for combining data from two or more collections is the MongoDB $lookup stage.
To further improve the results, you might need to specify conditions or run subqueries on the joined collection in some circumstances. This is where the let and pipeline options come in.
You can specify expressions that can be used in the pipeline option by using the let option. Variables that can be referred to in the pipeline stages can be defined using these expressions.

Syntax:

{
   $lookup:
      {
         from: <combined collection>,
         let: { <variable-1>: <expr>, …, <variable-N>: <expr> },
         pipeline: [ <pipeline to run on combined collection> ],
         as: <resultant array field>
      }
}

Example:

Orders Collection:

{
  "_id": 1,
  "user_id": 1,
  "amount": 300
}

{
  "_id": 2,
  "user_id": 2,
  "amount": 400
}

User Collection:

{
  "_id": 1,
  "name": "Shubham",
  "created_at": ISODate("2021-02-11")
}

{
  "_id": 2,
  "name": "Random",
  "created_at": ISODate("2022-02-12")
}

To join the Orders and Users collections and return only customers who joined in the last year, you can use the following aggregation pipeline:

db.orders.aggregate([
  {
    $lookup: {
      from: "users",
      let: { created_at: "$created_at" },
      pipeline: [
        {
          $match: {
            $expr: {
              $gt: [ "$$created_at", new Date(ISODate().getTime() - 365 * 24 * 60 * 60 * 1000) ]
            }
          }
        }
      ],
      as: "user_info"
    }
  }
])

SQL Statement for the above query:

SELECT *
FROM Orders
JOIN Users
ON Orders.customer_id = Users._id
WHERE Users.created_at > DATEADD(year, -1, GETDATE());

Output:

{
  "_id": 2,
  "user_id": 2,
  "amount": 400,
  "user_info": {
    "_id": 2,
    "name": "Random",
    "created_at": ISODate("2022-02-12")
  }
}

Correlated Subqueries

Correlated subqueries are an effective tool for running complex queries. They enable you to improve the results of a different query by applying the findings from the first.
A correlated subquery is a subquery that references a column from the outer query.
To perform a correlated subquery in MongoDB's aggregation pipeline, you can use the $lookup stage to join a collection to itself. For example, consider the following aggregation pipeline:

db.Orders.aggregate([
  {
    $lookup: {
      from: "Orders",
      let: { user_id: "$user_id" },
      pipeline: [
        {
          $match: {
            $expr: {
              $eq: [
                "$user_id",
                "$$user_id"
              ]
            }
          }
        },
        {
          $group: {
            _id: "$user_id",
            avg_order_amount: { $avg: "$amount" }
          }
        }
      ],
      as: "user_orders"
    }
  },
  {
    $match: {
      "users.created_at": {
        $gt: ISODate("2022-02-05T00:00:00.000Z")
      }
    }
  }
]);

The $lookup stage in this pipeline performs a left outer join with the Orders collection and with itself.
The value of the user id field to be used in the subquery is specified by the let expression. The subquery to be executed on the joined collection is specified by the pipeline expression.
The $match stage of this subquery specifies the requirement that only orders placed by the relevant user should be taken into account, and the $group stage determines the average order value for each user.
The as expression specifies the name of the new array field in the result document that will contain the results of the subquery.
Only users who joined within the past year are included in the result set after being filtered by the pipeline's final $match stage.
A document containing the user ID, order date, and average order amount for each new customer added in the previous year is the output of this pipeline.

SQL Statement for the above query:

SELECT customer_id, order_date,
(SELECT AVG(total_amount)
FROM Orders
WHERE Orders.customer_id = Customers._id) AS avg_order_amount
FROM Customers
WHERE joined_date > DATEADD(year, -1, GETDATE());

Conclusion:

An effective feature that enables users to carry out complicated data analysis and manipulation is the MongoDB aggregation pipeline. You can make the most of this feature and maximise the potential of your MongoDB data by comprehending the architecture and pipeline stages as well as the usage scenarios for which they are best suited. Follow Shubham Dutta for more content like this.

MongoDB Aggregation Pipeline - $function Stage

Shubham Dutta — Sun, 05 Feb 2023 18:45:48 +0000

An Overview

A popular NoSQL database called MongoDB offers a scalable and adaptable option for storing and handling enormous amounts of data. The aggregation pipeline, which enables users to carry out complex data analysis and manipulation, is one of MongoDB's core features. The $function stage of the MongoDB aggregation pipeline and its use cases will be the main topic of this blog.

What is the $function Stage in MongoDB Aggregation Pipeline?

The MongoDB aggregation pipeline has an additional stage called $function that enables users to write their own unique JavaScript functions for data processing. When there is no built-in stage that can carry out the needed operation, this stage is especially helpful. Users have access to the complete JavaScript runtime and the MongoDB aggregation framework because the $function stage is executed within the context of the MongoDB server.

Syntax:

The following syntax is used to define the $function stage:

{
  $function: {
    body: <code>,
    args: <array expression>,
    lang: "js"
  }
}

The args field specifies an optional initial value that will be provided to the function, and the body field specifies the JavaScript function definition that will be performed. You can specify an empty array []. If the body function does not accept an argument. lang is The language used in the body need to specify lang: "js".

Use Cases for the `$function` Stage in MongoDB Aggregation Pipeline

Running totals computation: The $function stage can compute running totals by storing the cumulative sum in the state object.
Implement custom algorithms: Custom algorithms that cannot be implemented with the built-in stages can be implemented using the $function stage.
Transforming Array: Arrays can be transformed by mapping, filtering, or reducing the items of the array using the $function stage.

Example:

Consider the following input document in the "customer" collection:

{
  "_id": 1,
  "name": "Shubham Dutta",
  "email": "shubham_dutta@gmail.com",
  "position": "Developer"
},

{
  "_id": 2,
  "name": "Arjun Dutta",
  "email": "arjun.dutta@gmail.com",
  "position": "Designer"
}

Now, we need to separate out each customer's first name from their entire name and lowercase the position. The aggregate process listed below can be used to do this:

db.customers.aggregate([
  {
    $project: {
      'name': {
        $function: {
          body: function (name) {
            let firstName = name.split(" ")[0];
            return firstName;
          },
          args: {"$name"},
          lang: "js",
        },
      },
      'position': {
        $function: {
          body: function (position) {
            let position = position.toLowerCase();
            return position;
          },
          args: {"$position"},
          lang: "js",
        },
      },
    },
    '_id': 0,
    'email': 1
  },
]);

The following is the result of the above pipeline:

[
  {
    "name": "Shubham",
    "email": "shubham_dutta@gmail.com",
    "position": "Developer"
  },
  {
    "name": "Arjun",
    "email": "arjun.dutta@gmail.com",
    "position": "designer"
  }
]

By splitting the name field on the space character and returning the first element of the resulting array, the first name of each customer is extracted from their entire name using the $function stage in this example. The toLowerCase() method is used to change the position field's case to lowercase. Each customer's name, email address, and position are included in a new object that is returned by the function argument using $project.

Conclusion

The MongoDB aggregation pipeline has a significant feature called the $function stage that enables users to write unique JavaScript functions for data processing.

The $function stage gives you the freedom and power you need to design custom algorithms, manipulate arrays, or compute running totals.

You can fully utilize this feature and unleash the complete power of your MongoDB data by understanding the syntax and application of the $function stage.

Prototype Design Pattern in JavaScript

Shubham Dutta — Sun, 25 Sep 2022 08:00:26 +0000

Introduction

Objects can contain both methods and properties. Methods are functions called when we interact with an object, and properties are data associated with an object.

The Prototype Pattern is a technique for extending objects by giving the current objects new properties and methods. Although it has been a design pattern for many years, it has only recently become popular.

By using the prototype chain, we can avoid duplicating methods and properties, which saves memory by allowing us to access properties that aren't directly defined on the object itself.

The prototype chain is very useful because it allows you to create an object which inherits from another object, without having to copy all its properties and methods into your own object.

The primary goal of this pattern is to facilitate the creation of objects that can serve as blueprints for all constructor-created objects. It accomplishes this through a process known as prototypal inheritance.

Implementation

To better understand, let's use the example of a car and begin implementing Factory Pattern and Prototype Pattern and difference between them.

With Factory Pattern

Imagine using a Car factory function to produce numerous cars.
This way, we can easily create many car objects with the same properties.

To each car object, we are unnecessarily adding new drive and accelerate methods. We're using memory to create two new functions for each car object internally. JavaScript has duplicated the same method for every instance:

If you want to know more about factory pattern read out this blog.

With Prototype pattern

To distribute these methods among numerous car objects, we can use the prototype pattern.

Method 1

By using Car.prototype<method> = function()..., we define a car's methods in our example code. Now that the new keyword has been instantiated on some cars, we are looking at all the instances. According to the arguments that the caller passed in, we set their name, passengers, speed, and color properties.

The instances we're looking at are actually making reference to the same drive and accelerate methods that we defined in the prototype, as shown!

Method 2

We can easily share properties, like drive and acceleration in this case, among the numerous instances, thanks to ES6 classes.

Conclusion

The performance increase over object-oriented classes is the main advantage of using the pattern in JavaScript. This indicates that the functions defined inside of an object will be created by reference. In simple words, rather than making separate copies of themselves, all child objects will all point to the same method!

We can avoid duplicating methods and properties by using the prototype chain, which also enables us to access properties that aren't directly defined on the object itself. This helps conserve memory.

I hope you found this useful. Please keep an eye out for more in the future.

If you have any queries, then feel free to connect with me on my LinkedIn profile - Shubham Dutta. Please get in touch with me if you have any inquiries.

Factory Design Pattern in JavaScript

Shubham Dutta — Sat, 17 Sep 2022 18:56:35 +0000

Design Pattern

Design patterns are models or plans for resolving typical issues in software development. They are the best practises that programmers can adhere to when creating software applications.

There are numerous varieties of design patterns. 3 main categories of design patterns are:

Structural patterns
Behavioral patterns
Creational patterns (Factory Pattern falls under this category)

Introduction on Factory Pattern

We can generate multiple of the same objects using the Factory Pattern by using a unique function called the factory function.
A general interface for creating objects is offered by the factory design pattern, which is a creational design pattern.

We do not have to explicitly require a constructor function when using the factory pattern as we can indicate the type of object that is being constructed.

In the functional programming paradigm, a factory is an entity that produces objects, such as a class or function.

In-depth explanation

Factory Pattern is not indeed a pattern. The factory pattern in JavaScript essentially consists of a function that returns an object without utilizing the new keyword.

We can build quick factory functions that always return an object thanks to ES6's arrow functions.

In many cases, to create new instances, it may often be more memory-efficient instead of creating new objects every time.

Let's take the example of creating Product and implement it by creating new instances.

Factory Pattern follows Object Oriented Programming, Design Pattern which involves creating objects.

A constructor function for various object types is wrapped by the factory pattern, which then returns instances of the objects via a simple API. It facilitates the creation of various objects that returns the desired object type.

Despite the fact that JavaScript offers a variety of object generation techniques, the factory pattern helps us to keep our object creation code streamlined and reusable.

Implementation

Let’s start by building our own function which will be responsible for returning new objects of a specific type whenever called.

In the factory folder, let’s create a file named product.js.

In this file, we build a createProduct constructor function. It accepts an object as a parameter attributes for initializing the object with various info i.e name, description, brand, size, color, createdAt timestamp.
Then we can create multiple objects with the same properties and different values of those.

When to use a factory pattern

If a class is unable to identify the subclass, it must construct one.
When we need to generate several objects with the same properties without having to duplicate the same code.
Whenever the process of creating an object is particularly complex
When we need to return a custom object based on the existing environment, or when a user-specific configuration is required.
When you don't know in advance the precise types and dependencies of the objects your code needs to work with, use the factory method.

Advantage of using factory pattern

Encourage code reusability and maintainability
Allowing you more freedom to develop different types of objects that use the same API.
Helps to promote loose decoupling by isolating the construction of the object from its implementation.
Helps in memory conservation.

Disadvantage of using factory pattern

In some circumstances, implementation can be challenging.
Due to the level of abstraction it introduces, testing might be challenging depending on complexity.

Conclusion

Use the factory method when you are unsure of the exact types and dependencies of the objects your code will be working with in advance.

When you want to conserve system resources by reusing existing objects rather than rebuilding them each time, use the factory method. When working with large, resource-intensive objects like database connections, file systems, and network resources, you frequently run into this requirement.

This pattern not only helps in code reusability and maintainability but also preserve memory and you have more control over objects.

If you have any queries, then feel free to connect with me on my LinkedIn profile - Shubham Dutta. Please get in touch with me if you have any inquiries.

Forem: Shubham Dutta

Mastering JavaScript Debugging: Best Practices and Traps to Avoid

Introduction

General Best Practices:

Specific Techniques for Debugging JS Code:

A. Use console.log():

B. Display objects as a table:

C. Using the console.time() and console.timeEnd() benchmark functions:

D. Get a function's stack trace.

E. Use breakpoints:

F. Use conditional breakpoints:

G. Use the debugger statement:

H. Use a linter:

I. Avoid using global variables:

J. Understand scoping rules:

K. Develop unit tests

Other Best Practices:

Use the browser's developer tools:

Write modular code:

Document your code:

Conclusion

Polyfills in React Application: A Complete Guide

Overview

Describe Polyfills

Why Do React Users Use Polyfills?

Examples of Polyfills in React

Writing polyfills from scratch

NOTE:

How to Add Polyfills in React

Example 1:

Example 2:

Example 3:

Conclusion

Polyfills for JavaScript: A Full Overview

Overview:

The Need for Polyfills

Benefits of Using Polyfills

Implementing Polyfills in JavaScript

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Conclusion

MongoDB Aggregation Pipeline - $lookup

Introduction:

Syntax

Pseudo SQL Statement

Orders Collection:

User Collection:

Join Conditions and Subqueries on a Joined Collection

Orders Collection:

User Collection:

Correlated Subqueries

Conclusion:

MongoDB Aggregation Pipeline - $function Stage

An Overview

What is the $function Stage in MongoDB Aggregation Pipeline?

Syntax:

Use Cases for the $function Stage in MongoDB Aggregation Pipeline

Example:

Conclusion

Prototype Design Pattern in JavaScript

Introduction

Implementation

Conclusion

Factory Design Pattern in JavaScript

Design Pattern

Introduction on Factory Pattern

In-depth explanation

Implementation

When to use a factory pattern

Advantage of using factory pattern

Disadvantage of using factory pattern

Conclusion

Use Cases for the `$function` Stage in MongoDB Aggregation Pipeline