Forem: Anoop Rajoriya

The Magic of this, call(), apply(), and bind() in JavaScript

Anoop Rajoriya — Wed, 29 Apr 2026 14:56:20 +0000

The this is the final boss of the javascript developers. It's slippery, contaxtual, and changes its meaning based on where it called. Understanding it along with call, apply and bind is the moment where you stop guessing what your code do and stat knowing.

Content List

What this means in JavaScript (simple explanation)
this inside normal functions
this inside objects
What call() does
What apply() does
What bind() does
Difference between call, apply, and bind

What `this` means in JavaScript (simple explanation)

Think of this as dynamic noune like "i" or "me"

if i say "i am eating" the word "i" refer to me, if you say same sentance then "i" refer to you. The sentace is same but subject is change depending on who is speaking.

In javascript this refer to the object which currently executing the code. It provide a way to access the properies of the object without knowing the name of object beforehand.

`this` inside normal functions

When you use this inside a standard, standalone function its value depending on whether you using Strict Mode or not.

Non Strict Mode: this default to the window object inside the browser and global inside the node environment.
Strict Mode use strict: this remains undefined because javascript in strict mode prevents you from accidently modifying global object.

function checkThis() {
  console.log(this);
}

checkThis();
// In a browser: Window object
// In 'use strict': undefined

`this` inside object

When function is defined inside object as a method, this point to the object that owns the method. This is where the magic starts to become useful.

const smartphone = {
  brand: "Apple",
  model: "iPhone 15",
  describe() {
    // 'this' refers to the smartphone object
    console.log(`This is an ${this.brand} ${this.model}.`);
  },
};

smartphone.describe(); // Output: This is an Apple iPhone 15.

If you were extract the function and run it elsewhere, this would lose its connection to the smartphone. This losing context problem is exactly why the call, apply and bind where invented.

What call() does

The call() allow you to borrow a function from one object and use it for another. It invokes the funciton immediatly and allow you to manually specify what the this should point to.

Syntax: functionName.call(thisArg, arg1, arg2, ...)

function setPrice(tax, shipping) {
  console.log(`${this.item} costs $${this.price + tax + shipping}`);
}

const laptop = { item: "MacBook", price: 1200 };
const phone = { item: "Pixel 8", price: 800 };

// We call setPrice but tell it to use 'laptop' as 'this'
setPrice.call(laptop, 100, 20); // MacBook costs $1320
setPrice.call(phone, 50, 10); // Pixel 8 costs $860

What apply() does

apply() is the twin siblin to the call() it does the same thing: invokes the function immedialty with a custom this context, but it handle arguments differently, instead of listing arguments one by one, you pass them as an array.

Mnemonics: Apply == Array

const numbers = [5, 10, 15];

function sumThree(a, b, c) {
  console.log(this.label + (a + b + c));
}

const data = { label: "Total: " };

// Using apply to pass the array as individual arguments
sumThree.apply(data, numbers); // Total: 30

What bind() does

bind() is the different it does not invoke funciton immediatly, instead it create a new function that have a specific this value locken in forever. This is incrediblly useful in react components, event listeners, or anytime you want to preset context for later use.

const user = {
  name: "Alex",
  greet: function () {
    console.log(`Hello, ${this.name}`);
  },
};

// Imagine passing this to a button click handler
const clickHandler = user.greet;
// clickHandler(); // Error! 'this' is lost.

// We "bind" the context to user and save it as a new function
const boundGreet = user.greet.bind(user);

setTimeout(boundGreet, 1000); // Hello, Alex (after 1 second)

Difference between call, apply, and bind

While they all manipulate this, their usage patterns differ:

Feature	`call()`	`apply()`	`bind()`
Execution	execute immediatly	also execute immediatly	return a new function
Arguments	comma separated	Array	Comma separeted (for preset)
Main use case	method borrowing	when arguments are already in array	Event listeners and callbacks

Summary

this is JavaScript’s dynamic "subject," referring to the current object context. call() and apply() invoke functions immediately—call takes individual arguments, while apply uses an array. bind() is the patient one; it returns a new function with a permanently locked context, perfect for preserving the this keyword in future event callbacks.

Understanding the this Keyword in JavaScript

Anoop Rajoriya — Tue, 28 Apr 2026 12:09:53 +0000

The this keyword is one of the confusing concept of javascript, it not behave like it do in other languages like java or c++ in javascript. The value of this determined not by where function definition is define but how it is called.

Thinks it like a shapeshifter: it change its identity based on it's surroundings.

Content List

What this represents
this in global context
this inside objects
this inside functions
How calling context changes this

What this represents

At its core this is a keyword that refers to a object. Which object? The one which currently execution the code.

You can think this as pronoun, in the sentance "Sarah is reading a book because she is bored." the word 'she' refer to a 'Sarah'. In javascript the this keyword act as that 'she' or 'he' allowing you to reuse function across different objects without hardcodding object's name.

`this` in global context

When you are using this outside of any function or object, you are in Global Execution Context.

In a browsers this refer to the window object and in node.js this refer to a global object or empty object if you are using module.

console.log(this); // In a browser, this outputs the Window object
this.color = "Red";
console.log(window.color); // "Red"

In this scenerio this is essentially the "king of hill" its represent a entire environment.

`this` inside objects

When a funciton is defined as method of object, here this refer to the object that owns the method. This is the most common and intutive use of this keyword.

const person = {
  name: "Leo",
  greet: function () {
    console.log(`Hi, I am ${this.name}`);
  },
};

person.greet(); // Output: "Hi, I am Leo"

In the example obove, because greet was called on the person object (person.greet()) so the this directly point to that person object.

`this` inside functions

This is where thing becom spicy, the vlaue of this is depends on how the funciton is invoked.

Simple Function Call: in regular function this point to global object inside function if you are using Strict Mode like use strict the this will be undefined.
Arrow Function: arrow function are special they do not have thier own this instead they inherit from surrounding (lexical) scope. This makes them perfect for callbacks but terrible for object methods.

Function Type	this Value
Regular Function	The object that called it (or global/undefined)
Arrow Function	Inherited from the parent scope

How calling context changes `this`

Javascript have explicit way to force this to be whatever you want, this is called explicit binding. There are three primary methods to do that:

1. `call()` and `bind()`

These methods call function immediatly while manually setting the value of this.

call() method takes argumetns separatly and apply() takes arguments as an array.

function greet(greeting, punctuation) {
  console.log(`${greeting}, I'm ${this.name}${punctuation}`);
}

const user1 = { name: "Alice" };
const user2 = { name: "Bob" };

// .call() takes arguments individually
greet.call(user1, "Hello", "!");
// Output: "Hello, I'm Alice!"

// .apply() takes arguments as an array
greet.apply(user2, ["Hi", "."]);
// Output: "Hi, I'm Bob."

2. `bind()`

Unlike call(), bind() doen't run function immediatly it return a new function with this value permanantly locked in. This is incrediblly usefull for event listeners.

const user = {
  name: "Alex",
  greet: function () {
    console.log("Hello, " + this.name);
  },
};

// This loses context because 'this' becomes the global object or undefined
setTimeout(user.greet, 1000); // Output: "Hello, undefined"

// bind() creates a new function with 'this' locked to 'user'
const boundGreet = user.greet.bind(user);
setTimeout(boundGreet, 1000); // Output: "Hello, Alex"

3. `new` keyword

When you use new keyword to create a instance from constructor function the js creates a breand new object and sets instance this point to that object.

function Robot(model) {
  this.model = model;
}

const myBot = new Robot("T-800");
console.log(myBot.model); // "T-800"

Summary

this is a dynamic "shapeshifter" representing the execution context. Its value depends on how a function is called: pointing to the global object, an owner object, or a new instance. Regular functions bind at runtime; arrow functions inherit context lexically. Use call, apply, or bind to manually control its identity.

Map and Set in JavaScript

Anoop Rajoriya — Tue, 28 Apr 2026 10:07:13 +0000

Javascript comes from a long days where we manage everything with just objects and arrays, in ES6 a map and set data structures are introduced which provide more specialized ways to handle data collections.

Here are break down of how they work and why they matters:

Content List

What Map is
What Set is
Difference between Map and Object
Difference between Set and Array
When to use Map and Set

What Map is

A Map is a collection of keyed data items, very similar to object. The most basic differences is map allow keys of any types including functions, objects, and primitives.

In a Map a data items stored in a [key, value] pairs, and it remeber the original insertion order of keys.

Key Features of Map

You can use object as a keys which is impossible in a standard objects (which would stringify it like "[object object]").
In map you can get the number of items using .size.
Map are the iterable which means you can directly loop over them without extra step.

Common Methods of Map

map.set(key, value): store the value by key.
map.get(key): return the value by key.
map.has(key): return true if the key exists.
map.delete(key): remove the element by the key.

const apiCache = new Map();

async function fetchData(url) {
  // Check if we already have the data in our 'Map'
  if (apiCache.has(url)) {
    console.log("Returning cached data for:", url);
    return apiCache.get(url);
  }

  // If not in cache, fetch it
  const response = await fetch(url);
  const data = await response.json();

  // Save the result in the Map for next time
  apiCache.set(url, data);
  return data;
}

What Set is

A Set is a special type of collection: collection of values (wihout key), where each value may occur only once.

If you try to add duplicates values to a set, it simply ignore your request. This makes it ultimate tool for ensure uniqueness in your data.

Key Features of Set

It automatically filter out the duplicates values.
just like a map it also maintain insertion order.
checking a specific values exist in a set is significantly faster then searching in array.

Common Methods of Set

set.add(value): add a value and returns the set itself.
set.delete(value): remove the value.
set.has(value): return true if value exist.
set.clear(): removes everything from set.

// A list of tags entered by a user with duplicates
const rawTags = ["javascript", "webdev", "javascript", "react", "webdev"];

// Convert to a Set to remove duplicates instantly
const uniqueTags = new Set(rawTags);

// Convert back to an array to use it elsewhere
const cleanTagList = [...uniqueTags];
// Result: ['javascript', 'webdev', 'react']

Difference between Map and Object

While they looks similar but they server different masters.

Key Types: in object you can only use strings or symbols types but map allow to use any data types like function, object, and primitives.
Order: object not strictly gurantee is they maintaing insertion order but map are strictly maintain insertion order.
Size: getting size of object need manual code but map has a builtin property .size.
Performance: optimized for small static records, but map provide better performance for frequent addtion and removals.
Iteration: map required to use Object.keys() or for...in loops but map are directly iterable with for...of loop.

Difference between Set and Array

If you are wondering why we should not use array for everything, here is how they stack up:

Duplicats: array allowd to add duplicates value but set ignore you duplicate values.
Access: can use index in array but in set you don't have access, for it you need to use iterators or .has().
Searching: in array you can use includes() or indexOf() methods but it has O(n) time complexity which is slower for large dataset, but with has() in set is much faster it provide O(1) constant time complexity.
Use Cases: array used to store ordered list where duplicates are allowed but sets used for collection where you need unique items.

When to use Map and Set

Knowing the syntax is one thing, but knowing when to reach for them is what makes you an expert.

Use Map When

The key are not strings: if you need to associate data with DOM element or functions.
You need to preserve order: when the sequance of entries matter for you ui.
Frequent updates: maps are more performent than object when you are constantly adding or removing key valus pairs.

Use Set When

You need a unique list: for examples when you need to maintain a user ID's or tags on a blogs posts.
High performanc searching: if you have a massive list and you need to constancly check "is this item in here" the set will crush an array in term of speed.
Data de-duplication: the easiest way to remove duplicates from array is use set const uniqu = = [... new Set(myArray)];.

Summary

JavaScript Maps are ordered key-value collections allowing any key type, offering more flexibility than Objects. Sets store unique values with high-performance existence checks, unlike Arrays. Use Map for complex keys or ordered data, and reach for Set to eliminate duplicates and ensure efficient membership testing in large datasets.

JavaScript Promises Explained for Beginners

Anoop Rajoriya — Mon, 27 Apr 2026 06:52:47 +0000

Think Javascript Promises as promise you makes in real life. Like you promise your friend to buy a coffee, they don't have coffee now but they have guarantee you will apear with a fresh coffee or a come back with excuse to why cafe was closed.

In code promise help use to manage tasks which takes time like fetching data from server or leading heavy image wihout freezing the entire code while we waiting.

Content List

What Problem Promises Solve
Promise States (Pending, Fulfilled, Rejected)
Basic Promise Lifecycle
Handling Success and Failure
Promise Chaining Concept

What Problem Promises Solve

Before promises javascript used callbacks to perform tasks. If you need to do three taks depends on each other like logic user, fetch user profile, fetch user posts then you would end up nesting function inside funciton inside function.

This creates infamous callback hell also known as pyramid of doom. The code become nearly impossible to read, incredibly fregile and nightmare to debugg because error handling had to reapeted at every level.

Promise solve this by flattening instead of nesting. Which makes code more linear and readable way that looks much more like standard top to bottom code.

Promise States (Pending, Fulfilled, Rejected)

At any given movment the promise exist in one of the three state. Think it like ordering pizza.

Pending: its a initial process, you had ordered a pizza but it has not arrive yet, the process still in progress.
Fulfilled (resolved): success, the pizza arived. The process completed succefully, you had the result.
Rejected: the bad news state, may be the shope ran out pepperoni or the delivery driver got lost. The operation failed and you have the reason (the error).

Once a promise either be resolved or rejected it considred settled, it can not change its state again. you can't un-eat the pizza or have it fail after it already succeeded.

Basic Promise Lifecycle

The lifecycle starts with its creations and ends with its consuptions.

Creation: you create a promise using new Promise() constructor, it takes an callback called executor, which runs immeditaly. This function have 2 tools resolve and reject.
Execution: inside that executor you performd you heavy lifting like api calls etc.
Resolution: if the everything goes correctly you call reslve(value) and if someting goes wrong you call reject(error)

const myPromise = new Promise((resolve, reject) => {
    const success = true; 
    if (success) {
        resolve("The operation worked!");
    } else {
        reject("Something went wrong.");
    }
});

Handling Success and Failure

Once a promise created you need a way to say "okay, now what", here the consumer comes in, you use a specific methods to listen for the promise settle.

.then(data): it runs when the promise fulfilled, it recieves data you paased into resolve(data)
.catch(): it runs when the promise rejected, it catchs the error so your whole program does not crash.
.finally(): This runs no matter what happens (sucess or failure), it's great for cleanup tasks like removing loading spinner.

myPromise
    .then((data) => {
        console.log(data); // "The operation worked!"
    })
    .catch((err) => {
        console.error(err); // "Something went wrong."
    })
    .finally(() => {
        console.log("All done!");
    });

Promise Chaining Concept

This is the superpower of promises, When you return a value or a another promise from then(). It automatically wrap that value in new promise. This allow you to link multiple asynchronous steps together in a vertical chain.

instead of nesting, you simply keep adding .then() blocks, if any step in chain will fail it skip all remaining .then() blocks and jump to the nearest .catch() block.

fetchUser(1)
    .then(user => fetchPosts(user.id)) // Returns a new promise
    .then(posts => console.log(posts))  // Handles the result of fetchPosts
    .catch(err => console.log(err));    // Catches errors from ANY of the above steps

By using chaining you code stays clean, and you logic stay linear.

Summary

Promises manage asynchronous tasks, replacing messy "callback hell" with clean, readable code. They exist in three states: pending, fulfilled, or rejected. Once settled, they use .then() for success and .catch() for errors, allowing developers to "chain" multiple operations together linearly for better control and error handling.

Understanding Object-Oriented Programming in JavaScript

Anoop Rajoriya — Mon, 27 Apr 2026 05:24:20 +0000

OOPs is the programming style which organize code into Objects rather than lists of instructions. It helps developers to model complex systems by grouping related data and behaviours together.

Content List

What Object-Oriented Programming (OOP) means
Real-world analogy (blueprint → objects)
What is a class in JavaScript
Creating objects using classes
Constructor method
Methods inside a class
Basic idea of encapsulation

What Object-Oriented Programming (OOP) means

A object oriented programming is a paradigm (a way of thinking) where you view progarm as collection of objects that interact with each other.

Instead of writing a script with lots of functions, you organize them as specific data (properties) and actions (methods) into a single unit called Object. It make you program to easy to reuse, organize, and scale as project get bigger.

Real-world analogy (blueprint → objects)

The easiest way to understand OOPs is to think about architect and house:

1. The Blueprint (class)

Architect design a detailed plan for a house, its not a house it self. It's just a detailed set of instructions of house which define overall structure of house like how walls constructs, how many window there are, where the doors go.

2. The House (object)

Using this plan builder can buid ten different houses, each house is a real physical thing made from that plan. While they all follow the same blueprint, one house might be printed blue or another is red.

What is a class in JavaScript

In javascript, class is used to create a blueprint before class was introduced in ES6 Prototypes are used. Prototypes were a bit more complex, class provides a cleaner, easy readable way to define how object should looks and behave.

In a class you define two things Properties & Methods:

Propeties: what the object is like color, name, size etc.
Methods: what the object does like run, stop, burk etc.

Creating objects using classes

To create a new object from a class we use new keyword. This process called instantiation,

class Laptop {
  // Class definition goes here
}

// Creating an object (instance) of the Laptop class
const myMacbook = new Laptop();
const myThinkpad = new Laptop();

In this myMackbook and myThinkpad are the two distinct object created from same Laptop class.

Constructor method

The constructor is the special method which run authomatically the moment you create new object. It job is to set-up or initialize object's properties.

class Car {
  constructor(brand, color) {
    this.brand = brand; // 'this' refers to the object being created
    this.color = color;
  }
}

const myCar = new Car("Toyota", "Red");
console.log(myCar.brand); // Output: Toyota

The this keyword is crucial, it tell javascript to assign a values to the unique object you are currently creating.

Methods inside a class

Methods are the function belongs to class, its used to perform tasks that object can do. Unlike standard function we don't use function keyword, we declare methods without it in class.

class Robot {
  constructor(name) {
    this.name = name;
  }

  // This is a method
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

const wallE = new Robot("WALL-E");
wallE.greet(); // Output: Hello, my name is WALL-E!

Basic idea of encapsulation

The encapsulation is the practise of bundling data and mehods into a single unit (a class) and restricting access to some of the other objects components.

Think it like a capsul you dont need to see the chamical powder inside to take madicine, you just need to interact with outer shell.

In programming encapsulation: protect data from external code to accientally changing the internal variabals. Hide complexity: you only interact with simple method startEngine() wihtout needing to know complex logic happening inside.

In OOPs, its a good practise to use # or _ symbols before the any private variable to make it private, meaning it cannot be directly accessed or changed from outside the class.

Symmary

Object-Oriented Programming (OOP) organizes code into reusable objects containing data and behaviors. Classes act as blueprints, while objects are the physical instances. Constructors initialize properties, and methods define actions. Encapsulation protects internal data, hiding complexity and improving code structure, making systems easier to manage, scale, and maintain effectively over time.

Synchronous vs Asynchronous JavaScript

Anoop Rajoriya — Sun, 26 Apr 2026 11:08:13 +0000

To understand javascript you have to understand its single threaded nature. Imagin a chef in tiny kitchen with only single burner, that burner is the javascript engine and how the chef manage burner heat which determins either restaurant runs smoothly or ends up in a shouting match.

Content List

What synchronous code means
What Asynchronous Code Means
Why JavaScript Needs Asynchronous Behavior
Examples: Timers and API Calls
Problems with Blocking Code

What synchronous code means

Synchronous or sync is the default behaviour of the javascript, its a top to bottom, line by line execution of the code, in that each operaiton must be finish before next one starts.

Call Stack: a stack data structured by the js we called it call stack, it used to keep track what happening. When operation execution start it pushed into the call stack and after finishing it pop out from it.
Sequential Nature: if line 2 takes 10 seconds to finish the line 3 not run until those 10 seconds are up.

What Asynchronous Code Means

Asynchronous or async code allow javascript to intiat a task and move to the next one without waiting for completion of first task. When long running task completed it notify js engine to handle the result.

This achieves with the help of Event Loop which cordinate between callstack, web apis, and the callback queues.

Non-blocking code which doesn't stop the execution of the script. Javscript hands off the heavy lifting task like file operations, network calling or times to the environment we called it delegation.

Why JavaScript Needs Asynchronous Behavior

If javascript were purly synchronous it will be useless to the moderen browsers in web development.

Since javascript has only one main thread. Any heavy task would freeze the entire browser or programm execution known as Single Threaded Promblem.

Asynchronous code allow us to perform any heavy lifting task in the background without intruppting user's experience.

Examples: Timers and API Calls

Timer setTimeout(), even if you set timer for 0 milliseconds it becomes asynchronous code.

console.log("Start");

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

console.log("End");

// Output:
// Start
// End
// Inside Timeout

The setTimeout() handed callback to the browser timer api and finishing remaing code after event loop push back on to the call stack.

Api call fetch(), if you make a data request to the server you don't now how much time response take to come back the the client is 10 milliseconds or 10 seconds.

console.log("Fetching data...");

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log("Data received:", data));

console.log("Doing other things...");

The network request handled by the network api which push the result into call stack when it finished, not block the other execution.

Problems with Blocking Code

Blocking code occure when syncronous code takes too long time which hold the main thread prevent to executre other tasks.

Frozen UI, the browser rendering engine usually run on the main thread, if the thread block the browser can not repaint the screen. To user side it looks applicaiton chashed.

Lagginess, even minor blocking can cause "junk" - stammering animation make ui cheaper or broken.

Stack Overflow, excessive synchronous recursion can fill the call stack and exceed its limits which crashing script entirely.

Comparison Table:

Feature	Synchronous	Asynchronous
Execution	Line-by-line (Sequential)	Concurrent-ish (Non-blocking)
Wait time	Blocks until finished	Moves to next task immediately
Usage	"Simple logic, math, variable setup"	"Data fetching, Timers, File I/O"
Complexity	Easy to read and debug	Requires Promises or Async/Await

Summary

Synchronous JavaScript executes code sequentially, blocking the thread until tasks finish. Asynchronous code prevents UI freezes by offloading long-running operations—like API calls or timers—to the browser environment. Managed by the Event Loop, this non-blocking approach ensures applications stay responsive while handling background tasks, crucial for modern web performance.

Async/Await in JavaScript: Writing Cleaner Asynchronous Code

Anoop Rajoriya — Sun, 26 Apr 2026 09:17:27 +0000

If you ever lost youself forest of .then() or trapped in the callback hell then async/await is about to become you'r best friend. It introduced in ES2017, it's ofthen known as syntatic sugar because it does not change how javascript work under the hood, its only make it easier for us humans to read.

Content List

Why async/await was introduced
How Async Functions Work
The await Keyword Concept
Error Handling with Async Code
Comparison: Promises vs. Async/Await

Why async/await was introduced

Before the asyn/await, we handle asynchronous operation by callbacks and then promises were introduced. While promises were a massive upgrade but it have some issues:

Chaining complexisty: long chaining of .then() become difficult to follow, especially when passing data between them.
Verbosity: you had write a lot of boiler plate just to write a simple data fetch.
Debugging: error handling with .catch() was something tricky and stack traces inside promises chain were not alway helpful.

async/await was created to make asynchronous code look and behave like a synchronous code, reduceing cognitive load and making logic flow linearly.

How Async Functions Work

To use this featuer, you start with async keyword by placing it before the function declaration, arrow function and methods.

The most important thing is async function always return a pormise. Even you return a simple string or number it authomatically wrap it by resolved promise and if you throw any error then it return a rejected promise.

async function greet() {
  return "Hello, World!"; 
}

// This is equivalent to:
// return Promise.resolve("Hello, World!");

greet().then(val => console.log(val)); // "Hello, World!"

The `await` Keyword Concept

The await keyword is the magical ingrediant of the async function. It tell the javascript to paused the specific awaited code inside async function untile this promise settles.

While the function freez but you rest of applicaiton dose not freez, js engine free go to do other things because pause is the non-blocking to main thread.

await is only used inside the async function or at top level of a module in modern environments.

async function fetchData() {
  console.log("Fetching...");

  // Execution pauses here until the fetch promise resolves
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  console.log("Data received:", data);
}

Error Handling with Async Code

The one of the biggest wins is it allow us to use standard try...catch blocks. This is the same pattern used in synchronous code, making our error handling logic consistance across entire codebase.

instead of attaching a .catch() block you wrape you awated calls inside the try block and handle error in catch block.

async function getUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) throw new Error("Network response was not ok");

    const user = await response.json();
    return user;
  } catch (error) {
    console.error("Oops! Something went wrong:", error.message);
  }
}

Comparison: Promises vs. Async/Await

To see the clear difference lets look at the same task handled in both ways:

1. Using Promises:

function getRecipe() {
  fetch('/api/ingredients')
    .then(res => res.json())
    .then(ingredients => {
      return fetch(`/api/cook/${ingredients[0]}`);
    })
    .then(dish => console.log(dish))
    .catch(err => console.error(err));
}

2. Using Async/Await:

async function getRecipe() {
  try {
    const res = await fetch('/api/ingredients');
    const ingredients = await res.json();
    const dish = await fetch(`/api/cook/${ingredients[0]}`);
    console.log(dish);
  } catch (err) {
    console.error(err);
  }
}

Feature	Promise (`.then`)	Async/Await
Readability	become nested or overly long	more lenear, looks like synchronous code
Error Handling	Uses `.catch`	Uses `try...catch`
Conditionals	hard to handle logic inside chains	stanard `if...else` work naturally
Debugging	harder to set breakpoints in chains	easy to set breakpoints on each line

Summary

Async/await makes asynchronous JavaScript look synchronous, replacing messy Promise chains. The async keyword ensures functions return Promises, while await pauses execution non-blockingly until tasks finish. This enables standard try...catch error handling, making code cleaner, easier to debug, and more readable than traditional .then() syntax.

Error Handling in JavaScript: Try, Catch, Finally

Anoop Rajoriya — Sat, 25 Apr 2026 10:43:02 +0000

Handling errors is the difference between professional application and one who left user staring at the frozen screen. In javascript things will go wrong - apis will fails, user will provide creative inputs, and variables will be undfined

Here is the in depth guide to managing the chaos using try, catch, finally, and custom errors.

Content List

What errors are in JavaScript
Using try and catch Blocks
The finally Block
Throwing Custom Errors
Why Error Handling Matters

What errors are in JavaScript

Error is the object in javascript, when things goes wrong the JS throws this object. It contains name (a type or error), message (a human readable description), and a stack tracing (A GPS of code: provide location of error from it generate).

If error did not chaught the js stops the entire exection of programm. There are some common built in errors types:

ReferenceError: using variables that has not been declared.
TypeError: performing operation on wrong data types.
SyntaxError: writing code that js engine can't parse (try/catch can't catch syntax error in same script block because the code will not even run).
RangeError: using a number outside the allowable range.

Using try and catch Blocks

The try...catch statements are you safety net. You wrap the code wich might be fails in the try block and defining how you want to handle that failure in catch block.

try {
  // Code that might cause an error
  let data = JSON.parse("Invalid JSON String"); 
  console.log("This line will never run.");
} catch (error) {
  // Code to handle the error
  console.error("Oops! Something went wrong:");
  console.error("Message:", error.message); // The error description
  console.error("Name:", error.name);       // The type of error
}

The catch block only execute if the code in try will fails if the code run successfully the catch block skipped entirely.

The `finally` Block

The finally block is the "loyal companion" of error handling. It execture not matter what wheter an error was throwen or not, or even you return early form try or catch blocks.

It primary purpose is cleanup, you placing code which close database connection, stop loading spinners or releasing file handles.

let isLoading = true;

try {
  fetchDataFromAPI();
} catch (err) {
  console.log("Error fetching data:", err);
} finally {
  isLoading = false; 
  console.log("Cleanup complete. Loader hidden.");
}

Throwing Custom Errors

Some times code is technically valid but logically wrong like user entering negative age, you can use throw keyword to manually trigger errors.

While you can throw any things like string, number but it is a good practise to throw Error Object

function checkAge(age) {
  if (age < 0) {
    throw new Error("Age cannot be negative!"); // Creating a custom error
  }
  return "Access granted";
}

try {
  checkAge(-5);
} catch (e) {
  console.warn(e.message); // "Age cannot be negative!"
}

For advanced use cases you can extend Error to create a customized error types like ValidationError or DatabaseError.

Why Error Handling Matters

Why not console let to show the error? becuase the error handling is vital for several reasons:

Graceful Degradation: instead of showing white screen, show the user a friendly "Sorry, our servers are napping" message.
System Stability: a single api fails can should not crash the entire user interface.
Easier Debugging: well-placed try...catch blocks can log the data about state of application when it failed, which make it eaier to fix.
Security: by catching errors you can prevent the browers form leaking sensitive stack traces or server-side file paths to attackers.

Summary

Block	Execution Rule	Typical Use Case
try	Always runs first.	Code that might fail (API calls, JSON parsing).
catch	Runs only if try fails.	Error logging, showing user alerts, retrying logic.
finally	Always runs last.	Closing connections, hiding loaders, resetting state.
throw	Manual trigger.	Enforcing business logic or custom validation.

Understanding Objects in JavaScript

Anoop Rajoriya — Sat, 25 Apr 2026 08:42:23 +0000

Objects are the backbone of the javascript eco-system. Understanding it like a understanding language DNA's. Here are the deep dive into how they works and why they are the MVP or your codebase.

Content List

What objects are and why they are needed
Creating objects
Accessing properties
Updating object properties
Adding and deleting properties
Looping through object keys

What objects are and why they are needed

In programming we ofter need to represent complex entitis. A simple variables like string or number can only hold one piece of data, however real world item have a multiple characterstics.

A objects are a collection or properties & methods, they store values in key-values pairs.

You might thinking is really we need object there is why:

without object keeping track of related data is messy, imagin you have to store a user profile data, keeping each data in single variable like username, userEmail, and userAge. If there are 100 user then you have to manage 300 disconnected variable. Object allow you to group that data into one single package like const user = {username: "siv", email: "siv2testing.com", age: 21}.

Creating objects

The most common way to create object is useing Object Literals syntax (the curly braces)

// A Smartphone Example
const smartphone = {
  brand: "Apple",
  model: "iPhone 15",
  is5G: true,
  batteryLevel: 85,
  // Objects can even contain functions (methods)
  ring: function() {
    console.log("Beep! Beep!");
  }
};

Accessing properties

One the object created you need a way to get the data back out. There are two primary ways to do this.

1. Dot Notation: this is the most common and readable way, you use it when you now the name of the property beforehand.

console.log(smartphone.brand); // "Apple"

2. Bracket Notation: this is more powerful way you will be using it, if you key names have spaces, special characters or using variables to access keys.

const keyToLookup = "model";

console.log(smartphone["model"]);    // "iPhone 15"
console.log(smartphone[keyToLookup]); // "iPhone 15" (Dynamic access)

Updating object properties

Objects in js are mutables means you can change the values inside the object even if you declare it with const

const car = {
  make: "Tesla",
  status: "Parked"
};

// Changing the value
car.status = "Driving"; 
car["make"] = "Tesla Motors";

console.log(car.status); // "Driving"

Adding and deleting properties

Objects are flexibles mean they can grow or shrink during the execution of you programm.

Adding Properties

You adding a property by simply assigning a vlaue to a key that dosn't exist yet.

const employee = { name: "Sarah" };

employee.role = "Developer"; // Property added
employee["salary"] = 90000;  // Property added

Deleting Properties

You using a delete operator to remvoe the key-value paires entirely.

delete employee.salary; 
console.log(employee.salary); // undefined

Looping through object keys

Unlike array, you can not use standard for loop to iterate over objects because they don't have indexes, instead we use for...in loop or Object built-in methods.

The `for...in` Loop

This loop iterate over every enumarable property of the objects.

const scores = {
  math: 90,
  science: 85,
  history: 88
};

for (let subject in scores) {
  console.log(`${subject}: ${scores[subject]}`);
}
// Output: 
// math: 90
// science: 85
// history: 88

Using `Object.keys()`

If you need a array of keys to use moderen array methods like map(), or filter(). Use this to create a array contains all keys of the intended object.

const keys = Object.keys(scores); 
// ["math", "science", "history"]

keys.forEach(key => {
  console.log(scores[key]);
});

Summary

JavaScript objects group related data using key-value pairs, making complex data manageable. You create them via literals {}, access properties using dot or bracket notation, and freely add, update, or delete entries. To iterate through data, use for...in loops or Object.keys() to handle keys dynamically and efficiently.

Array Methods You Must Know

Anoop Rajoriya — Fri, 24 Apr 2026 10:56:44 +0000

Arrays are the bread and butter of the javascript. Whether you are building shopping cart or social media feed you are spending lots of time poking and prodding lists of data.

here are the breakdown of the essentials arrays methods with real world examples.

Content List

Adding & Removing from the End
Adding & Removing from the Front
Transformation & Selection
The "Heavier" Methods

Adding & Removing from the End

push() and pop() methods are used to adding and removing elements from the end of the arrays, it's like a interact with pringles can.

push(): this method take a items which you want to add in array end, it returns a length of the array after the adding item.

const cart = ["milk", "bread"]
const res = cart.push("eggs")
console.log(cart, res) // ["milk", "bread", "eggs"], 3

pop(): remove the last elment form an array and return it. It does not accept any arguments.

const res = cart.pop()
console.log(cart, res) // ["milk", "bread"], "eggs"

Adding & Removing from the Front

shift() and unshift() methods are used to add or remove items form the front of the array. You can think it like a waiting line at a coffee shop.

shift(): it remove the front element and return the current length after removing element. It does not accept any argument.

const line = ["rahul", "dipali", "jani"]
const res = line.shift()
console.log(line, res) // ["dipali", "jani"], 2

unshift(): it add one or more element form beginning of array, elements added in order passed to it. It return new length of the array.

const res = line.unshift("VIP Guest", "Senior cityson")

// ["VIP Guest", "Senior cityson", "dipali", "jani"], 4
console.log(line, res)

Transformation & Selection

These methods are not changes yor original arrays instead it returns a brand new array based on yor interection.

map(): creates a new array by performaing an action on every item in the original array. Action is provided as callback, processing item and it's index are passed to callback.

const priceInInr = [10, 100, 1000]
const priceInUsd = priceInInr.map((price, index)=>{
    console.log(index) // print prcessing price index
    return (price * 0.011).toFixed(2)
})
console.log(priceInUsd) // ['0.11', '1.10', '11.00']

filter(): mostly used to filter items based on certain condition. Accept callback in that item and index passed as arguments. It return a new array containing elements passed a specific condition.

const books = [
    { title: 'Dune', genre: 'Sci-Fi' },
    { title: 'Emma', genre: 'Romance' }
];
const sciFiOnly = books.filter(book => book.genre === 'Sci-Fi');
console.log(sciFiOnly) //[{ title: 'Dune', genre: 'Sci-Fi' }]

The "Heavier" Methods

reduce(): it takes two arguments a callback (reducer) and a accumulator. It runs reducer on each element, accumulator and current items are paased as an argument to reducer. Returned value form reducer is passed as an accumulator in next iteration. If accumulator not passed explicitly it assigned accumulator by it self: first value in array become accumulator and next one is current item.

const bill = [10, 5, 15];
const total = bill.reduce((sum, price) => sum + price, 0);
console.log(total) // 30

foreach(): used to traver over an array, it takes two argumetns a callback and thisArg. In callback it passed these three things:
current value: a items currently being processed.
index: a index place of current item in original array.
array: a original array foreach called on.

The thisArg is the value you want to use it as this when executing the callback, its a optional argument.

const cart = [
  { item: "Laptop", price: 1000, inStock: true },
  { item: "Mouse", price: 25, inStock: false },
  { item: "Keyboard", price: 75, inStock: true }
];

let totalBill = 0;

cart.forEach((product) => {
  if (product.inStock) {
    totalBill += product.price;
  } else {
    console.log(`Alert: ${product.item} is currently unavailable.`);
  }
});

console.log(`Your total is: $${totalBill}`);

Summary

push/pop and unshift/shift add or remove items from array ends and fronts. map transforms elements into new lists, while filter extracts specific data. reduce condenses arrays into single values, and forEach runs logic for every item. These methods are essential for clean, efficient JavaScript data handling.

String Polyfills and Common Interview Methods in JavaScript

Anoop Rajoriya — Thu, 23 Apr 2026 18:15:29 +0000

Strings are more than just a sequance of characters. It's a backbone concept of the data manipulation. Whether you are cleaning user input to solving leetcode problems, understaing how they work under the hood gives you super power.

Content List

What are String Methods?
Why Developers Write Polyfills?
Implementing Simple String Utilities (Polyfills)
Common Interview String Problems
Importance of Understanding Built-in Behavior

What are String Methods?

In javascript strings are the primitive data types but js wraped it by String object temporarly allow you to access some built-in methods on string. These methods are lived within String.prototype property.

When you using those methods remember than strings are immutable so these never change it, they instead return a new string.

There are some string methods categorized:

Searching: indexOf(), includes(), startsWith()
Transforming: toUpperCase(), trim(), replace()
Extraction: slice(), substring(), split()

Why Developers Write Polyfills

A polyfills are the piece of code (usually on the brower) which provides a specific morder functionalities to the older systems thos did not have native support of these functionalities.

If the browser already have the method we use it (it's faster), if it does not have this native support then we fill it out that hole with own custom implementation.

There are some common reasons for polyfills:

Lagacy Support: supporting older environments like IE11 that lack of ES6+ features like .includes() and .padStarts().
Interview Performance: some interviewers ask you to write a polyfills to test your understanding of concepts, prototypes, this binding, and some edge cases handling.

Implementing Simple String Utilities (Polyfills)

Lets looking how can create polyfills manually for String.prototype.includes()

if(!String.prototype.myIncludes){
    String.prototype.myIncludes = function(searchingStr, position){
        if(typeof position !== "number") position = 0
        // this is the string on that method called
        // it search str from or after the position
        return this.indexOf(searchingStr, position) !== -1
    }
}

const str = "Hello World";
console.log(str.myIncludes("World")); // true

**Another example for repeat

if(!String.prototype.myRepeat){
    String.prototype.myRepeat = function(count){
        if(count < 0)
            throw new Error("count must be non-negative")

        let result = ""
        for(let i = 0, i < count; i++){
            result += this
        }

        return result
    }
}

Common Interview String Problems

Interviewers love strings because it test you understandin abilites of loops and logic without using other complex data structres.

There are some common problems interviewers ask:

Palidrome Check: comparing string to its reverse version or use of concepts two pointer.
Anagram Check: sort both strings and compares, or use frequency counter (Hash map).
First Non-repeating Char: use objects or map to store char coutns and loop again to find the first 1.
Reverse Word: str.split(" ").reverse().join(" ")
Longest Substring (No-Repeat): use of sliding window technique with set.

Importance of Understanding Built-in Behavior

Its easy to revers a string in javascript with the help of .split("").reverse().join("") but the experts know the why and how.

Performance (Time Complexity): many people don't understaning these .split() and .join() takes a O(n) time. Chaining them on short string may be fine but with it will become slow on larger data set.
Memory Management: since you now strings are immutable, every time you concatenate it in a loop like str+= "0", you are creating whole new string in memory which is a O(n^2) behaviour.
The 'Prototype' Chain: understanding these methods are living on String.Prototype property is the key of master inheritance in js. If you are modifing prototype you are affacting the every string in you application (which is why you should only do it for polyfills).

Summary

JavaScript string methods provide immutable data manipulation. Polyfills ensure legacy browser compatibility by manually adding missing functionality to String.prototype. Understanding these tools is vital for solving interview problems like anagrams, optimizing performance, and mastering the prototype chain. It bridges the gap between basic coding and professional software engineering practices.

The new Keyword in JavaScript

Anoop Rajoriya — Thu, 23 Apr 2026 05:06:28 +0000

To understand the new keyword in deep you have to imagine it like a factory supervioser which takes a generic function and force it to behave like a object-manufacturing plant.

Here are the deep dive to understand how these concepts intertwine.

Content List

What is constructor function
What is new Keyword
Waht is Object Creation Process
How new Links Prototypes
Instances Created from Constructors

The constructure function: Blueprint

A constructor funciton is like a any normal function. There is nothing syntatically special about it unitle you invoked it with new keyword. By convention we named it with capital letter to tell other developers "Hey brother this is constructor funciton never ever call it without new, Ok".

function Plane(brand, model){
    this.brand = brand
    this.model = model
}

Plane.prototype.fly = function (){
    console.log(`${this.brand} is taking off!`);
}

If you calling Plane() without new keyword. this is pointing to global object (window) or undefined in strict mode and you will end up like a error or global variable which you didn't need.

The new Keyword: The Factory Supervisor

The new keyword is the operator which trigger the "Object Creation" process, it's a four steps internal ritual. Without it the funciton executed normally line-by-line and return undefined or retured valus, but with it the js engine shift into "Instentiation Mode".

The Object Creation Process (Step-by-Step)

When you call function like it, the js engine perform bellow four steps:

const myPlane = new Plane("Boeing" 747)

Creation: it creates a brand new object {} in memory.
Linking: it takes this created object and sets its internal [[Prototype]] (the hidden __prototype__ property) to match the Plane.prototype object. This create a "inheritance" link between them.
Binding: it calls the Plane function, but it hands function newly created empty object to use it as this. Every function say this.brand it is actually, writing data onto that new object.
Returning: if the function returns an non-primitives like arrya or objects (return {a:1}). Javascript throws away work it just did and return that object instead. But if the non-primitives or nothing at all returns like (return "Done") then javascript returned that newly creaetd object form step 1.

How `new` Links Prototypes: The "Secret Tunnel"

This is the most misunderstood part of the new keyword. It established a delegation chain:

The Constructor has a .prototype property where you put all you methods or values you want to share it with all its instances.
The Instances have a [[Prototype]] link which points back to that same object.

Because of the new keyword the second steps is implemented, when you call myPlane.fly() it finds into the myPlane object, it doesn't find fly() there, then it follow its "secret tunnel" (the prototype link) to Plane.prototype and it finds fly() there, executes it.

Instances Created from Constructors

The final result of these process is Instace

The Instace is a unique object belongs to a type. You can create multiple instances form one type like myPlane or otherPlane, both are separate objects in memory of Plane type (changin the brand of one will not change other), they are siblings because they share the same prototype.

The new keyword is what transform javascript form simple functions into a system capable of Object-Orianted Programming (OOP). it automate a boilerplate of creating an objects, linking its lineage, and populating its data.

Summary

The new keyword automates object creation. It creates an empty object, links its internal prototype to the constructor's prototype, and binds this to the new instance. After the constructor populates the object, it returns the instance (unless an object is explicitly returned), enabling shared methods and powerful prototype inheritance patterns.

Forem: Anoop Rajoriya

The Magic of this, call(), apply(), and bind() in JavaScript

Content List

What this means in JavaScript (simple explanation)

this inside normal functions

this inside object

What call() does

What apply() does

What bind() does

Difference between call, apply, and bind

Summary

Understanding the this Keyword in JavaScript

Content List

What this represents

this in global context

this inside objects

this inside functions

How calling context changes this

1. call() and bind()

2. bind()

3. new keyword

Summary

Map and Set in JavaScript

Content List

What Map is

Key Features of Map

Common Methods of Map

What Set is

Key Features of Set

Common Methods of Set

Difference between Map and Object

Difference between Set and Array

When to use Map and Set

Use Map When

Use Set When

Summary

JavaScript Promises Explained for Beginners

Content List

What Problem Promises Solve

Promise States (Pending, Fulfilled, Rejected)

Basic Promise Lifecycle

Handling Success and Failure

Promise Chaining Concept

Summary

Understanding Object-Oriented Programming in JavaScript

Content List

What Object-Oriented Programming (OOP) means

Real-world analogy (blueprint → objects)

1. The Blueprint (class)

2. The House (object)

What is a class in JavaScript

Creating objects using classes

Constructor method

Methods inside a class

Basic idea of encapsulation

Symmary

Synchronous vs Asynchronous JavaScript

Content List

What synchronous code means

What Asynchronous Code Means

Why JavaScript Needs Asynchronous Behavior

Examples: Timers and API Calls

Problems with Blocking Code

Summary

Async/Await in JavaScript: Writing Cleaner Asynchronous Code

Content List

Why async/await was introduced

How Async Functions Work

The await Keyword Concept

Error Handling with Async Code

Comparison: Promises vs. Async/Await

Summary

Error Handling in JavaScript: Try, Catch, Finally

Content List

What errors are in JavaScript

Using try and catch Blocks

The finally Block

Throwing Custom Errors

Why Error Handling Matters

Summary

What `this` means in JavaScript (simple explanation)

`this` inside normal functions

`this` inside object

`this` in global context

`this` inside objects

`this` inside functions

How calling context changes `this`

1. `call()` and `bind()`

2. `bind()`

3. `new` keyword

The `await` Keyword Concept

The `finally` Block

The `for...in` Loop

Using `Object.keys()`

How `new` Links Prototypes: The "Secret Tunnel"