DEV Community: Md Anas Sabah

The Art of Deep Comparison in JavaScript (No Loops Required!)

Md Anas Sabah — Mon, 12 May 2025 15:17:19 +0000

✅ Understanding the Goal

You're being asked to implement a function called deepEqual(valueA, valueB) that checks if two values (which can be primitives, objects, or arrays) are deeply equal.

The keyword here is deep, this means we can’t just check equality on the surface (like ===), especially for things like objects and arrays. We need to go into nested levels and check if all elements or properties match recursively.

🧠 Think Like This, Before you jump into code, ask yourself questions like:

-> What types of values can valueA and valueB be?

-> How do I handle primitive types vs arrays vs objects?

-> What does it mean for arrays or objects to be “equal”?

-> Should I use recursion?

🤔Design Your Thinking Strategy:

Base case: If a === b, return true.
Type check:

If types differ, return false.

If both are arrays:
Check length.
Recursively compare each element.

If both are objects (but not arrays):

Compare keys.
Recursively compare each corresponding value.
Otherwise: return false.

🔁 Why Recursion? Why Loops Alone Aren’t Enough?

A simple for loop works great when you're comparing flat structures, like two arrays of numbers. But when the data can go many levels deep , arrays inside objects inside arrays, etc. you’d need:

a loop inside a loop inside a loop... 😵

or a smarter approach that can handle any depth

That’s Where Recursion Shines.

Recursion is perfect for tree-like or nested structures, because you can say:

“If the current level is an array or object, go deeper and run the same logic again.”

So your function ends up being clean and adaptable to any depth.

⚡️Implementation of the deepEqual function using recursion:

With a clear understanding of recursion and careful handling of data types, you now have a robust deepEqual function that can accurately compare even the most nested structures, a must-have tool in any JavaScript developer's toolkit.

Understanding JSON Web Tokens (JWT)

Md Anas Sabah — Sat, 30 Dec 2023 17:28:42 +0000

JSON Web Tokens (JWT) are a compact, URL-safe means of representing claims to be transferred between two parties. In web development, JWTs are commonly used for authentication and information exchange between a client and a server. This article will explore the basics of JWT, how they work, and how to implement them using React.js and Express.js.

What is JWT?

A JSON Web Token is a self-contained, compact way of representing information between two parties. It consists of three parts:

Header: Contains information about how the JWT is encoded, such as the type of token and the signing algorithm.
Payload: Contains the claims. Claims are statements about an entity (typically, the user) and additional data.
Signature: To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.

These three parts are concatenated with dots ('.') to form the JWT.

How JWT Works?

1. Authentication:

A user logs in with their credentials.
Upon successful authentication, the server generates a JWT and sends it to the client.

2. Authorization:

The client includes the JWT in the header of subsequent requests to the server.
The server validates the JWT and grants access based on the claims it contains.

Implementation with React.js

Let's create a simple React.js application that includes JWT authentication.

1. Install Dependencies:

2. Install Axios for HTTP Requests:

3. Create a Login Component:

4. Create a Protected Component:

Implementation with Express.js

Now, let's create a simple Express.js server that handles JWT authentication.

1. Install Dependencies:

2. Create an Server File(Server.js):

In conclusion, delving into the realm of JSON Web Tokens has unveiled a powerful tool for secure and efficient authentication in web development. As we deciphered the intricacies of JWT, we explored its inner workings and practical applications. Now equipped with this knowledge, you have the key to implementing robust authentication systems, ensuring data integrity, and enhancing user experiences. Remember, the journey of understanding JWT is just the beginning. As technology evolves, so does the world of web development, and JWT remains a fundamental aspect of ensuring secure and seamless user interactions. Whether you're a seasoned developer or just embarking on your coding journey, harnessing the potential of JSON Web Tokens opens doors to a safer and more connected digital landscape. Happy coding!

Callback Hell and Promises

Md Anas Sabah — Mon, 03 Apr 2023 19:02:28 +0000

For understanding the concept of Callback Hell, I think you should know about Callback.

What is Callback?
Callback is a powerful way to do asynchronous thing in JavaScript. It is a function which is to be executed after another function has finished execution.

Suppose, we have an E-commerce Application where we have createOrder and proceedToPayment function which have to execute one after another respectively.
We have dependency between those two , We can manage those dependency in our code using callback because it's an async operation.

When JavaScript Engine executes this code it will just call the createOrder api.
Now it is responsibility of createOrder function to callback proceedToPayment api

Issues with Callback

1. Inversion of Control
2. Callback Hell

Inversion of Control

Inversion of control is like you loose the control of code when you are using callback.

Callback Hell

You are seeing now a nesting of functions here and code also looks scary and this is what we called Callback Hell. For a big application it creates more nesting.

To avoid this, we will see now Promises.

Promises

To fix the issue of Inversion of Control and Callback Hell, ES6(ECMAScript 6) Promise is the easier way to work with asynchronous programming in JavaScript.
A promise acts as a container for a future value.

For Example: const promise = createOrder(cart)
Whenever JavaScript engine executes this line, this createOrder api will return us a promise.(Promise is nothing but an empty object) and program will just go on and execute.
But after fetching data from API, promise object get filled automatically.

Now how will we attach our callback to that promise?

We will use .then method.

promise.then(function(orderID){
        proceedToPayment(orderID);
});

This callback function runs automatically after fetching data from api in the promise object.

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

There are three states of promise:
1.pending
2.fulfilled
3.rejected

Promise Chaining

Taking example of callback hell we can also do promise chaining

We always return a promise from a promise, when we are chaining it

Create a Promise

Consumer Part

const cart = ["shoes", "pants","kurta"];
const promise = createOrder(cart);
promise.then(function(orderID){
        proceedToPayment(orderID);
});

Producer Part:

function createOrder(cart){
   const pr = new Promise(function(resolve,reject){
       //create order
       //validate cart
       //orderID
      if(!validateCart(cart){
            const err = new Error("cart is not valid")
            reject(err);
         }
      const orderID= "1234"
      if(orderID){
         setTimeOut(function(){
              resolve(orderID);
             },5000);
        }
   });

Thanks for reading this long post! I hope it helped you understand these topics a little better. If you liked this post, then please do give me a few ❤️ and share it if you can. You are welcome to
give any suggestions in comments and ask anything!

Next.js: Next-auth

Md Anas Sabah — Fri, 14 Oct 2022 16:07:01 +0000

In this article, you will see how to authenticate our Next application with Google

What is Next?

Next is a full stack , open source react framework for production application by the company named Vercel.

Getting Started with Next-auth.

First setup your Next application
npx create-next-app app-name

Note: npx stands for Node Package Execute and it comes with the npm to execute CLI command.

This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template.

These folders/files will be created after running CLI.

To add NextAuth.js to a project create a file called [...nextauth].js in pages/api/auth. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.

In [...nextauth].js file add the following code

Store your google api and client_secret in .env.local file

To use authentication in your application first wrap your application with Session Provider.

To be able to use useSession first you'll need to expose the session context,

<SessionProvider />

at the top level of your application

Now, to implement Sign-In and Sign-Out method, we have to import these to methods from next-auth/react and create a function on div or button where ever you want.

You can checkout the code of my new project Challan-X on Github

Thank you for reading and let's connect

Thank you for reading my blog. Feel free to connect on Twitter or Instagram

React + Redux

Md Anas Sabah — Sat, 16 Jul 2022 15:39:12 +0000

What is Redux?

"Redux is a predictable state container for JavaScript apps".
To understand what this means, lets break it down into three parts.
1.It is for JavaScript App.
2.It is a state container.
3.It is predictable.

Let's take a look at these parts individually.

Redux is for JavaScript Applications.

Redux is not tied to react. It can be used with any UI Library or Framework such as React, Angular, Vue or even Vanilla JavaScript.

So if you have this mental model where Redux and react are tightly coupled, now its a good time to get rid of it. Instead you should remember that Redux is a library for JavaScript application.

Redux is a state container

Redux stores the state of your application.

But what exactly do we mean by state of an application? Well consider a react app, we all learned about state of the component for example if we have a login form the state of the component is simply an object that holds user name password and a submitting flag to indicate the submit action happening in the background.

Or if we had a list of users to display the state of the component would be an object that contains an array of users.

Extending on this knowledge we can say that the state of an application is simply the state represented by all the individual components of that application this includes the data and the UI logic if your application is medium to large in size the state of the application could be something like his user logged in what is their username their profile pic URL a list of online users is a particular model opened is data being currently fetched and so on Redux will basically store and manage this application state. All right that clears tutoring of the definition Redux is a state container for JavaScript apps.

Redux is predictable

Predictable in what way? Redux is a state container and in any JavaScript application the state of application can change.
For example: In todo list app -- item(pending) -> item(completed)
In Redux, all state transitions are explicit and it is possible to keep track of them. In other words, the changes of your application's state become predictable.

Why React + Redux

Component in react have their own state. Why do we need another tool to help manage state?

React is generally fast, but by default any updates to a component will cause React to re-render all of the components inside that part of the component tree. This does require work, and if the data for a given component hasn't changed, then re-rendering is likely some wasted effort because the requested UI output would be the same.

If performance is a concern, the best way to improve performance is to skip unnecessary re-renders, so that components only re-render when their data has actually changed. React Redux implements many performance optimizations internally, so that your own component only re-renders when it actually needs to.

In addition, by connecting multiple components in your React component tree, you can ensure that each connected component only extracts the specific pieces of data from the store state that are needed by that component. This means that your own component will need to re-render less often, because most of the time those specific pieces of data haven't changed.

React Redux Setup

Create react application using:

npx create-react-app app-name

Next we install the two require packages i.e, redux and react-redux.

npm intsall redux react-redux

Now we will create component folder in src folder, inside component we will create CakeContainer.js file.

In App.js we include CakeContainer Component.

After including CakeContainer component in App.js, let's define Actions and Action Creators.

Here, we will create cakeAction.js file and inside this file we will create a function called buyCake that returns an Action.

Action is a object with a type property and Action creator is a function(here: buyCake) that returns a object.

Next we are going to implement Reducer.

We know that a reducer is a function that accepts state and action as parameters and returns the new state.

Create Redux Store(state) and provide it our React application.

Lets create store.js file and within this file we create our store for which we use createStore method from redux.

At last, In app.js import Provider from react-redux and wrap the div tag in the return statement with this provider component
and for provider component to know our redux store we specify it as a prop.

That's all, I hope you found this article helpful.🙂

Life Cycle of a Component

Md Anas Sabah — Fri, 08 Jul 2022 08:34:49 +0000

Life cycle of a component can be defined as the series of methods that are invoked in different stages of the component existence.
Stages are:

• Initialization
• Mounting
• Updating
• Unmounting

Function of each Phase of Cycle

1. Initialization

In this phase, we have to define the props and initial state of the component. This is done in the constructor of the component.

2. Mounting

In this phase, Initialization of the component is completed and the component is mounted on the DOM and rendered on the first time on web page.

• componentWillMount() Function
• componentDidMount() Function

3. Updating

It is the phase where the states and the props of a component are updated followed by some user events like click or press keyboard button etc.

• componentWillRecieveProps() Function
• setState() Function
• shouldComponentUpdate() Function
• componentWillUpdate() Function
• componentDidUpdate() Function

4. Unmounting

This is the final phase of the life cycle of the component that is the phase of unmounting the component from the DOM.
• componentWillUnmount() Function

Note: React follows a default procedure in the Naming Conventions of these predefined functions where the functions containing “Will” represents before some specific phase and “Did” represents after the completion of that phase.

TypeScript + React

Md Anas Sabah — Tue, 28 Jun 2022 15:18:19 +0000

Why TypeScript + React

You all think why we need TypeScript when we are just happy creating React App using JavaScript. Now, I was at that stage as well but having used TypeScript for a while I can safely say that it has improved the overall development experience for me.

• With static type checking, you get to learn potential bugs as you're typing the code, than heading to the browser and figure out at run time.

• It also provides a way to describe the shape of an object hence providing better documentation and autocomplete.

• TypeScript even make maintenance and refactoring large code bases much easier.

As you can see there are some pretty good points to help you make the decision of adopting TypeScript.

Getting Started

Install create-react-app

create-react-app provides us a TypeScript template we can use:

Note: npx stands for Node Package Execute and it comes with the npm to excecute CLI command.

Now run the command npm start on your terminal. The command will open the browser on localhost:3000 with your basic react typescript application up and running.

In src folder, we see index.tsx and an app.tsx file.

index.tsx is the entry point to our react app where we mount our app component onto the root DOM node

app.tsx contains our app component which is the root component

Function Component

To demonstrate a functional component with props we will create Greet Component. It will receive a prop "name" that will welcome the user.

While adding props in TypeScript you need to tell typescript what is the type of props you're passed in.
So, way to inform the type of props to typescript is by using "type" keyword.

Now a component props is an object so within Greetprops object the key will be name and data type is string.
To inform typescript about this, after props within parenthesis we specify colon and then type name(Greetprops).

Class Component

In class component, we will create Description component and in it we will create a counter. One of the key differences between a class and functional component is that a class component can maintain its own state.

In here, we declare a interface for both the CProps and CState. There will be an optional prop call countby which will determine the increment value.

And now Inside our App.tsx we import Description.tsx

That's all, I hope you found this article helpful.🙂