Forem: gunjangidwani

Why Javascript fundamentals are stopping you!!!

gunjangidwani — Tue, 26 Aug 2025 17:21:11 +0000

D𝗶𝘀𝗮𝗽𝗽𝗲𝗮𝗿 𝗳𝗼𝗿 𝟮 𝗺𝗼𝗻𝘁𝗵𝘀 𝗮𝗻𝗱 𝗳𝗶𝘅 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗳𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀🔥
When i started the development journey, hoping from one video to another in order to get the job, I prepared 2-3 MERN/MEAN stack projects. I got the job and after that once again when I wanted to switch and prepare for high package job I got stuck in tutorial hell for months.

React tutorials, Next.js courses, TypeScript bootcamps - nothing clicked.

𝗧𝗵𝗲𝗻 𝗜 𝗿𝗲𝗮𝗹𝗶𝘇𝗲𝗱 𝘁𝗵𝗲 𝗽𝗿𝗼𝗯𝗹𝗲𝗺: I was building a house without a foundation.

𝗦𝗼 𝗜 𝘀𝘁𝗼𝗽𝗽𝗲𝗱 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴. 𝗪𝗲𝗻𝘁 𝗯𝗮𝗰𝗸 𝘁𝗼 𝘃𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁.

2 weeks of pure fundamentals.

The result?
I haven't touched a tutorial in 2 months.
Problems I used to Google for hours?
Solved in minutes.

𝗛𝗲𝗿𝗲'𝘀 𝘄𝗵𝗮𝘁 𝗜 𝘄𝗶𝘀𝗵 𝘀𝗼𝗺𝗲𝗼𝗻𝗲 𝘁𝗼𝗹𝗱 𝗺𝗲 𝗲𝗮𝗿𝗹𝗶𝗲𝗿:

Stop chasing frameworks.
Master the language first.

Most developers learn React before understanding JavaScript. It's like learning to drive before understanding how cars work.

𝗧𝗵𝗲 𝟳 𝗳𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 𝘁𝗵𝗮𝘁 𝗰𝗵𝗮𝗻𝗴𝗲𝗱 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴:
🔹 Closures - Why your variables sometimes "disappear"
🔹 Event Loop - Why your app freezes (and how to fix it)
🔹 Prototypes - How JavaScript really works under the hood
🔹 Hoisting - Why your code breaks in production but works locally
🔹 Async/Await - Why your API calls fail silently
🔹 Scope Chain - Why your functions can't find variables
🔹 Reference vs Value - Why your state updates don't work

The uncomfortable truth:
𝟵𝟬% 𝗼𝗳 𝗥𝗲𝗮𝗰𝘁 𝗯𝘂𝗴𝘀 𝗮𝗿𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗽𝗿𝗼𝗯𝗹𝗲𝗺𝘀 𝗶𝗻 𝗱𝗶𝘀𝗴𝘂𝗶𝘀𝗲.

That infinite re-render? JavaScript closure issue.
That undefined error? JavaScript hoisting problem.
That state not updating? JavaScript reference issue.

𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱 𝘄𝗵𝘆 𝗳𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀 𝘄𝗼𝗿𝗸 𝘁𝗵𝗲 𝘄𝗮𝘆 𝘁𝗵𝗲𝘆 𝗱𝗼

The biggest mistake I made:
I thought fundamentals were boring. They're not.

They're the difference between copying code and understanding code.

Bottom line: You can't build advanced React apps on shaky JavaScript foundations.

Fix the foundation first. Everything else becomes easier.

Understanding the Call Stack in JavaScript

gunjangidwani — Thu, 03 Jul 2025 03:26:45 +0000

The Call Stack is a fundamental concept in programming that helps manage function calls in a program. Let's break it down in simple terms.

What is the Call Stack?

The Call Stack is a special type of data structure that keeps track of the functions that are currently being executed in your program. It's like a stack of plates: you can only add or remove plates from the top. In programming terms, this is called a "LIFO" (Last In, First Out) structure.

How Does the Call Stack Work?

When a function is called, it is "pushed" onto the Call Stack. When the function finishes executing, it is "popped" off the stack. This process ensures that functions are executed in the correct order and that each function has its own context (variables, parameters, etc.).
Example
Let's look at a simple example to understand how the Call Stack works:

function greet(name) {
    return `Hello, ${name}!`;
}

function sayHello() {
    const message = greet("Kimi");
    console.log(message);
}
sayHello();

Step-by-Step Execution:

Initial Call: The program starts executing sayHello().

sayHello is pushed onto the Call Stack.
Inside sayHello, greet("Kimi") is called.
greet is pushed onto the Call Stack.

Executing greet:
greet executes and returns "Hello, Kimi!".
greet is popped off the Call Stack.
Back to sayHello:

sayHello continues executing with the returned value "Hello, Kimi!".
sayHello logs the message to the console.
sayHello is popped off the Call Stack.
Program Ends: The Call Stack is now empty, and the program execution is complete.

Visual Representation

Initial Call:
Call Stack: [sayHello]

Inside sayHello, greet is called:
Call Stack: [sayHello, greet]

greet executes and returns:
Call Stack: [sayHello]

sayHello continues and completes:
Call Stack: []

Importance of the Call Stack

Function Execution Order:
The Call Stack ensures that functions are executed in the correct order.
Error Handling:
When an error occurs, the Call Stack provides a trace of where the error happened, making debugging easier.
Memory Management:
Each function call has its own context (local variables, parameters), which is stored on the stack. This helps manage memory efficiently.

Common Issues

1. Stack Overflow:
If you have too many nested function calls (like in infinite recursion), the Call Stack can overflow, causing the program to crash.

2. Debugging:
Understanding the Call Stack is crucial for debugging, as it helps you trace the flow of function calls and identify where things went wrong.

Conclusion

The Call Stack is a powerful tool that helps manage function calls in your program. It ensures that functions are executed in the correct order and provides a way to trace errors. Understanding how the Call Stack works will make you a better programmer and help you debug more effectively.

Happy coding! 🚀

Access Token v/s Refresh Token

gunjangidwani — Fri, 20 Jun 2025 15:27:17 +0000

🔐 What is an Access Token?
Purpose: It’s the short-lived credential you present to access protected APIs.

Lifespan: Typically expires in minutes or hours.

Analogy: Think of it as a temporary pass that lets you in—but once it’s expired, you’re locked out.

Why short-lived? Limits risk if stolen—once expired, it’s useless.

🕶️ What is a Refresh Token?
Purpose: This long-lived token allows you to seamlessly obtain a new access token.

Lifespan: Can last days to months.

Analogy: It's like a passport—when your pass (access token) expires, you present your passport (refresh token) to get a new pass.

Why use it? Keeps you logged in without re-entering your password and avoids constant short-lived login loops.

🔄** How They Work Together**
Initial login → Server issues both tokens.

Client uses the access token to call APIs.

Upon expiration, the client silently sends the refresh token to the Auth Server.

Auth back-end validates it, then returns a new access token—and often rotates the refresh token too.

The client stores these securely and continues operations seamlessly.

🛡️ Security Best Practices
Rotate refresh tokens: Best practice is to issue a new refresh token each time one is used, invalidating the old one—reducing the damage if stolen.

Reuse detection: If a refresh token is reused, immediately revoke that token chain to protect the user.

Secure storage:

Access tokens can live in memory or secure HTTP-only cookies (minimizes XSS).

Refresh tokens must be stored more securely—preferably server-side or in secure device keychains.

🧭 Why Not Use Just One Token?
Access tokens alone must either be long-lived (bad for security) or require constant re-login (bad for user experience).

Refresh tokens enable:

Short-lived access tokens (safer),

Seamless long sessions,

Controlled session invalidation.

This balanced flow mitigates risk while preserving usability.

🧩** In Summary**

Token Type	Lifespan	Use Case	Security Consideration
Access Token	Short-lived	Access protected resources (APIs)	Clean exposure window; vulnerable if stolen
Refresh Token	Long-lived	Renew access token without requiring login	Must be stored securely; should be rotated or revoked

Refresh tokens are the backup that keeps your session alive.

The duo work together to balance security and user experience—reducing the risk of token theft while avoiding annoying logouts.

If you're building APIs or web/mobile apps, implementing this two-token system with rotation and secure storage is considered the modern best practice.

Also if you want more info for Authorization in Node.js please watch https://www.youtube.com/watch?v=7DVpag3cO0g&t=13s
This is very helpful series on Node.js

HTTP crash course | http Methods | http headers

gunjangidwani — Thu, 19 Jun 2025 05:17:57 +0000

HTTP Basics and Client-Server Model

HTTP communication follows a client-server model, where the client (e.g., mobile app) sends requests to the server, and the server responds accordingly.
URL (Uniform Resource Locator) identifies the location of a resource; related terms include URI and URN, which are technical identifiers, but URL is commonly used for location referencing.
HTTP is one of many protocols used for communication; protocols like SRV, SRV-W exist too. HTTP mainly transfers data in clear text, while HTTPS encrypts data for security.
HTTP stands for HyperText Transfer Protocol, primarily designed to transfer text and other data efficiently across the internet, optimizing for lightweight data structures to reduce processing and network load.

HTTP Request and Response Headers

HTTP headers carry metadata about the request or response, structured as key-value pairs. They provide additional context such as file name, size, creation/modification dates, and more.
Headers are open and extensible; some are standardized while others can be custom-defined by developers.
Headers exist in both requests (from client) and responses (from server), indicating details like the source of the request (e.g., browser or Postman), response status, content type, etc.

Common uses of headers include:

Caching: To check if cached data can be reused.
Authentication: Using tokens like Bearer tokens, JWT, session cookies, refresh tokens.
State management: Tracking user status (guest or logged-in), cart contents, etc.

Older headers used an "X-" prefix (e.g., X-Name), but this convention has mostly been deprecated since around 2012-2013.

Headers can be categorized into:

Request headers: Sent by client with data or metadata.
**Response headers: **Sent by server with status and metadata.
**Representation headers: **Indicate encoding or compression of data (e.g., gzip).

Some headers enforce security and access policies (e.g., CORS), but they require explicit implementation in server code and do not act automatically.

Common HTTP Headers Examples

Header Name	Purpose
`Accept`	Specifies the media types the client can handle (e.g., `application/json`)
`User-Agent`	Identifies the client application or browser making the request
`Authorization`	Contains credentials like Bearer tokens for authentication
`Content-Type`	Indicates the media type of the request or response body (e.g., JSON, PDF)
`Cookie`	Stores key-value pairs for session management
`Cache-Control`	Controls caching policies for requests and responses

HTTP Methods Overview

HTTP methods specify the type of operation performed on a resource:
GET: Retrieve a resource or list (no message body in request).

**HEAD: **Retrieve only headers of a resource (no body), useful for metadata checks like cache status or user agent info.

**POST: **Send data to create a new resource, commonly used for adding new entries in a database.

**PUT: **Replace an entire resource with the request payload.

*PATCH: * Partially update a resource, modifying only specified fields without replacing the entire object.

*DELETE: * Remove a resource from server.

OPTIONS: Query the server for supported HTTP methods on a specific endpoint, useful for API discovery and CORS preflight requests.

*TRACE: * Used mostly for debugging; echoes back the received request to detect proxies or routing issues.

*GET, POST, PUT, DELETE, and PATCH * are the most commonly used methods; others like OPTIONS and TRACE are less frequent but important for specific use cases.

HTTP status codes are standard response codes given by web servers on the internet. They help indicate whether a request has been successfully completed or if an error occurred. Here's a quick overview of the main categories:

🔵 1xx – Informational
100 Continue – Request received, continue to send the rest.

101 Switching Protocols – Switching to a different protocol.

🟢 2xx – Success
200 OK – Request succeeded.

201 Created – Resource created.

204 No Content – Successful, but no content to return.

🟡 3xx – Redirection
301 Moved Permanently – Resource moved to a new URL permanently.

302 Found – Temporary redirect.

304 Not Modified – Resource not changed since last request.

🔴 4xx – Client Errors
400 Bad Request – Invalid request.

401 Unauthorized – Authentication required.

403 Forbidden – Access denied.

404 Not Found – Resource not found.

429 Too Many Requests – Rate limit exceeded.

🔴 5xx – Server Errors
500 Internal Server Error – Server encountered an error.

502 Bad Gateway – Invalid response from upstream server.

503 Service Unavailable – Server is down or overloaded.

504 Gateway Timeout – Upstream server didn't respond in time.

HTTP Status Codes and Their Categories

Knowing status codes is essential for backend developers to handle requests and errors properly; exact memorization is unnecessary, but understanding usage and ranges is important.

Practical Insights and Learning Approach

Understanding HTTP deeply involves knowledge of data structures, operating systems, networking, and cryptography, as these affect how data is transferred, processed, and secured.
Developers should gain a broad overview of HTTP before writing backend controllers; this foundational knowledge distinguishes good programmers from average ones s s .
Tools like Postman or Thunder Client are commonly used to test and explore HTTP methods and headers interactively s s .
The learning journey includes exploring network latency, data optimization, and efficient communication strategies ... .
💡 Key Insight: HTTP is fundamentally about transferring text and data efficiently and reliably between clients and servers using defined methods, headers, and status codes. Mastery of these basics enables building robust web applications and services.

Data modeling And Error Handling in Mongoose/Node.js

gunjangidwani — Wed, 18 Jun 2025 02:40:35 +0000

Couple of days ago I had some issue with data modelling and in researching the topic i found so many useful things from mongoose docs I have put summerized view of it. Hope you enjoy!!

Data modeling in MongoDB is a crucial aspect of designing efficient and scalable applications. MongoDB is a NoSQL database that stores data in flexible, JSON-like documents.

Key Concepts in MongoDB Data Modeling

Documents: A document in MongoDB is a basic unit of data, similar to a row in a relational database. Documents are stored in collections and can have varying structures. Example:

{
  "_id": ObjectId("507f1f77bcf86cd799439011"),
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA"
  }
}

Collections: A collection is a group of MongoDB documents. It is similar to a table in a relational database. Example:

[
  {
    "_id": ObjectId("507f1f77bcf86cd799439011"),
    "name": "John Doe",
    "age": 30
  },
  {
    "_id": ObjectId("507f1f77bcf86cd799439012"),
    "name": "Jane Smith",
    "age": 25
  }
]

Embedded Documents: MongoDB allows embedding documents within other documents, which can be useful for representing hierarchical data. Example:

{
  "_id": ObjectId("507f1f77bcf86cd799439011"),
  "name": "John Doe",
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA"
  }
}

Arrays: Arrays can be used to store multiple values within a single document field. Example:

{
  "_id": ObjectId("507f1f77bcf86cd799439011"),
  "name": "John Doe",
  "hobbies": ["reading", "hiking", "coding"]
}

Let's dive deeper into data modeling in MongoDB by some examples with schemas. MongoDB schemas are typically defined using the Mongoose library in Node.js applications, but the concepts apply to MongoDB in general.

Example 1: Blogging Platform

Collections:

Users: Stores information about users.
Posts: Stores blog posts.
Comments: Stores comments on blog posts.

User Schema:

const mongoose = require('mongoose');
const { Schema } = mongoose;

const userSchema = new Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

const User = mongoose.model('User', userSchema);

Post Schema:

const postSchema = new Schema({
  title: "{ type: String, required: true },"
  content: { type: String, required: true },
  author: { type: Schema.Types.ObjectId, ref: 'User', required: true },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now },
  comments: [
    {
      type: Schema.Types.ObjectId,
      ref: 'Comment'
    }
  ]
});

const Post = mongoose.model('Post', postSchema);

Comment Schema:

const commentSchema = new Schema({
  content: { type: String, required: true },
  author: { type: Schema.Types.ObjectId, ref: 'User', required: true },
  post: { type: Schema.Types.ObjectId, ref: 'Post', required: true },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

const Comment = mongoose.model('Comment', commentSchema);

All this is fine but How does Mongoose handle schema validation?

Answer: Mongoose provides robust schema validation capabilities that allow you to define rules and constraints for your data.

Basic Validation

const mongoose = require('mongoose');
const { Schema } = mongoose;

const userSchema = new Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true, minlength: 6 },
  age: { type: Number, min: 18, max: 99 },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

const User = mongoose.model('User', userSchema);

In this example:

username and email are required fields.
password is required and must be at least 6 characters long.
age must be between 18 and 99.

Custom Validation Functions

Mongoose also allows you to define custom validation functions. These functions can perform more complex validation logic. For example, you can validate that an email address is in a proper format:

const userSchema = new Schema({
  username: { type: String, required: true, unique: true },
  email: {
    type: String,
    required: true,
    unique: true,
    validate: {
      validator: function(v) {
        return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v);
      },
      message: props => `${props.value} is not a valid email address!`
    }
  },
  password: { type: String, required: true, minlength: 6 },
  age: { type: Number, min: 18, max: 99 },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

Async Validation

Mongoose also supports asynchronous validation, which is useful for validation logic that involves database operations. For example, you might want to check if a username already exists:

const userSchema = new Schema({
  username: {
    type: String,
    required: true,
    unique: true,
    validate: {
      isAsync: true,
      validator: function(v, cb) {
        User.findOne({ username: v }, function(err, user) {
          cb(!user);
        });
      },
      message: 'Username already exists!'
    }
  },
  email: {
    type: String,
    required: true,
    unique: true,
    validate: {
      validator: function(v) {
        return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v);
      },
      message: props => `${props.value} is not a valid email address!`
    }
  },
  password: { type: String, required: true, minlength: 6 },
  age: { type: Number, min: 18, max: 99 },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

Built-in Validators

Mongoose provides several built-in validators for common validation needs:

required: Ensures the field is not null.
min and max: Ensures the field is within a specified range.
enum: Ensures the field value is one of a specified set of values.
match: Ensures the field value matches a regular expression.
unique: Ensures the field value is unique across all documents in the collection. Example with Built-in Validators

const userSchema = new Schema({
  username: { type: String, required: true, unique: true },
  email: {
    type: String,
    required: true,
    unique: true,
    match: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
  },
  password: { type: String, required: true, minlength: 6 },
  age: { type: Number, min: 18, max: 99 },
  gender: {
    type: String,
    enum: ['male', 'female', 'other'],
    required: true
  },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

Handling Validation Errors

When a validation error occurs, Mongoose throws a ValidationError. You can handle these errors in your application logic:

const user = new User({
  username: 'john_doe',
  email: 'john.doe@example.com',
  password: 'password123',
  age: 25
});

user.save((err, user) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log('User saved:', user);
});

what about Real project - how do we handle error in real project ?

Applying validation rules in a real project using Mongoose involves several steps. You need to define your schemas with the appropriate validation rules, handle validation errors in your application logic, and ensure that your application provides meaningful feedback to the user. Below is a step-by-step guide to applying these validation rules in a real project.

Step 1: Define Your Schemas with Validation Rules

First, define your Mongoose schemas with the necessary validation rules. Here’s an example of a user schema with various validation rules:

const mongoose = require('mongoose');
const { Schema } = mongoose;

const userSchema = new Schema({
  username: {
    type: String,
    required: [true, 'Username is required'],
    unique: true,
    trim: true,
    minlength: [3, 'Username must be at least 3 characters long']
  },
  email: {
    type: String,
    required: [true, 'Email is required'],
    unique: true,
    match: [/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, 'Invalid email address']
  },
  password: {
    type: String,
    required: [true, 'Password is required'],
    minlength: [6, 'Password must be at least 6 characters long']
  },
  age: {
    type: Number,
    min: [18, 'Age must be at least 18'],
    max: [99, 'Age must be less than 100']
  },
  gender: {
    type: String,
    enum: ['male', 'female', 'other'],
    required: [true, 'Gender is required']
  },
  createdAt: { type: Date, default: Date.now },
  updatedAt: { type: Date, default: Date.now }
});

const User = mongoose.model('User', userSchema);

Step 2: Handle Validation Errors in Your Application Logic

When you attempt to save a document, Mongoose will automatically validate the data against the schema rules. If validation fails, Mongoose will throw a ValidationError. You need to handle these errors in your application logic.

Here’s an example of how to handle validation errors in an Express.js route:

const express = require('express');
const mongoose = require('mongoose');
const User = require('./models/User'); // Assume User model is defined in models/User.js

const app = express();
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

app.post('/register', async (req, res) => {
  try {
    const user = new User(req.body);
    await user.save();
    res.status(201).send(user);
  } catch (error) {
    if (error instanceof mongoose.Error.ValidationError) {
      res.status(400).json({ errors: error.errors });
    } else {
      res.status(500).send('Internal Server Error');
    }
  }
});

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

In this example:
The /register route attempts to create a new user based on the request body.
If validation fails, Mongoose throws a ValidationError, which is caught and handled.
The response sends a 400 status code with the validation errors.

Step 3: Provide Meaningful Feedback to the User

When validation fails, it’s important to provide meaningful feedback to the user. Mongoose’s ValidationError object contains detailed information about the validation errors. You can extract this information and send it back to the user.
Here’s an example of how to format the validation errors:

app.post('/register', async (req, res) => {
  try {
    const user = new User(req.body);
    await user.save();
    res.status(201).send(user);
  } catch (error) {
    if (error instanceof mongoose.Error.ValidationError) {
      const errors = Object.values(error.errors).map(err => ({
        path: err.path,
        message: err.message
      }));
      res.status(400).json({ errors });
    } else {
      res.status(500).send('Internal Server Error');
    }
  }
});

In this example:
The validation errors are extracted and formatted into an array of objects, each containing the field path and the error message.
This formatted error information is sent back to the user with a 400 status code.

Step 4: Use Middleware for Error Handling

For larger projects, it’s a good practice to use middleware for error handling. This keeps your route handlers clean and separates error handling logic.
Here’s an example of a custom error handling middleware:

const express = require('express');
const mongoose = require('mongoose');
const User = require('./models/User'); // Assume User model is defined in models/User.js

const app = express();
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// Custom error handling middleware
app.use((err, req, res, next) => {
  if (err instanceof mongoose.Error.ValidationError) {
    const errors = Object.values(err.errors).map(err => ({
      path: err.path,
      message: err.message
    }));
    res.status(400).json({ errors });
  } else {
    res.status(500).send('Internal Server Error');
  }
});

app.post('/register', async (req, res) => {
  const user = new User(req.body);
  await user.save();
  res.status(201).send(user);
});

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

In this example:
The custom error handling middleware is added to the Express app.
This middleware catches any ValidationError and formats the errors before sending them back to the user.

Conclusion:

By defining your schemas with appropriate validation rules, handling validation errors in your application logic, and providing meaningful feedback to the user, you can effectively apply validation rules in a real project using Mongoose. This ensures that your application maintains data integrity and provides a good user experience.

Event Loop & Asynchronous JS

gunjangidwani — Wed, 11 Jun 2025 00:14:13 +0000

JavaScript is single-threaded, meaning it executes code in a single sequence. But thanks to the Event Loop and asynchronous features like setTimeout, Promises, and async/await, it can handle tasks like I/O operations, timers, and HTTP requests without blocking execution.

🔁 Event Loop: The Core Concept
The event loop allows JavaScript to perform non-blocking operations by putting them in a queue and continuing to execute other code. When the call stack is clear, it checks the queue and processes the next task.

🧠 Components Involved:
Call Stack
Where JS code is executed. It's LIFO (Last In, First Out).

Web APIs (provided by browser)
Handles timers, DOM events, fetch requests, etc.
Callback Queue (Task Queue)
Stores callback functions to be executed after the stack is empty.
Microtask Queue
For promises and queueMicrotask. Has higher priority than the callback queue.

🔄 How It Works (Simplified Flow)

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Start
End
Promise
Timeout

✅ Why?
console.log("Start") → Synchronous → executed immediately.

setTimeout(...) → Sent to Web APIs → callback sent to task queue after delay.

Promise.then(...) → Microtask queue.

console.log("End") → Synchronous → executed.

Microtask queue runs: Promise.

Task queue runs: Timeout.

📘 Asynchronous JS Tools

setTimeout / setInterval – Schedule tasks.
Promises – Represent a future value.
async/await – Syntactic sugar for working with promises.

Example with async/await:

async function fetchData() {
  console.log("Fetching...");
  const response = await fetch("https://api.example.com");
  const data = await response.json();
  console.log("Done:", data);
}

fetchData();
console.log("This runs first");

📌 Summary

JavaScript is non-blocking via the event loop.
Async operations are deferred via Web APIs and queued via task and microtask queues.
Promises and async/await make async code more readable and manageable.
Microtasks (Promises) always run before tasks (setTimeout, etc.).

Currying !!Wonder of Closures in JavaScript

gunjangidwani — Wed, 11 Jun 2025 00:05:39 +0000

What is currying, and how do closures make it possible in JavaScript?

Currying is hot topic in frontend interview,it is usually the next question after closure because it is an example. Recently i got hit with the INFINITE CURRYING Question. Here is full detail

⚙️ Practical Benefit of Currying:

Delays execution until all arguments are provided
Enables function reusability (partial application)

Function currying is when functions are nested. This helps us to execute partially functions if there is a requirement of waiting. Example to add two number using curring

function add() {
  function arg1(a) {
    function arg2(b) {
      return a+b
    }
    return arg2
  }
  return arg1
}

// this returns arg1
const addnum = add()
// this takes first input and  return arg2
const firstArg = add(2);
// taken second input and returns the sum
const final = firstArg(3)

✅ Clean Curried Add Example:

function add(a) {
  return function(b) {
    return a + b;
  };
}

console.log(add(2)(3)); // Output: 5

Explanation:

add(2) returns a closure that remembers a = 2
That returned function takes b and adds it to a.

Now if we think the above examples are quite commom. but what about infinite curring? Below is the example of it-

Can we write a function like add(1)(2)(3)...(n) that returns the sum when we call .value() or even when coerced?

🧩 Infinite Currying:

You need to return a function every time, so chaining like add(1)(2)(3)... works.
To get the final result, you’ll use: .valueOf() or .toString() for coercion (console.log(add(1)(2)(3))) OR an explicit .value() method.
Use a closure to keep the running sum.

function add(a) {
  let sum = a;

  function inner(b) {
    if (b !== undefined) {
      sum += b;
      return inner; // keep returning the function for chaining
    }
    return sum; // fallback, if no argument is passed
  }

  inner.valueOf = function () {
    return sum;
  };

  inner.toString = function () {
    return sum.toString();
  };

  return inner;
}

console.log(+add(1)(2)(3));     // 6
console.log(add(5)(10)(15) + 0); // 30

inner.value = () => sum;

📜 1.Another example by arbitrary argument counts in each call? Like:
add(1, 2)(3, 4)(5)(6) // → 21

Solution-

function sum(...initialArgs) {
  let storage = [...initialArgs];

  function inner(...nextArgs) {
    storage.push(...nextArgs);
    return inner;
  }

  inner.valueOf = function () {
    return storage.reduce((a, b) => a + b, 0);
  };

  inner.toString = function () {
    return this.valueOf().toString();
  };

  inner.value = function () {
    return this.valueOf();
  };

  return inner;
}

📜 2. Add History Tracking (Bonus Closure Feature)

function sumWithHistory(...initialArgs) {
  let storage = [...initialArgs];

  function inner(...nextArgs) {
    if (nextArgs.length === 0) {
      return storage.reduce((a, b) => a + b, 0);
    }
    storage.push(...nextArgs);
    return inner;
  }

  inner.valueOf = function () {
    return storage.reduce((a, b) => a + b, 0);
  };

  inner.toString = function () {
    return this.valueOf().toString();
  };

  inner.value = function () {
    return this.valueOf();
  };

  inner.history = function () {
    return [...storage];
  };

  return inner;
}

const s = sumWithHistory(1)(2, 3)(4);
console.log(s.value());       // 10
console.log(s.history());     // [1, 2, 3, 4]

we can combine these into a reusable curry utility that can handle any reducer function (e.g., sum, product, max, etc.)!

Create a simple Virtualized List/ Sliding Window

gunjangidwani — Wed, 21 May 2025 19:46:07 +0000

Create a simple Virtualized List

While many of us have some or the other way have come across the UI performance issues in react which on digging take us to same old simplifying heavy DOM. It can be rendering large list items in list, lazy loading, image optimization, etc.

With time as the application scales up the simplifying DOM rendering becomes a complex process. Here we are looking into list rendering but in virtual manner. typically we developers use map function to render the list in rows. with this approach rendering thousands of rows browser will create same no. of DOM elements. The DOM in background is using CPU/GPU of users system. This is not it, the CPU consumption increase with user events such as scroll or performing CRUD operations which results reduced framerate, lag on UI, and screen freeze.

## What is the solution??

So how can we display thousands of rows in an efficient way?
Well there are several Libraries such as (react-virtualized) you can find but i want to explain what happens in the bacground of these libraries.

There is one rule to solve the problem i.e. Render only what is visible!!!

for example the ui can show only 20 rows at a time then we can write a logic where on user scroll event we cut those 20 rows (slice the array) and render only 20 rows. these rows change on the basis of user scroll.

we are changing the portion of "Window" or sliding it. this brings us to Sliding Window technique. Sliding Window is very important
approach that involves iterating over a collection of items with a fixed-size window, where the window slides over the collection.

What we need in Sliding Window for virtual List

starting pointer
end Pointer
length of the window

Lets start with the Example -

We have 100000 rows to display, creating an array -

const LIST = Array.from({ length: 100000 }, (_, index) => index + 1);

Create a VirtualizedList Component, which will accept the LIST, Div Height, Div Width and item Height. your app.js will look like-

import VirtualizedList from "./Components/VirtualizedList";
import "./styles.css";

const LIST = Array.from({ length: 100000 }, (_, index) => index + 1);

export default function App() {
  return (
    <div className="App">
      <VirtualizedList List={LIST} height={400} width={300} itemHeight={35} />
    </div>
  );
}

The first thing would be get start and end pointer for sliding for our window on list array. We will also calculate the window based on height and itemHeight passed props.

import React, { useState } from "react";

const VirtualizedList = ({ List, height, width, itemHeight }) => {
  const [indices, setIndices] = useState([0, Math.floor(height / itemHeight)]);
  const visibleList = List.slice(indices[0], indices[1] + 1);

  return (
    <>
      <div
        style={{ height, width, backgroundColor: "orchid", overflow: "auto" }}
      >
          {visibleList.map((item, index) => {
            return (
              <div
                key={`item is ${item}`}
                style={{
                  height: itemHeight,
                  backgroundColor: "greenyellow",
                  border: "2px solid grey"
                }}
              >
                item is {item}
              </div>
            );
          })}
      </div>
    </>
  );
};
export default VirtualizedList;

At first the
start index = 0, end index = Math.floor(height / itemHeight);
for initially the visible list is sliced on start and end index.
providing some color abd border to understand the items

const visibleList = List.slice(indices[0], indices[1] + 1);

Now we add scroll event but we need to wrap the list div as shown below and add scroll event to parent div. The need to wrap the div is because we need to provide height to scroll with.

height: List.length * itemHeight

import React, { useState } from "react";

const VirtualizedList = ({ List, height, width, itemHeight }) => {
  const [indices, setIndices] = useState([0, Math.floor(height / itemHeight)]);
  const visibleList = List.slice(indices[0], indices[1] + 1);

  const handleScroll = (e) => {
    const { scrollTop } = e.target;
    const newStartIndex = Math.floor(scrollTop / itemHeight);
    const newEndIndex = Math.floor(
      newStartIndex + Math.floor(height / itemHeight)
    );
    setIndices([newStartIndex, newEndIndex]);
  };
  return (
    <>
      <div
        onScroll={(e) => handleScroll(e)}
        style={{ height, width, backgroundColor: "orchid", overflow: "auto" }}
      >
        <div style={{ height: List.length * itemHeight }}>
          {visibleList.map((item, index) => {
            return (
              <div
                key={`item is ${item}`}
                style={{
                  height: itemHeight,
                  backgroundColor: "greenyellow",
                  border: "2px solid grey",
                }}
              >
                item is {item}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};
export default VirtualizedList;

But this won't run as expected because the list changes but the position of item is not visible on ui, to overcome that we will use absolute position with top sum of indices[0] and current index multiple by itemHeight.

the final code -

import React, { useState } from "react";

const VirtualizedList = ({ List, height, width, itemHeight }) => {
  const [indices, setIndices] = useState([0, Math.floor(height / itemHeight)]);
  const visibleList = List.slice(indices[0], indices[1] + 1);

  const handleScroll = (e) => {
    const { scrollTop } = e.target;
    console.log(scrollTop);
    const newStartIndex = Math.floor(scrollTop / itemHeight);
    const newEndIndex = Math.floor(
      newStartIndex + Math.floor(height / itemHeight)
    );
    setIndices([newStartIndex, newEndIndex]);
  };
  return (
    <>
      <div
        onScroll={(e) => handleScroll(e)}
        style={{ height, width, backgroundColor: "orchid", overflow: "auto" }}
      >
        <div style={{ height: List.length * itemHeight, position: "relative" }}>
          {visibleList.map((item, index) => {
            return (
              <div
                key={`item is ${item}`}
                style={{
                  height: itemHeight,
                  backgroundColor: "greenyellow",
                  border: "2px solid grey",
                  textAlign: "center",
                  position: "absolute",
                  width: "100%",
                  top: (indices[0] + index) * itemHeight,
                }}
              >
                item is {item}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};
export default VirtualizedList;

For Demo - https://codesandbox.io/p/github/gunjangidwani/Virtual-List/main?file=%2Fsrc%2FComponents%2FVirtualizedList.jsx%3A1%2C1-47%2C1&workspaceId=ws_DtQDPVrsyYo2ErvRfW2xrK