DEV Community: Kunal

Async Code in Node.js: Callbacks and Promises

Kunal — Thu, 09 Jul 2026 18:17:13 +0000

As we already know, JavaScript has two ways to run code: Synchronous and Asynchronous. We use both depending on what we're building.

If you don't know what they are or why we need them, I recommend reading this blog first.

Kunal

Apr 18

You dont know about javascript : Synchronous vs Asynchronous

#ai #programming #javascript #beginners

2 min read

In this blog, we'll learn why Node.js uses async code, what callbacks are, why nested callbacks become a problem, and how promises make async code much easier to write and understand.

Topics Covered

Why async code exists in Node.js
Callback-based async execution
Problems with nested callbacks
Promise-based async handling
Benefits of promises

Why Async Code Exists in Node.js

Before we start, let's quickly understand Node.js.

Node.js is a JavaScript runtime that lets us run JavaScript outside the browser. It's mainly used for backend applications where thousands of requests can come at the same time.

So why do we need async code?

Because it doesn't block the main thread. While one task is taking time, Node.js can keep handling other requests.

Think about a banking app. A function is fetching all users and their bank details from the database.

const users = getAllUsers(); // Takes 10 seconds

console.log("Checking account balance...");

If this is synchronous, "Checking account balance..." has to wait until getAllUsers() finishes.

With async code, Node.js doesn't wait. It keeps handling other requests while the database does its work.

That's why async programming is such a big deal in Node.js.

Callback-based async execution

Before we start this topic let's quickly understand what a callback is.

A callback is just a function that you pass to another function. That function can call it immediately or later. It depends on the use case.

//      ↓                  ↓
setTimeout(() => {console.log("hello")}, 2000);

This is a simple example of a callback. Here setTimeout is calling the arrow function after 2 seconds.

If you want to understand callbacks in detail I already wrote a blog on it.

Kunal

Apr 15

Callbacks in JavaScript

#javascript #tutorial #beginners #programming

3 min read

Now we know what async code is and what a callback is. If we combine these two ideas we get callback based async execution.

It basically means:

Start an async task and keep the program running. Once the async task is complete execute the callback function.

Let's understand it with an example.

console.log("Start");

setTimeout(() => {
  console.log("Task completed");
}, 2000);

console.log("End");

Output

Start
End
Task completed

Why is the output like this?

Because JavaScript keeps running the synchronous code(eg :- console.logs ) while the timer is running and executes the callback only after the timer is finished.

Problems with nested callbacks

Do you ever heard of the term "Callback Hell" it is a phenomenon where multiple callbacks are nested after each other
It happen when you do an asynchronous activity that's dependent on previous asynchronous activity

This make the code harder to read

Let look into the example :


loginUser("kunal", (user) => {
  getProfile(user.id, (profile) => {
    getPosts(profile.id, (posts) => {
      getComments(posts[0].id, (comments) => {
        console.log("Final Data:", comments);
      });
    });
  });
});

pretty hard right ??

One solution to overcome callback hell is to break the callback function into smaller code or You can use promises and async / await

If you want to know i have a blog on it , read 👇

Kunal

Mar 1

JavaScript Promises Explained: A Startup Analogy for Beginners

#discuss #javascript #webdev #node

4 min read

Promise-based async handling

As our code gets bigger, using callbacks everywhere becomes hard to manage. Sometimes it leads to callback hell, where callbacks keep getting nested inside each other.

To solve this problem, JavaScript introduced Promises.

A Promise represents a value that will be available now, later, or might fail.

Instead of nesting callbacks, we can chain async operations together, which makes the code much easier to read.

For example, instead of this:

loginUser("kunal", (user) => {
  getProfile(user.id, (profile) => {
    getPosts(profile.id, (posts) => {
      console.log(posts);
    });
  });
});

We can write:

loginUser("kunal")
  .then((user) => getProfile(user.id))
  .then((profile) => getPosts(profile.id))
  .then((posts) => {
    console.log(posts);
  })
  .catch((err) => {
    console.log(err);
  });

Notice how the code is flat instead of deeply nested. That's one of the biggest reasons developers prefer Promises.

Benefits of Promises

Better error handling

Instead of handling errors in every callback, we can handle them in one place using .catch() or try...catch with async/await.

fetchData()
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

Chaining

We can connect multiple async operations using .then() without creating nested callbacks.

loginUser()
  .then(getProfile)
  .then(getPosts)
  .then(console.log);

Cleaner syntax with async/await

async/await is built on top of Promises. It lets us write async code that looks almost like normal synchronous code.

async function getData() {
  try {
    const user = await loginUser();
    const profile = await getProfile(user.id);

    console.log(profile);
  } catch (err) {
    console.log(err);
  }
}

Run multiple tasks together

If two async tasks don't depend on each other, we can run them at the same time using Promise.all().

const [users, posts] = await Promise.all([
  getUsers(),
  getPosts(),
]);

console.log(users, posts);

This is faster because both requests start together instead of waiting for one to finish first.

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

How ChatGPT Understands Your Questions?

Kunal — Wed, 01 Jul 2026 11:07:38 +0000

While working and integrating AI into my projects for the past 2 years i never really thought about how much happens under the hood in LLMs and GPTs.

When I finally started to research about it... it was honestly overwhelming.

So let me share it in a very easy and analogy-based way. Hopefully it will help you understand how LLMs actually work under the hood and make working with AI a little easier.

Topics to Cover

What is an LLM?
What Happens When You Send a Message to ChatGPT?
Why Computers Don't Understand Human Language
Tokenization
Transformers

What is an LLM

Ohh... I've used LLMs a couple of times but forgot to mention what they actually are and what they stand for.

LLM stands for Large Language Model. Let's decode each word.

Large :- Because it's trained on billions of pieces of existing data.

Language :- Because it works with human language.

Model :- A mathematical model that predicts the next output or the next piece of text.

So, an LLM is a Large Language Model that takes tokens (text) as input, processes them, and predicts the next tokens as output.

Some popular examples of LLMs

GPT-5 and GPT-4 by OpenAI, 
Gemini by Google,
Claude by Anthropic, 
Llama by Meta AI.

Some common daily-life applications of LLMs are:

Chatbots like ChatGPT for answering questions
Writing emails, messages, and documents
Translating between languages
Summarizing long articles or PDFs
Coding assistants like GitHub Copilot
Customer support bots

This is the big overview how a LLMs work lets go a little deep what happens when you send a prompt to these llms

What Happens When You Send a Message to ChatGPT?

When you type a prompt like:

Forget memory, past context and everything else for now.

The first question is...

How did the LLM guess it right?

The answer is actually very simple.

It just keeps guessing the most possible next output.

Every LLM has something called a Transformer. You can think of it as the main engine that keeps predicting the next token based on your input and the tokens it has already generated and the patterns it learned from its training data.

It keeps doing this again and again until the complete response is generated.

The whole flow should look like

Typing a prompt:- You type a prompt/message
Processing your message:- The Transformer converts your text into tokens and understands the context.
Generating a response:- It predicts one token at a time until the response is complete.

But have you ever noticed that Why responses are not copied from the internet ?

Instead of finding an answer from internet the model keeps predicting the next token from their trained data and patterns until it finishes the response.

But when you say hey there to Computers they are not able to perfectly understands it as they are effecient with numeric values.

Why Computers Don't Understand Human Language

So far we know that LLMs take text as input and generate text as output.

But here's the catch...

Computers don't actually understand words like "hello", "chatgpt", or "how are you?"

They only understand numbers.

So before an LLM can process your message, every word has to be converted into numbers first.

This is where tokens come in.

But how our human language converted into tokens 🤔

Tokenization

Before we start learning about Tokenization, let's first understand what tokens actually are.

Tokens are simply words (or parts of words) that are mapped to numeric values so a computer can understand and process them.

It looks something like this:

For example:

hey  -> 48467
how  -> 1495
are  -> 553
you  -> 481
?    -> 1423

So instead of reading "hey how are you?", the computer actually sees those numbers.

So, Tokenization is the process of converting human language into tokens (numeric values) so that computers can understand and process it.

But there is a misconception about token that they represent a whole word that actually not true.
A token can be anything a whole word, part of a word, a punctuation mark, or even a space.

Now we know a lot about tokens LLMs and how they gives us the response but how are they doing it what's the main engine behind it 🤔 ??

Transformers

Now we know how text becomes tokens and how computers understand those tokens.

But one big question is still left...

What is actually doing all this work?

The answer is Transformers.

A Transformer is the main engine behind almost every modern LLM. It's the architecture that helps the model understand your input, find relationships between words, and predict the next token.

Why did Transformers change AI?

Before Transformers, AI models struggled to understand long sentences and contexts like River Banks , Money Bank

Transformers changed that by looking at the entire sentence together. This helps them understand context much better and generate more accurate responses.

How do Transformers understand language?

Transformers pay attention to every token in your sentence and figure out how they're connected. This helps them understand the meaning of your prompt instead of just reading words one by one.

Why do almost all modern LLMs use Transformers?

Because they're fast, scalable, and much better at understanding context.

That's why models like GPT, Claude, Gemini, Llama, and almost every modern LLM today are built on the Transformer architecture.

Thanks for reading! If you enjoyed this blog, you can read more here 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

Sessions vs JWT vs Cookies: Understanding Authentication Approaches

Kunal — Fri, 26 Jun 2026 12:29:33 +0000

Whether you are building a small application or a production SaaS, the bare minimum thing you need is authentication.

Over the years, developers have used many technologies to successfully authenticate and authorize users, but the technologies behind it have remained the same: Sessions, JWT, and Cookies.

So in this blog we will study:

What sessions are
What cookies are
What JWT tokens are
Stateful vs stateless authentication
Differences between session-based auth and JWT
When to use each method

Sessions

A session is a temporary memory on the server that remembers who you are.

Since HTTP is stateless, it forgets everything after every request. It doesn't remember if you're logged in or not.

A session fixes this by storing your information on the server. Your browser only sends a Session ID, and the server uses it to recognize you on every request.

How Sessions Work (Step-by-Step)

The user logs in with their email and password.
The server creates a session with a unique Session ID and stores user information (like userId, role, etc.) on the server.
The server sends the Session ID back to the browser as a cookie.
On every new request, the browser automatically sends the Session ID cookie to the server.
The server checks the Session ID, finds the matching session, and retrieves the user's information.

Sessions are stored on the server, usually in memory, a database, Redis, or files.

Note: The browser only stores the Session ID, not the actual user data.

Cookies

Cookies are small text files, not a storage mechanism. (Yes, I learned that while writing this blog.) They are stored by the browser and can hold up to 4 KB of data.

Cookies are generally used to carry access tokens or session IDs with every HTTP request. This helps the server identify the user and keeps the user logged in so they do not have to sign in again whenever they visit a new page.

They are widely used for authentication, tracking, and personalization.

Credits: https://newsletter.systemdesigncodex.com/p/cookies-vs-sessions-vs-jwt

There are mainly 4 types of cookies:

1. Session Cookies

They exist only during the current browser session until the browser is closed.

Example: Online banking sessions.

const express = require('express');
const session = require('express-session');

const app = express();

app.use(session({
  secret: 'yoursecretkey',
  resave: false,
  saveUninitialized: true,
  cookie: {
    secure: true,
    httpOnly: true,
    maxAge: 60000
  }
}));

app.get('/', (req, res) => {
  req.session.views = (req.session.views || 0) + 1;
  res.send(`Views: ${req.session.views}`);
});

app.listen(3000);

2. Persistent Cookies

They remain on the user's device until they expire based on the expiration date set by the server.

Example: A "Remember Me" option on a social media login keeps you signed in by storing a persistent cookie until it expires or you log out.

const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(cookieParser());

app.get('/set-cookie', (req, res) => {
  res.cookie('username', 'John Doe', {
    maxAge: 3600000,
    httpOnly: true,
    secure: true,
    sameSite: 'lax'
  });
  res.send('Persistent cookie set!');
});

app.get('/get-cookie', (req, res) => {
  const username = req.cookies.username;
  res.send(`Username: ${username}`);
});

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

3. Secure Cookies

They are transmitted only over HTTPS to prevent interception.

Example: An online shopping site uses a Secure cookie so your login session is sent only over an encrypted HTTPS connection.

res.cookie('sessionId', 'abc123', {
  secure: true,
  httpOnly: true,
  sameSite: 'Strict',
  maxAge: 3600000
});

4. HttpOnly Cookies

They prevent cookies from being accessed via JavaScript, reducing the risk of XSS attacks.

Example: A banking website stores your login token in an HttpOnly cookie, so JavaScript cannot read or steal it.

const express = require('express');
const cookieParser = require('cookie-parser');
const cors = require('cors');

const app = express();

app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

app.use(cookieParser());

app.post('/login', (req, res) => {
  const token = 'your-jwt-token';

  res.cookie('token', token, {
    httpOnly: true,
    secure: false,
    sameSite: 'strict',
    maxAge: 24 * 60 * 60 * 1000
  });

  res.send({ success: true });
});

JWT Tokens

JWT, also known as JSON Web Token, does not rely on server-side storage like sessions.

Instead, the user information is stored inside the token itself.

Structure of JWT

A JWT consists of three parts separated by dots (.).

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.
KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30

Header.Payload.Signature

Header: Contains metadata about the token, such as the signing algorithm (HS256, RS256) and token type.
Payload: Contains the actual data (claims), such as userId, role, and email. It is encoded, not encrypted, so anyone can read it.
Signature: Verifies that the token was created by the server and has not been modified. If someone changes the payload, the signature becomes invalid and the token is rejected.

How JWT Works (Step-by-Step)

The user logs in with their email and password.
The server verifies the credentials.
If they're correct, the server creates a JWT containing the user's ID and role.
The JWT is sent back to the client and is usually stored in a cookie.
For every protected request, the client sends the JWT in the Authorization header (or the cookie).
The server verifies the JWT. If it's valid, the request is allowed; otherwise, it's rejected.

Stateful vs Stateless Authentication

Stateful	Stateless
Server remembers who you are.	Server forgets who you are after every request.
Uses Sessions.	Uses JWT.
User data stays on the server.	User data stays inside the JWT token.
Browser sends a Session ID.	Browser sends the JWT token.
Server looks up the session every time.	Server just verifies the token.
Easy to log out (delete the session).	Harder to log out (wait for the token to expire or blacklist it).
Good for traditional websites.	Good for APIs, mobile apps, and microservices.
Example: Login with Sessions.	Example: Login with JWT.

Differences Between Session-Based Authentication and JWT

Session-Based Authentication	JWT Authentication
User data is stored on the server.	User data is stored inside the JWT token.
Browser stores only the Session ID.	Browser stores the entire JWT token.
Server checks the session on every request.	Server only verifies the token signature.
Easy to log out by deleting the session.	Logout is harder unless the token expires or is blacklisted.
Better for traditional web apps.	Better for APIs, mobile apps, and microservices.
More server memory is needed.	Less server memory is needed.
Easy to revoke sessions anytime.	Tokens remain valid until they expire.
Example: Banking websites.	Example: REST APIs and mobile apps.

When to Use Sessions

Use Sessions when you want the server to have full control over user authentication. They're a great choice when security is more important than scalability.

Examples:

Online banking
E-commerce admin panels
Internal company portals

When to Use JWTs

Use JWTs when you need a stateless and scalable authentication system. They're ideal for modern apps and APIs.

Examples:

Mobile apps
REST APIs
Single Page Applications (React, Angular, Vue)
Microservices

Thanks for reading! If you enjoyed this blog, you can read more here 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

URL Parameters vs Query Strings in Express.js

Kunal — Mon, 11 May 2026 11:39:51 +0000

Have you notice something like this in your url. It sometimes look like this 👇

https://x.com/Kunalmadoliya

and sometimes like this 👇

https://www.x.com/in/kunal-madoliya-0378133b4/?skipRedirect=true

Technically there are no difference in both. What is the advantage of one is disadvantage for the other

In this blog topic to cover :

What URL parameters are
What query parameters are
Differences between them
When to use params vs query

URL / Path parameters

We use URL parameter to access a specific resource on the server. For example if you want to find a user by ID.

We can simply implement this simple code with a URL parameter

app.get("/:username", (req, res) => {
  res.send(req.params.username)
})

Everything we enter after the slash will be handle by Express.js for example you want to do a database query based on the username or id depends on the usecase

Twitter uses URL parameter.

https://x.com/Kunalmadoliya

Query parameters

We use query parameters when the data is dynamic. For example if you want to filter, search , sort a mobile from a bunch of different mobile brands we use Query parameters.

for example :


// localhost/product?brand=iphone&price=23000

app.get("/product", (req, res) => {
  res.send(req.query.brand + " " + req.query.price)
})

Query parameters works also the same way. All parameters that have been received are available in the req.query object

A new parameter is always marked by the question mark ?

We can pass multiple parameters in the URL but we do not need another question mark for it.

Differences between URL and Query parameters

Point	URL Parameter	Query Parameter
What is it?	Value written inside the URL path	Value written after ? in the URL
Example	/users/101	/users?id=101
Used for	Access a specific resource	Send extra data like search or filter
URL Look	Clean and readable	Can become long and messy
Mostly used in	Dynamic routes	Search, filter, pagination

When to use URL and Query parameters

URL parameter :- For clean , small , search engine friendly URLs that lead to a static resource

Query parameters :- For longer , more readable URLs , These are not relevant to search engines

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

JavaScript Operators: The Basics You Need to Know

Kunal — Fri, 24 Apr 2026 18:51:23 +0000

This is the one of the very first step in programming every beginner start from this topic either perform calculations , some compression or something logical you need these

In this blog we will cover :

What operators are
Arithmetic operators (+, -, *, /, %)
Comparison operators (==, ===, !=, >, <)
Logical operators (&&, ||, !)
Assignment operators (=, +=, -=)

Operators

In JavaScript , operators is a special symbol that is used to do some operations on value , These value are also known as operand

Lets understand this with some example :


const a = 10
const b = 20

const result = a + b 
console.log(result) // 30

Here above + symbol is the operator and the values a and b are the operand.
The operator tell the computer to add the values together.

There are several type of operators let look at each of them one by one

Arithmetic operators (+, -, *, /, %)

These are the operators which are used to do some arithmetic operations.
Which you have learned in school for the basic math.


| Operator | Name            | Description                              | Example  | Result |
|----------|-----------------|------------------------------------------|----------|--------|
| +        | Addition        | Adds two numbers                         | a + b    | 14     |
| -        | Subtraction     | Subtracts one number from another        | a - b    | 6      |
| *        | Multiplication  | Multiplies two numbers                   | a * b    | 40     |
| /        | Division        | Divides one number by another            | a / b    | 2.5    |
| %        | Modulo          | Gives the remainder of a division        | a % b    | 2      |
| **       | Exponentiation  | Raises the first number to power second  | a ** b   | 10000  |

Lets understand this with some example


const chocolates = 23
const kids = 5

let leftover = chocolates % kids
console.log(leftover) // 3

Comparison operators (==, ===, !=, >, <)

Comparison operators are used to compare two value.


| Operator | Name                 | Description                          | Example      | Result |
|----------|----------------------|--------------------------------------|--------------|--------|
| ==       | Equal to             | Compares values only                 | 10 == "10"   | true   |
| ===      | Strict equal to      | Compares value and type              | 10 === "10"  | false  |
| !=       | Not equal to         | Checks if values are not equal       | 10 != "10"   | false  |
| >        | Greater than         | Checks if left is greater than right | 10 > 5       | true   |
| <        | Less than            | Checks if left is less than right    | 10 < 5       | false  |

Lets understand this with some example


// Strict equality (recommended)
console.log(50 === 50);     // true  (same value, same type)
console.log(50 === "50");   // false (number vs string)

// Loose equality (confusing)
console.log(50 == "50");    // true (type coercion happens)

Logical operators (&&, ||, !)

Logical operators are used to combine two or more true/false conditions.

| Operator | Name         | Description                                              |
|----------|--------------|----------------------------------------------------------|
| &&       | Logical AND  | Returns true only if both conditions are true            |
| ||       | Logical OR   | Returns true if at least one condition is true           |
| !        | Logical NOT  | Reverses the boolean value (true ↔ false)                |

Lets understand this with some example :


// Logical Operators Example

let isLoggedIn = true;
let isPremiumUser = false;

// Access premium content → need both
let canAccessPremium = isLoggedIn && isPremiumUser;
console.log(canAccessPremium); // false

// Show basic content → need at least one
let canAccessBasic = isLoggedIn || isPremiumUser;
console.log(canAccessBasic); // true

// Reverse a condition
let isGuest = !isLoggedIn;
console.log(isGuest); // false

Assignment operators (=, +=, -=)

These operators are used to assign values to variables. The most common one is the equals sign (=).


| Operator | Example   | Same As     |
|----------|-----------|-------------|
| +=       | x += y    | x = x + y   |
| -=       | x -= y    | x = x - y   |
| *=       | x *= y    | x = x * y   |
| /=       | x /= y    | x = x / y   |

Lets take some example


// Assignment Operator Example

let balance = 500; // initial balance

// Spend 150
balance -= 150; // same as: balance = balance - 150

console.log(balance); // 350

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

Error Handling in JavaScript: Try, Catch, Finally

Kunal — Fri, 24 Apr 2026 09:59:39 +0000

No matter how great we are at programming sometimes our code has errors.
Errors are a natural part of programming , what matters is how effectively we handle and fix them.

In this blog we will look into these methods that gracefully handles errors.

Topics to Cover

What errors are in JavaScript
Using try and catch blocks
The finally block
Throwing custom errors
Why error handling matters

Errors

Errors are the problems or mistakes in a programming that cause it to behave incorrectly and stop running.

There are types of error which which make your code to behave incorrectly

Common types

Syntax error :- Wrong syntax
example :- Missing brackets , typo
Reference error :- Using a variable that is not defined
example :- console.log(x) when x doesn't exist
Type error :- using a value in wrong way
example :- calling something that is not a function

Above are some types of errors I commonly encounter in my daily coding.

There are ways that i handle these are gracefully lets see one by one.

Using try and catch blocks

This is primary mechanism for error handling in javascript

Here is the basic syntax for try..catch


try {
  // some code 
} catch (err) {
  // this will run only if the code in the try block errors-out
}

It works like :

First the code in try{} block is executed.
If there is no error the catch(err){} block is ignored.
If an error occurs, Then the try{} execution is stopped and the catch(err){} block will start executing.

The err variable will contain an error object with details about what happened.

Lets take some examples

Here is the example we will misspell a variable name


let hello = 2;
try {
  console.log(hilleo + 4);
} catch (e) {
  console.log('Error -', e);
}

Output of the above code :


Error - ReferenceError: hilleo is not defined

The finally block

You can also use a finally{} block to ensure that some code runs no matter if the try block executes or not.


let hello = 2;
try {
  console.log(hilleo + 4);
} catch (e) {
  console.log('Error -', e);
}finally{
  console.log("Like this blog")
}

Output of the above code :


Error - ReferenceError: hilleo is not defined
Like this blog

Throwing Custom Errors

There are some problem oftentimes that we cant able to detect where the error is coming from or its hard to understand to catch pure JavaScript errors.

For this we can make use of throw statement to throw our own errors in a try block so that can can be caught and we can deal with it gracefully.


try{
   const {email , password} = req.body 
   if(!email || !password){
     throw new Error("Fields are missing")
   } 

   console.log("Email fetch")
  }catch(err){
    console.log("error" , err)
  }

Output of the above code :

Mising feilds:


 Fields are missing

Valid data:


Email fetch

Why error handling matters

Following are the reason why error handling matters the most :

Prevents crashes – avoids breaking the app when something goes wrong
Better user experience – shows meaningful messages instead of blank screens
Easier debugging – helps identify and fix issues faster
Improves reliability – app continues to work even with unexpected inputs
Security – prevents leaking sensitive information through raw errors
Maintainability – cleaner code with predictable behavior

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

Master Destructuring in One Go

Kunal — Tue, 21 Apr 2026 17:32:22 +0000

This is very surprising to me that i am using this feature of JavaScript but don't know the name of it.
It is so powerful that it makes easier to extract values from array or properties from objects and assign them to a variable.

Topics to Cover

What destructuring means
Destructuring arrays
Destructuring objects
Default values
Benefits of destructuring

What destructuring means

It is a JavaScript expression that helps us to extract data from array , objects map and sets.

lets take a look :


const person = { 

name = "kunal"
bio = "like this blog"
twitter = "@kunalmadoliya"
}

const name = person.name 
const twitter = person.twitter 

console.log(name , twitter)

If you can closely observe the code you find it pretty much repetitive. This type of code we write before ES6. Javascript makes it easier to extract the value from array or object.

we destruct them in a single line like :


const {name , twitter} = person 

console.log(name , twitter) //kunal @kunalmadoliya

The above code tells that give me a single variable called name and also a variable name twitter from person object.

Lets take a look how we can destruct the values from array

Destructuring arrays

Without destructing extracting values from an array can be a very verbose and difficult :


const arr = ["kunal" , "@kunalmadoliya" , "like this blog"]

const first = arr[0]
const second = arr[1]
const third = arr[2]


console.log(arr[0] , arr[1] , arr[2])

Here we can access each element using index and assign it to a variable.

We have a better alternate for it we can use a single code of line like this :


const arr = ["kunal" , "@kunalmadoliya" , "like this blog"]

const [first , second , third] = arr 

console.log(first , second , third)

See how much easier it makes to understand and improve the readability of code
We can also use this for nested values lets take a look

Destructuring objects

Now you have undestand the concept of destructing objects above we have already took the example of it lets take a real world example where we use this .

First i want to give you a look what we use before ES6 to get value:


const user = {
  id: 1,
  name: "Kunal",
  contact: {
    email: "kunal@example.com",
    phone: {
      countryCode: "+91",
      number: "9876543210"
    }
  },

  skills: ["JavaScript", "React", "Node.js"]
};

const countryCode = user.contact.phone.countryCode
const phoneNumber = user.contact.phone.number

console.log(countryCode , phoneNumber)

We can use destructuring to do it one better!


const user = {
  id: 1,
  name: "Kunal",
  contact: {
    email: "kunal@example.com",
    phone: {
      countryCode: "+91",
      number: "9876543210"
    }
  },

  skills: ["JavaScript", "React", "Node.js"]
};

const [countryCode , phoneNumber] = user.contact.phone

console.log(countryCode , phoneNumber) // 91 987654321

This is one of the real use in which we extract data from nested object also known as JSON.

Using object destructuring, we can extract values from deeply nested JSON in a single line of code. This approach is cleaner, more readable, and more efficient compared to the older method of accessing each property step by step.

Default values

You can also provide default values for object properties


const { name, age, bio = "Unknown" } = person;
console.log(bio); // Output: Unknown

Here above we providing a default value "Unknown"for the bio property in case its not present in user object

Benefits of destructuring

Cleaner syntax – avoids long object paths
Better readability – code is easier to understand
Less repetition – no need to repeat object names
Extract multiple values in one line
Supports nested data – directly access deep properties

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

You dont know about javascript : Synchronous vs Asynchronous

Kunal — Sat, 18 Apr 2026 11:48:28 +0000

First i strongly recommend you to read my following blog 👇

Kunal

Mar 15

Node.js Internals: Read This Before Your Next Backend Interview

#node #javascript #interview #backend

7 min read

It covers all the basic terminologies with beautiful explanation which i am using in this blog.

Lately when i studied about the architecture of Node.js and how beautifully it handles JavaScript internally i got amazed.

And there i got to know about the behavior of Synchronous & Asynchronous JavaScript

In this blog we will cover :-

What synchronous code means
What asynchronous code means
Why JavaScript needs asynchronous behavior

JavaScript is Synchronous

By default JavaScript is synchronous single threaded language.

Means code executes from top to bottom , left to right sequentially and wait until one code gets finished.


function f1() {
  // Some code
}
function f2() {
  f1();
}
function f3() {
  f2();
}
f3();

Underthehood it will create a stack (Data-Structure in JavaScript) also known as call Stack which keeps the record of function.

If the function call another function then engine adds the second function to the stack and start executing it until it finishes and then takes it out from the stack.

credits :- https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/

Hope you understand it now how JavaScript handles synchronous code

Asynchronous JavaScript

An Asynchronous code runs in background without stopping your main code.

Unlike synchronous code it doesn't block your main thread So your code can execute without waiting another code to finish



setTimeout(() => console.log("Like and share") , 1000)
console.log("Already liked this blog !!!")

In the above example what we do is simply make a Asynchronous function that will execute after 1sec it will not block the block main thread to execute my another console log

But why do we need asynchronous behavior lets see

Why JavaScript needs asynchronous behavior

JavaScript needs asynchronous behavior as it is single threaded it can do only one thing at a time

If everything were synchronous:

Handling database took soo much time that you can't imagine
Also API calls , file read , timers would block the main thread

If you want to know more about asynchronous behavior check this blog 👇

Kunal

Apr 15

Callbacks in JavaScript

#javascript #tutorial #beginners #programming

3 min read

I have covered all the examples there using asynchronous callbacks

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

Polyfills 101: Impress your interviewer

Kunal — Sat, 18 Apr 2026 08:52:21 +0000

Sometimes I wonder if I were still my old 2010 Windows 7 PC with UC Browser in big 2026 would modern websites even work on it?

Some visitors are still using Internet Explorer or Safari till date and we cant write modern code and expect it to work for them.

So in this blog we will cover :-

What string methods are
Why developers write polyfills
Common interview string problems
Importance of understanding built-in behavior

String methods

Before hopping into the Polyfills we have to know what and where we use this modern javascript by lookin into some string methods and making our own string methods by using polyfills.

In JavaScript strings are the sequence of character and JavaScript provides a set of methods to manipulate and work with string.

I will **introduce only 2 main string method **here and rest you can do with your own

toUpperCase()

If you want to convert a string to uppercase, Then you can use toUpperCase() method.


const str = "like this blog"

console.log("Uppercase :-" , str.toUpperCase())

Using polyfills


String.prototype.toOwnUpperCase = function () {
  let result = "";

  for (let i = 0; i < this.length; i++) {
    let code = this.charCodeAt(i);

    // a-z → A-Z
    if (code >= 97 && code <= 122) {
      code = code - 32;
    }

    result += String.fromCharCode(code); // number to char 
  }

  return result;
};

console.log("hello".toOwnUpperCase()) // HELLO

trim()

If you want to trim the starting and ending empty space from the string , then you can use time()


const str = "    Like this blog.    ";
const trimmedStr = str.trim();
console.log(trimmedStr); // Output: This is a string.

Using polyfills


String.prototype.myOwnTrim = function () {
  let start = 0;
  let end = this.length - 1;

  while (start <= end && this[start] === " ") start++;
  while (end >= start && this[end] === " ") end--;

  let result = "";
  for (let i = start; i <= end; i++) {
    result += this[i];
  }

  return result;
};

console.log("    Like this blog.    ".myOwnTrim()) //Like this blog.

Hope you have a rough idea what are polyfills and how we can write our own
but why does developer use polyfills let see.

Why developers write polyfills

Developer write polyfills as some of your website visitors use old internet explorer or UC browser and we don't use modern JavaScript for them because old browser doesn't understand modern JavaScript

Faced with the reality that you cant write modern code and expect it to work for all users, You have exactly two choice

Only use language features available in all the browser you support
Write modern code and do something to make it work in older browser

Yes obvious you choose option 2 if you choose option 1 i am sorry you need to take some rest.

I hope you have now understand what are polyfills and why developers use
polyfills. Now you are interview ready lets see some common question asked in interview

Common interview string problems

I have covered 2 most important example before and covering 2 more now that actually asked by the interviewer.

.includes()

The .includes() method return true if a string contain a specific string.

let see first how we write this in modern javascript and then we make our own


let text = "Like this blog";
let result = text.includes("blog");

console.log(result) // true

Using polyfills


String.prototype.myIncludes = function (word, search = 0) {
    if (search === "") return true;
  for (let i = 0; i < this.length - word.length; i++) {
    let match = true;

    for (let j = 0; j < word.length; j++) {
      if (this[i + j] !== word[j]) {
        match = false;
        break;
      }
    }

    if (match) return true;
  }
  return false
};


console.log("abc".myIncludes("d")); //false

.startsWith() / .endsWith()

The .startsWith() / .endsWith() method returns true if a string ends/starts with a specific string


let text = "Hello world";
let result = text.endsWith("world");

console.log(result) // true

Using polyfills


String.prototype.myStartsWith = function (search, position = 0) {
  for (let i = 0; i < search.length; i++) {
    if (this[position + i] !== search[i]) return false;
  }
  return true;
};

console.log("abc".startsWith("d"))// false

Importance of understanding built-in behavior

When you working with JavaScript string methods its not enough to know what they do you should also understand how they behave internally

Build in methods often have small edge cases that can be easily missed.

For example :


"     Like this blog    ".trim()

It might feel unexpected but .trim() always removes starting and ending space from the string if you don't know this behavior your polyfill might be incorrect.

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

Callbacks in JavaScript

Kunal — Wed, 15 Apr 2026 12:21:43 +0000

When you writing JavaScript you come across the term callback but you may feel confused. Many newcomers to JavaScript find callbacks hard to understand too.

So In this blog we will cover :

What a callback function is
Passing functions as arguments
Why callbacks are used in programming
Callback usage in common scenarios
Basic problem of callback nesting

Callback function

A callback is a function that takes another function as an argument to be execute later

They are so common in JavaScript that you probably used callback by yourself without knowing they are callbacks

Lets see how it looks :


const button = document.querySelector('button')
button.addEventListener('click', function () {

  console.log("clicked")
})

Here , in the code we told JavaScript to listen for the click event on the button. If the button is clicked JavaScript will fired the click function

Now i am sure that you understand the term callback function and how they are used. But why ? Why do we need these callback function.

Why callbacks are used in programming

Callbacks are used in two different ways in programming one is synchronous and asynchronous functions

Synchronous Functions

If your code executes from top to bottom , left to right sequentially and wait until one code to finish you code is synchronous

Lets look at an example to make it easier to understand :


const addOne =n => n+1

addOne(1)
addOne(2)
addOne(3)
addOne(4)
addOne(5)

Callbacks are used in synchronous functions when you want a part of the code to be easily swapped with something else.

Asynchronous functions

An asynchronous function is a task that runs in background without stopping your main code

Lets look at an example to make it easier to understand :


setTimeout(() => console.log("Like and share") , 1000)
console.log("Already liked this blog !!!")

So in the above example what we do is simply make a Asynchronous function that will execute after 1sec it will not block the block main thread to execute my another console log

Callback usage in common scenarios

Callbacks are very useful feature in JavaScript that has ample amount of scenarios i will cover 3 here apart from the example which i cover before

API / Data fetching

The most common usage of callbacks are fetching data from the APIs


fetchData((data) => {
  console.log(data);
});

File handling (Node.js)

File handling is an important operation in Node.js that allows performing CRUD operations on files


fs.readFile("file.txt", (err, data) => {
  console.log(data.toString());
});

Database operations

In Node.js database operations use callbacks to run code one after another

db.query("SELECT * FROM users", (err, result) => {
  console.log(result);
});

These are some of the example of callbacks that used in a programmer everyday life.

Basic problem of callback

This make the code harder to read

Let look into the example :


loginUser("kunal", (user) => {
  getProfile(user.id, (profile) => {
    getPosts(profile.id, (posts) => {
      getComments(posts[0].id, (comments) => {
        console.log("Final Data:", comments);
      });
    });
  });
});

pretty hard right ??

One solution to overcome callback hell is to break the callback function into smaller code or Your JavaScript promises and async / await

If you want to know i have a blog , read 👇

Kunal

Mar 1

JavaScript Promises Explained: A Startup Analogy for Beginners

#discuss #javascript #webdev #node

4 min read

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

Template Literals > Your Old Code

Kunal — Fri, 10 Apr 2026 17:30:30 +0000

Few day ago i noticed my friend still using the same old code for string concatenation i mean it good but it gets messy and hard to read when the code gets bigger

In this blog we will cover :

Traditional string concatenation
Template literal syntax
Multi-line strings
Use cases in modern JavaScript

Traditional string concatenation

Before we get into t*emplate literals* lets see the old traditional way

In this you have to use + symbol when you want to concatenate the strings

const userName = "kunal"
const balance = 100

const str1 = 'Hi ' + userName + ',' + ' your balance is ' + balance + '.'

console.log(str1)

Output of the above code

Hi kunal , your balance is 100.

Note how using regular string involves adding many + symbols also you have to add white spaces too at right place.

This can get difficult and hard to read over time when your code get lengthy

with template literals you can do this easily. let see

Template literal

Template literals are the ES6 feature in JavaScript that lets you to concatenate the string by just using backticks


const userName = "kunal"
const balance = 100

const str2 = `Hi ${userName}, your balance is ${balance}.`
console.log(str2)

Output of the above code

Hi kunal , your balance is 100

With template literals there is no need to add any plus signs and extra white spaces.
You just write everything together as a single string in backticks using the ${} syntax

Multi-line strings

Another way template literals make it easier to work with stings when we are dealing with multi-line strings

In traditional string :


const regularString = 
'Hello there! \n' +
'Please like the blog \n' +
'And share it'

Output of the above code

Hello there! 
Please like the blog
And share it

We have to use the combination of + sign and \n to denote new line.

In template literals :


const templateLiteral = 
`Hello there!
Please like the blog
And share it`

Output of the above code

Hello there! 
Please like the blog
And share it

Template literals preserve line breaks and formatting exactly as written.

By using backticks, you don’t need + or \n the string is handled automatically in a clean and readable way.

Use cases in modern JavaScript

So far, you've learned what template literals are and how they compare with traditional strings method. Now, let's look at some practical example.


function formatMessage (strings , ...values){
  const concatinateStrings = ''  

  for(let i = 0  ; i < values.length ; i++ ){
      concatinateStrings = strings[i] + values[i]
   }

  finalString += strings[strings.length - 1]
  return finalString.trim()

}


const user = 'Kunal'
const task = 'JavaScript blog'
const time = '2 hours'

const message = formatMessage`
  ${user} completed the ${task}
  in ${time}.
`

console.log(message)

Output of the above code

Kunal completed the JavaScript blog
in 2 hours.

In this example, the formatMessage function receives a template literal with four expressions:


${user}

${task}

${time}

The values array will contain the evaluated values of these expressions.

You also learned about an advanced feature of template literals: tagged template literals.
These are functions that take in an array of string blocks and expressions.

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠

Master Array Flattening in JS

Kunal — Tue, 07 Apr 2026 18:12:13 +0000

While writing a blog on array methods i got to know about one method that deal with nested array which is array.flat().

If you also want to read that blog read this 👇

Kunal

Mar 3

If You Don’t Know These Array Methods, We Need to Talk.

#discuss #javascript #node #computerscience

3 min read

Before ES6, flattening arrays wasn’t straightforward and often required complex logic. Thankfully, modern JavaScript provides much simpler and cleaner ways to handle it.

Topics to Cover

What nested arrays are
Why flattening arrays is useful
Different approaches to flatten arrays

Nested arrays

Nested array are the arrays that contain other array as their elements.

Instead of holding value like string and object, a nested array store one or more array inside it.


const deepArr = [1, [2, [3, [4]]]];

Why flattening arrays is useful

When working with nested arrays that contain multiple levels of data, it can quickly become difficult to read, manage, and process the values effectively.

To simplify this, we use array flattening.

Flattening an array means converting a nested (multi-level) array into a single-level array. This makes the data easier to understand, iterate over, and work with in your code.


const nestedArr = [1, 2, [3, 4], [5, 6]];
                ↓
Output: [1, 2, 3, 4, 5, 6]

Different approaches to flatten arrays

1. Using while loop with a recursive helper function

This method uses a loop to go through each item and put it into a new array.

If it finds another array inside, it goes inside that array and does the same thing again. It keeps doing this until there are no more arrays inside.

In the end, everything gets added into one simple flat array.


const flatten = (nested) => {
  const flat = [];
  const handleFlat = (array) => {
    let counter = 0
    while (counter < array.length) {
      const val = array[counter];
      if (Array.isArray(val)) {
        handleFlat(val);
      } else {
        flat.push(val)
      }
      counter++;
    }
  }
  handleFlat(nested);
  return flat;
}


console.log(flatten(a)); // [1, 2, 3, 4, 5, 6, 7];

2. Using Reduce and Concat Method

This method is kind of like the first one, but it only goes one level deep.

It uses concat() to add things into a new array.
If it sees a normal value, it just adds it.
If it sees an array, it takes out its items and adds them instead.


const arr = [1, 2, [3, 4]];
// To flat single level array

arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

3. Using Array.flat()

This function is actually the reason I decided to write this article.
JavaScript already knew this problem exists, so it gave us a built-in method for it.
By default, it only flattens the array one level. But you can give it a number to tell it how many levels you want to flatten.
And if you don’t want to think about levels at all, just pass Infinity it will flatten everything completely.


const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


/* Flatten Array Holes */
const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

Blog refrence :- https://medium.com/swlh/how-to-flatten-an-array-in-javascript-6b3fef075655

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠