Welcome back to another blog. In the previous blogs, we’ve been learning different JavaScript concepts that make our code cleaner and more powerful. But as your project grows, something even more important comes into play — code organization.

If you’ve ever worked on a medium or large project, you know how messy things can get when everything is written in a single file

Today, we’ll fix that problem by understanding JavaScript Modules — one of the most important concepts in modern JavaScript.

The Problem: Unorganized Code

Let’s say you're building a project like a blog app or e-commerce app.

You might end up with something like this:

// utils, API calls, UI logic — everything in one file 

function calculateTotal(price, tax) {
  return price + tax;
}

function fetchProducts() {
  // API logic
}

function renderUI() {
  // UI logic
}

Problems with this approach:

• Hard to read

• Difficult to debug

• Not reusable

• Becomes messy as the project grows

This is where modules come into play.

What are JavaScript Modules?

A module is simply a separate file that contains specific functionality.

Instead of writing everything in one file, we split the code into multiple files.

Example:

• math.js → math functions

• api.js → API calls

• ui.js → UI logic

This makes your code:

• Cleaner

• Easier to manage

• Reusable

Exporting Functions or Values

To use code from one file in another, we need to export it.

Named Export

// math.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

Importing Modules

Now we can import these into another file:

// app.js
import { add, PI } from './math.js';

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

Notice:

• Curly braces {} are used for named imports

• File path is required (./math.js)

Default vs Named Exports

This is where many beginners get confused, so let’s break it down simply.

Default Export (Only One Per File)

// greet.js
export default function greet(name) {
  return `Hello ${name}`;
}

importing:

import greet from './greet.js';

console.log(greet("Abhishek"));

No {} needed
You can rename it while importing

Why Modules are Important

1. Better Maintainability

2. Reusablity

3. Scalability

4. Team Collaboration

How Modules Improve Code Structure

Instead of this:

// everything.js
function login() {}
function fetchUser() {}
function renderDashboard() {}

You can do this:

auth.js
api.js
ui.js

// auth.js
export function login() {}

// app.js
import { login } from './auth.js';

Now the project feels structured like a real-world application.

That’s it for this blog. This concept might feel simple, but it’s extremely powerful when used in real projects. Start applying it in your projects, and you’ll immediately notice the difference.

I will see you in another interesting and useful blog. Till then...

Stay consistent and keep grinding....

Peace ✌️

Welcome to another blog in this JS series. In the previous blog, we explored String Polyfills and common interview methods—basically, how JavaScript works under the hood.

Today, we’re diving into something that looks simple but confuses a lot of developers: the new keyword

If you've ever written this:

const user = new User("Abhishek");

…and just moved on without thinking much — this blog is for you.

Because under the hood, a LOT is happening.

What does the new keyword actually do?

Whenever we use new keyword, then it does these 4 things:

1. Create a new object

2. Link it to a constructor function

3. Set up prototype inheritance

4. Return that object

But this is just a surface-level. Let's break it properly in depth.

Constructor functions

Before understanding new, you need to understand constructor functions.

function User(name) {
  this.name = name;
}

//now when we do:
const user1 = new User("abhishek"); 

This function behaves differently from a normal function because of new.

It is exactly the same as this code.

class User{
    constructor(name){
      this.name = name;
    }
}
const user1 = new User("abhishek")

This is the modern JS code using classes.

What happens when we use new?

Here is the step-by-step breakdown of what happens when we use new a keyword.

When we do this:

const user1 = new User("Abhishek");

1. Create an empty object

const obj = {};

2. Link prototype

obj.__proto__ = User.prototype;

Because of this step, methods get shared.

3. Bind this to this new object

User.call(obj, "Abhishek");

So inside the constructor:

this.name = "Abhishek";

4. Return the object

return obj;

Now, finally, the object is returned unless the constructor explicitly returns another object.

How new links prototypes

User.prototype.greet = function () {
  console.log(`Hello, ${this.name}`);
};

user1.greet(); //Hello, Abhishek

How this user1.greet() is working?

This is working because of the prototype chain, because in the second step of newWe do prototype linking, so

user1.__proto__ === User.prototype

And that's why user1 is able to find the greet in User prototype chain.

Instances created from constructors

const user1 = new User("Abhishek");
const user2 = new User("Agam");

Here, use1 and user2 are two instances created from a single constructor function. Here are the properties of these instances:

• Both have different data

• But these two share the same methods via prototype

• instanceof Operator: You can use the instanceof operator to verify if an object was created by a specific constructor.

To verify, you can do this:

console.log(user1 instanceof User); // true
console.log(user1.__proto__ === User.prototype); // true

What if you forget new?

const user1 = User("Abhishek"); //this is classic bug

In this case:

• this points to the global object (or undefined in strict mode)

• No object is created

Result: unexpected behavior

Some confusing part

You have also noticed that sometimes you can use Array() with new or without new. Also, the same happens with other built-in methods too.

So, let's understand this in a visual way.

This is for Array() only, but the same thing happens with other built-in methods too, like Object(), Number(), String(), etc.

TL;DR

If this is too long to read, then I have a visual diagram that summarizes this blog.

The new keyword is not just syntax — it’s a core concept that connects objects, prototypes, and inheritance in JavaScript.

Once you understand this, a lot of confusing behavior in JS suddenly makes sense.

In the next blog, we’ll move into something equally important:

Modules in JavaScript (import/export) — how modern JS organizes code.

Till then…

Stay consistent and keep grinding…

Peace ✌️

Welcome to another blog in this JS series. In the last blog, I covered Array Flatten in JavaScript and covered how nested structures can be simplified into a single level.

Now, let’s shift our focus to something that shows up a lot in interviews — Strings.

Not just using string methods… but actually understanding how they work under the hood.

Because trust me —
Writing str.includes() is easy
Explaining how it works internally is what gets you hired

So in this blog, we’ll break down:

• What string methods are

• Why polyfills matter

• How to implement them

• Common interview patterns

Let’s start

String Methods

String methods are built-in functions provided by JavaScript to manipulate and work with strings.

For example:

const str = "Hello World";

console.log(str.toUpperCase());
console.log(str.includes("World")); 
console.log(str.slice(0, 5));

These methods make our lives easier…

But here’s the real question
Do you know how they actually work internally?

That's what I'm going to cover in this blog.

Why write Polyfills

A polyfill is basically your own implementation of a built-in method. So, if there are built-in methods already available, then why write your own (polyfills)?

Here are the reasons:

1. Interview perspective

2. For a deeper understanding

3. Browser compatibility: Earlier, not all browsers supported modern methods. Developers wrote polyfills to ensure consistency.

Now, you know the importance of polyfills. Let's write some polyfills of string methods.

1. Polyfill for includes()

Steps:

1. Loop through the main string

2. At each index, try to match the target string

3. Compare characters one by one

4. If all characters match → return true

5. If no match found → return false

String.prototype.myIncludes = function(searchStr) {
  for (let i = 0; i <= this.length - searchStr.length; i++) {
    let match = true;

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

    if (match) return true;
  }

  return false;
};

// Usage
console.log("Hello World".myIncludes("World"));

2. Polyfill for indexOf()

Steps:

1. Loop through the string

2. Try matching a substring at each position

3. If match found → return index

4. If not found → return -1

String.prototype.myIndexOf = function(searchStr) {
  for (let i = 0; i <= this.length - searchStr.length; i++) {
    let match = true;

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

    // Return index instead of true
    if (match) return i;
  }

  return -1; // not found
};

3. Polyfill for startsWith()

Steps:

1. Check if the search string is longer than the main string

2. Compare characters from the beginning

3. If any mismatch → return false

4. If all match → return true

String.prototype.myStartsWith = function(searchStr) {
  // Edge case: search string longer than original
  if (searchStr.length > this.length) return false;

  // Compare from start
  for (let i = 0; i < searchStr.length; i++) {
    if (this[i] !== searchStr[i]) {
      return false; // mismatch
    }
  }

  return true; // all matched
};

4. Polyfill for endsWith()

Steps:

1. Find the starting index from the end

2. Compare characters from that position

3. If mismatch → return false

4. If all match → return true

String.prototype.myEndsWith = function(searchStr) {
  // Calculate start index
  let start = this.length - searchStr.length;

  // Edge case: search string longer
  if (start < 0) return false;

  // Compare characters
  for (let i = 0; i < searchStr.length; i++) {
    if (this[start + i] !== searchStr[i]) {
      return false; // mismatch
    }
  }

  return true; // match found
};

If you have noticed carefully....

includes() and indexOf() Use sliding window logic
startsWith() and endsWith() use direct comparison

This is exactly what interviews want:

Not just code — but pattern recognition

That’s it for this blog. These concepts may look simple, but mastering them will significantly improve your problem-solving skills and interview confidence.

In the next blog, we’ll explore one of the most important and confusing concepts in JavaScript — the new keyword.

I will see you in another interesting and useful blog. Till then...

Stay consistent and keep grinding....

Peace ✌️

Welcome to another blog in this JS series. In the previous blogs, I've covered concepts like destructuring, spread/rest, and template literals. Now it’s time to tackle something that looks simple but is asked very frequently in interviews — Array Flattening in JavaScript.

Array flattening is a simple but very useful concept. There are various ways to flatten a nested array. In this blog, I will cover all those from the perspective of an interview.

Let's start the blog.

Nested Arrays

A nested array is simply an array inside another array.

const arr = [1, 2, [3, 4], [5, 6]];

But this can be deeper like this:

const arr = [1, [2, [3, [4, 5]]]];

You can think of it as the layer of boxes inside boxes.

Why flatten nested arrays?

Flattening means converting a nested array into a single-level array.

//nested array
[1, [2, [3, 4]], 5]

// flatten array - single level
[1, 2, 3, 4, 5]

Real-world use cases:

• API responses (nested JSON data)

• Data transformation before rendering UI

• Processing deeply nested structures (like comments, categories)

• Interview problems (VERY common)

Ways to flatten arrays

We can flatten an array in 3 steps only, and those are:

1. Traverse every element of the nested array

2. If the element is an array, then go deeper.

3. Now, when you find a value, then collect that.

Example:

//nested array
[1, [2, [3, 4]], 5]

steps to make this single level array
Step 1: 1 → add → [1]

Step 2: [2, [3, 4]] → go inside
        2 → add → [1, 2]

        [3, 4] → go inside
        3 → add → [1, 2, 3]
        4 → add → [1, 2, 3, 4]

Step 3: 5 → add → [1, 2, 3, 4, 5]

Here are the different ways to flatten a nested array.

1. Using flat()

This is a built-in method in JS used to flatten the array.

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

arr.flat();      // [1, 2, [3, 4]]
arr.flat(2);     // [1, 2, 3, 4]
arr.flat(Infinity); // fully flattened

This method takes depth as an argument. Default depth is 1, and if you have flattened the array fully, then you can use Infinity

2. Using Recursion

In the interview, the interviewers expect you to use raw code, not an built-it method.

Here is the recursive way to flatten an array.

function flattenArray(arr) {
  let result = [];

  for (let item of arr) {
    if (Array.isArray(item)) {
      result = result.concat(flattenArray(item));
    } else {
      result.push(item);
    }
  }

  return result;
}

In this code:

• I have iterated through array

• Check → is it an array?

• Yes → recursively flatten

• No → push to result

3. Using reduce()

function flattenArray(arr) {
  return arr.reduce((acc, curr) => {
    if (Array.isArray(curr)) {
      return acc.concat(flattenArray(curr));
    }
    return acc.concat(curr);
  }, []);
}

This is the same as the above recursion idea, but cleaner code.

4. Using Stack

Recursion is not useful for large arrays. So, you can also use a stack if the array length is large.

function flattenArray(arr) {
  const stack = [...arr];
  const result = [];

  while (stack.length) {
    const item = stack.pop();

    if (Array.isArray(item)) {
      stack.push(...item);
    } else {
      result.push(item);
    }
  }

  return result.reverse();
}

At the end, reversed because the stack is LIFO (last in first out)

5. Using toString()

This can also flatten a nested array but is not recommended because it converts everything to a string and will also break for objects or booleans inside the array.

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

const result = arr.toString().split(',').map(Number);

That’s it for this blog. This is one of those concepts that looks easy at first, but once you go deeper, you’ll realize how important it is for interviews and real-world problem-solving. Make sure you don’t just read it—try implementing each approach yourself.

In the next blog, we’ll dive into another interesting JavaScript concept that will level up your understanding even more.

Till then...

Stay consistent and keep grinding....

Peace ✌️

Welcome to another blog in the JS series. Now, I'm covering topics that are going to be used in your code regularly. In the previous blog, I covered the spread vs rest operator in JS.

If you have not read that blog yet, then please go through it. The blog is short, but it is very important to write clean code. Here is the link:

https://js-with-abhishek.hashnode.dev/spread-vs-rest

In this blog, I'm going to cover Template Literals in JavaScript.

Trust me, the concept is really easy, but once you start using it, your code will instantly look cleaner and more readable. I will also give you some real-life examples so that you can actually feel the difference.

Let's start the blog

Traditional Way of String Concatenation

Let's create a message that will consist of a string and variables.

const name = "Abhishek";
const age = 22;

const message = "My name is " + name + " and I am " + age + " years old.";

It works fine... but it doesn't look good. Also, if there are more variables and strings, then it will be hard to read.

For example:

const user = "Abhishek";
const email = "abc@gmail.com";
const status = "Active";

const text = "User: " + user + "\n" +
             "Email: " + email + "\n" +
             "Status: " + status;

Problems:

• hard to read

• Too many + operators

• Easy to miss spaces

• Multi-line strings are messy

Now, you understand that this is definitely not a good way. So JS provides Template literals as a solution.

Template Literals

Template literals solve all the above-listed problems. Instead of using quotes, we use backticks (` ).

for example

const message = `Hello World`;

This is very simple, but powerful.

Embedding Variables

To embed a variable, we use ${} and the variable name inside the braces.

const name = "Abhishek";
const age = 22;

const message = `My name is \({name} and I am \){age} years old.`;

This is easy to read and also looks clean compared to the traditional way.

Multi-line Strings

In the traditional way, to change the line you have to write \n, like this:

const text = "Line 1\n" +
             "Line 2\n" +
             "Line 3";

But in template literals, you just have to enter and write the string in new line. That's it. Not just this, you can also increase the space by giving space between strings.

For example:

const text = `
Line 1
Line 2
        Line 3 with spaces 
`;

JavaScript Inside Strings

Yes, you can also run JS expressions inside the template literals. Here are some examples:

const a = 10;
const b = 20;

const result = `Sum is ${a + b}`;

const greet = (name) => `Hello ${name}`;

const message = `${greet("Abhishek")} 👋`;

Real-Life Use Cases

1. API Response

res.send(`User ${user.name} created successfully`);

2. Dynamic UI

const heading = `<h1>Welcome ${user.name}</h1>`;

3. Logging

console.log(`Error at \({time}: \){message}`);

4. Dynamic URLs

const url = `https://api.example.com/users/${userId}`;

That’s it for this blog.

Template literals might look like a small feature, but once you start using them, you’ll realize how much cleaner and more readable your code becomes. It removes unnecessary clutter and lets you focus more on logic rather than fixing strings again and again.

I hope this blog helped you understand why template literals are preferred over traditional string concatenation and how they make your code feel more modern and structured.

In the next blog, I’m going to cover Array Flattening in JavaScript — another concept that seems simple but is very useful in real-world problems and interviews.

I will see you in another interesting and useful blog. Till then...

Stay consistent and keep grinding....

Peace ✌️

Hello readers,

Welcome to another blog in the JS series. Now, a days i'm covering topics which are going to be used in your code regularly. In the previous blog, I covered destructuring in JS.

If you have not read that blog yet, then please go through it. The blog is short, but it is very important to write clean code. Here is the link: https://js-with-abhishek.hashnode.dev/destructuring

In this blog, I'm going to cover the spread and rest operator. Both use the same operator (...) but behave differently.

Trust me, the definition is really easy, but the behaviour is a little bit tricky. I will also give you some real-life examples, which will help you to understand the difference between them.

Let's start the blog.

What is the spread operator?

The spread operator spreads (expands) the elements of arrays or objects. That's it.

Example:

const arr = [1, 2, 3];

console.log(...arr); 
// 1 2 3

Here, arr values are expanded because of the spread operator and print. I can also say that:

Instead of passing the array, I am passing each value individually.

Spread with Arrays

Let's see some real use cases of the spread operator in arrays. This will help you to understand the spread operator in a better way.

1. Merging the array values into a single array

const arr1 = [1, 2];
const arr2 = [3, 4];

const merged = [...arr1, ...arr2];

console.log(merged);

Here, we expanded the arr1 and arr2 values into a single merged array.

2. Copying Arrays

const original = [1, 2, 3];
const copy = [...original];
console.log(copy);

Here, we make a copy of the original by expanding the value of the original array into a copy array. This is a shallow copy (not a reference)

I hope you understood the spread operator use cases with arrays. Let's see how the spread operator works in objects.

Spread with Objects

const user = { name: "Abhishek", age: 22 };

const updatedUser = {
  ...user,
  age: 23
};

console.log(updatedUser);

Yes, we can use the spread operator to update the keys. In the above example, user values (key: value) expanded, but there is an age key at the last, so that key overrode the previous one (age: 22)

And the rest of the working of the spread operator is the same as in an array.

What is Rest Operator?

Rest collects the values into one variable. That's it.

Here are some examples, which will help you to understand the rest operator.

1. Rest in Function Parameters

function sum(...numbers) {
    console.log(numbers)    
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log("sum: ", sum(1, 2, 3, 4))

Here, all the arguments passed in the sum function are collected into a single variable numbers, which is an array.

2. Rest in Array Destructuring

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

Here, the first value is separated, and the rest of the values are collected into the rest variable as an array.

This same concept also applies to the rest operator in the function parameter. If you use some variable before using the rest operator, then first those variables will be assigned, and then the rest of the value will be collected into the rest operator variable.

3. Rest in Object Destructuring

const user = { id: 1, name: "Abhishek", password: "1234" };

const { password, ...safeUser } = user;

console.log(safeUser);
// { id: 1, name: "Abhishek" }

This is the same as the above example, just the data type is changed. Here, the name is separated, and the rest of the values are collected in the form of an object.

Spread v/s Rest

That's it for this blog. These concepts are not very vast, but it's important that you use them so that your code is more readable and clean. I hope this blog helps you to understand the difference between the Spread and Rest Operator.

I will see you in another interesting and useful blog. Till then...

Stay consistent and keep grinding....

Peace✌️

Welcome to another blog in this JS blogs series. From this blog onwards, I'm going to cover those topics that are most used in our daily coding. So, it is very important to learn the pros and cons of these concepts along with the tiny nuances.

In this blog, I'm going to cover Destructing in JS. Destructuring is the most used concept that prevents repetitive code. I will cover each and everything about it, so be with me and complete this blog.

What is Destructuring?

Destructuring is a way to extract values from arrays or objects and store them in variables.

Instead of manually accessing the values one by one using the array or object, we extract the values and store them into a variable in one place, and later we use them.

Example:

const array = [10,20,30]
const [a,b,c] = array;

Destructuring Array

In the above example, I'm destructuring an array. Without the desctructuring this is how our code wil look like:

const a = array[0];
const b = array[1];
const c = array[2];  

Here, I'm repeating the array (variable name) and just tweaking the index to access the values. But with destructuring, I don't need to repeat it; I can extract the values in a single step.

const [a,b,c] = array;

// a = first index value
// b = second index value
// c = third index value

This is the same as the above code, but in a cleaner way because of destructuring.

But here's a question: what if I don't want to use a value? For example, if I don't want to use the first index value, how can I skip it?

Here is how you can skip values

const array = [10, 20, 30];

const [a, , c] = array;

console.log(a, c); // 10, 30

Now, you know how you can skip values. But if you accidentally define a variable, then you will get undefined if there is no value in that index.

const arr = [10, 20];
const [a,b,c] = arr; //c means 2nd index doesn't exist
console.log(a,b,c) // so you will get undefined

To prevent this undefined, you can give a default value in case you are not sure about the value.

Default values

const arr = [10, 20];

const [a, b, c = 30] = arr;

console.log(a, b, c); // 10 20 30

Destructuring Objects

Yes, you can also destruct the objects just like the array. In object destructuring, we use curly braces {}, and the variable name should exactly match the keys.

Without destructuring

const user = {
  name: "Abhishek",
  age: 22
};

const name = user.name;
const age = user.age;

Here, I'm repeating the user (object name) to each place where I need to access the value.

But in destructuring, just extract the value and use them.

With destructuring

const user = {
  name: "Abhishek",
  age: 22
};

const { name, age } = user;

Rename Variables

If the key is too long and you want to rename, then you can also do this using colon.

Example:

const user = {
  name: "Abhishek",
};

const { name: username } = user;

console.log(username); // Abhishek

Default values in Objects

In objects, we can also provide default values like in arrays. Just ensure that the variable name doesn't exist in the object as a key; otherwise, the value will be overridden.

const user = {
  name: "Abhishek",
};

const { name, age = 18 } = user;

console.log(age); // 18

Benifits of Destructuring

1. Cleaner code

2. Better Readability

3. Faster Development

That's it for this blog. The concept is tiny but very useful, it makes your code cleaner and readable. If you are not using destructuring in you project, then please do.

I will meet you in another blog with such useful concepts. Till then,

Stay consistent & keep grinding.

Peace ✌️

Welcome to another blog on JS. In this blog, I'm going to cover the two most useful data types in JS: Map and Set. You can use these as alternatives to objects and arrays to enhance performance.

Before diving deep into the Map & Set, let's first know the issues with Objects & Arrays:

Problems with Objects

1. Keys are only strings or symbols

2. No order maintained

3. No optimization at all.

4. No easy way to get the length.

const obj = {};
obj[1] = "Number key";
obj["1"] = "String key";

console.log(obj); // output - { '1': 'String key' }

Problems with Arrays

1. Duplicates allowed

2. Searching is slow

3. Removing items is inefficient

const guests = ["Ranveer", "Ranveer"]; //Duplicates allowed

If you want a data type that removes these problems, then you should use Map or Set.

What is a map?

A map is also like Object which store values in key-value pairs, but with some extra powers.

It solves all the problems I've mentioned above about the Object.

Here is how you can enter values in a map:

const mapObj = new Map()

//syntax
mapObj.set(key, value)

//Example
mapObj.set("name", 'abhishek');

//acces the value
mapObj.get(name) //ouput - abhishek

Here,

1. Map is a keyword to define a map object.

2. mapObj.set() is a function of map to store the key-value pair.

3. Key & value both can be any data type.

4. mapObj.get(keyName) to get the value of the key.

Key features of Map

1. Keys can be any data type

2. Maintains insertion order

3. Easy size access (mapObj.size)

4. Built for frequent updates

Important points you should know about the map

1. In a map, Objects are stored by reference, not value

   const map = new Map();
   
   map.set({}, "Object1");
   map.set({}, "Object2");
   
   console.log(map.size); // 2
   

2. Iteration is clean and predictable

   for(let [key, value] of mapObj){
       console.log(key, value);
   }
   

What is Set?

A set is just like an array with extra powers, like:

1. No duplicate values allowed

2. Maintain insertino order

3. Fast lookup (using has)

4. No indexing like arrays

//initializing a set object
const set = new Set();

//add value
set.add({name: "abhishek"});
set.add({name: "abhishek"});
set.add(1);

//size of this set
set.size // output = 3

Useful methods

//add method to insert values
set.add(value);

//delete to remove value from set
set.delete(value);

//has to check value is available or not
set.has(value)

//size to get the size of the array
set.size

Map vs Object

Set vs Array

When to use Map

• You need key-value pairs

• Keys are not just strings

• Frequent add/remove operations

• Need ordered data

When to use Set

• Removing duplicates

• You want unique values only

• Fast existence check

Real-life use case of a map and a set

1. Removing Duplicates (set)

2. Caching data (map)

3. Tracking visited items (set)

That's it for this blog. I hope it has clarified any doubts you had about maps and sets. After reading this, you should be able to choose the best data type for your task. I'll see you in another blog.

Until then... Stay consistent & keep grinding

Peace ✌️

Hello readers,

Welcome to another blog. So far, we have delved into callbacks, promises, and async/await in JavaScript. But without error handling, our code is incomplete. We are all familiar with those annoying errors. So in this blog, I will cover error handling and its methods.

Most people learn error handling like this:

“Put code in try, handle it in catch, and finally will always run.”

Sounds simple… but that’s only 10% of the real story.

Let’s break it properly.

What is an error?

In JavaScript, an error is not just “something went wrong”.

It’s a special object that stops normal execution.

Types of common runtime errors:

1. ReferenceError → variable not defined

2. TypeError → wrong operation on a value

3. SyntaxError → invalid code (caught before execution)

Example:

console.log(user.name); // user is not defined

Core Idea: try-catch is NOT for everything

A common misconception:

“Wrap everything in try-catch.”

Absolutely Wrong.

try...catch only works for:

• Synchronous runtime errors

It does NOT catch:

• Syntax errors (before execution)

• Async errors (like setTimeout, promises)

Example:

try {
    setTimeout(() => {
        throw new Error("Boom");
      }, 1000);
  } catch (e) {
     console.log("Caught"); //Won't run
  }

Flow of try-catch-finally

Let's see the code first:

try {
    Execute this block
} catch (err) {
    Runs ONLY if error occurs in try
} finally {
    ALWAYS runs (optional)
}

finally runs:

• after try (if no error)

• after catch (if error occurs)

• Even if you return inside try or catch, finally still runs

Example:

function test() {

    try {
        return "from try";
    } finally {
        console.log("finally runs");
    }
}
console.log(test());

Output:

from try
finally runs

Important Nuance:

1. Finally, it can override everything

This is something many devs don’t know:

function test() {
    try {
        return "try";

    } finally {
        return "finally";
    }
}

console.log(test());

2. catch is Optional (Yes, Really)

You can use try with only finally:

Example:

try{
   console.log("try block")
}finally{
   console.log("final block")
}

3. Optional catch parameter (Modern JS)

You don’t always need the error variable:

try {
    riskyCode();
} catch {
    console.log("Something failed");
}

4. Throwing Custom Errors (Correct Way)

Instead of throwing random values:

throw "error"; // bad practice

Use Error:

throw new Error("Invalid input");

You can also customize:

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

try-catch vs Promises (Very Important)

try-catch works with async/await, NOT plain promises.

For example, here, try-catch will not work

try {
    fetchData().then(() => {
        throw new Error("error");
    });
} catch (e) {
    console.log("Not caught");
}

Here is the correct working code:

try {
    await fetchData();
} catch (e) {
    console.log("Caught");
}

Nested try-catch

try {
    try {
        throw new Error("Inner error");
    } catch (e) {
        console.log("Handled inner");
    }
} catch (e) {
    console.log("Outer catch");
}

Once handled, it doesn’t propagate unless rethrown.

Re-throwing Errors

We can also throw errors. Throwing errors can be useful when you want to standardize errors and handle them from a single instance.

try {
    risky();
} catch (e) {
    console.log("Logging error");
    throw e; // rethrow
}

Importance of error handling

Without proper understanding:

• You think errors are handled… but they’re not

• Async bugs slip through

• Production crashes silently

With proper understanding:

• You know where errors are catchable

• You avoid false confidence

• You build robust systems

TLDR;

Think of it as:

• try → “Attempt risky code.”

• catch → “Handle only sync failures.”

• finally → “Run cleanup no matter what.”

Don't think of it as a sequence.

That's all for now. I hope you gained a clear understanding of the importance of error handling and the methods to manage errors effectively. Please share your feedback, and I'll see you in another in-depth blog soon.

Until then...

Stay consistent & keep grinding.

Peace✌️

Welcome to another blog of JS. In the last blogs, we explored callbacks and promises — and honestly… things started getting messy
Callbacks gave us callback hell, and promises improved things… but chaining .then() still felt a bit unnatural.

So today, we’re solving that problem.

Let’s understand async/await — the cleanest way to write asynchronous code in JavaScript.

Why Async/Await?

Promises were powerful, but:

• Too many .then() chains

• Harder to read for beginners

• Error handling wasn’t very intuitive

• Nested logic still looked confusing

For example:

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

Looks good... but imagine 10 steps, hard to manage, right?

That's why Async/Await is introduced to make async code:

• Look synchronous

• Easier to read

• Easier to debug

How does async work?

If you know that the task will be asynchronous, make the function async. To do this, simply write async before the function keyword, or in an arrow function, use the async keyword before the parentheses ().

Example:

async function getData() {
  return "Hello";
}

//or in arrow function
const getData = async () => {
    return "Hello";
}

And when you make a function async, then the function always returns a Promise, so you can also do this**:**

getData().then(console.log); // Hello

Even if you return a normal value → JS wraps it in a promise.

Await Keyword

await keyword does only one thing. It pauses execution until a promise resolves.

async function fetchUser() {
  const response = await fetch("https://api.com/user");
  const data = await response.json();
  console.log(data);
}

Here:

• JS waits for promise resolution

• Then moves to the next line

• Code looks synchronous, but is async internally

Error handling in async/await

With promises, we use catch like this:

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

But, in async-await code, we use try/catch. Like this:

async function getData() {
  try {
    const res = await fetchData();
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

This feels like a normal try/catch—much easier to understand.

I will write a separate blog on handling errors, so don't worry. Just follow me to get notifications.

Async/Await vs Promises

Examples of Promise & async/await

I hope everything is clear so far, but if you still have any doubts, here is a real-life example. Write them yourself and try to understand the flow.

Ordering Food

Promises Way:

orderFood()
  .then(cookFood)
  .then(serveFood)
  .then(eatFood)
  .catch(handleError);

Async/Await Way:

async function enjoyFood() {
  try {
    const order = await orderFood();
    const cooked = await cookFood(order);
    const served = await serveFood(cooked);
    await eatFood(served);
  } catch (err) {
    handleError(err);
  }
}

When Should You Use Async/Await?

• You want clean, readable code

• You have sequential async steps

• You need better error handling

• You want code that looks synchronous

Avoid or be careful when:

• You need parallel execution → use Promise.all

• In very small one-liners → promises are fine

That's it for this blog. I hope async/await, which is nothing but syntactical sugar now, makes sense to you. Now, you have completed this journey:

Callbacks → Promises → Async/Await

And honestly…
Async/await is where things finally start to feel natural.

In the next blog, we can dive deeper into handling the error in JS.

Until then...

Stay consistent and keep grinding.

Peace ✌️

Welcome back to another blog. In the last blog, we talked about callbacks - why they exist and the problems they bring (callback hell, pyramid of doom, dependency chaos).

If you haven't read that yet, read here:

https://js-with-abhishek.hashnode.dev/callbacks

Now think about this

• What if we could handle async code in a cleaner way?

• What if we could avoid deeply nested callbacks?

• What if our code looked more like normal step-by-step logic?

That’s where Promises come in.

What Problem Do Promises Solve?

Let’s recall the classic callback problem:

orderFood(function(order) {
  makePayment(order, function(payment) {
    deliverFood(payment, function(delivery) {
      console.log("Delivered:", delivery);
    });
  });
});

This creates:

• Nested structure (callback hell)

• Hard to read

• Hard to debug

• Error handling becomes messy

Promises solve this by giving us:

• Better readability

• Linear flow of async code

• Centralized error handling

What is a Promise?

A Promise is basically a future value.

It represents:

“I don’t have the result right now… but I will give it to you later.”

Example:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Food delivered ");
  }, 2000);
});

Here:

• resolve → success

• reject → failure

We will understand this code snippet ahead.

Promise States

Every promise has 3 states:

1. Pending

   1. Initial state.

   2. Work is still going on

2. Fulfilled

   1. Operation completed successfully,

   2. resolve() is called

3. Rejected

   1. Operation failed

   2. reject() is called

Think of it like ordering food:

• Pending → Order placed

• Fulfilled → Food delivered

• Rejected → Order canceled

Basic Promise Lifecycle

const orderFood = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Order successful");
  } else {
    reject("Order failed");
  }
});

Now consuming it:

const orderFood = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Order successful");
  } else {
    reject("Order failed");
  }
});

Flow:

1. Promise created

2. Async work happens

3. Either:

   • resolve() → .then() runs

   • reject() → .catch() runs

Handling Success and Failure

Success → .then()

promise.then((data) => {
  console.log("Success:", data);
});

Failure → .catch()

promise.catch((error) => {
  console.log("Error:", error);
});

Always Run → .finally()

promise.finally(() => {
  console.log("Done (success or failure)");
});

Promise Chaining (Most Important)

This is where promises shine.

Instead of nesting, we chain:

orderFood()
  .then((order) => makePayment(order))
  .then((payment) => deliverFood(payment))
  .then((delivery) => {
    console.log("Delivered:", delivery);
  })
  .catch((error) => {
    console.log("Something went wrong:", error);
  });

What changed?

• No nesting

• Clean flow

• Looks synchronous (but isn’t!)

So yeah… that’s Promises in a nutshell

We started with messy callbacks…
Moved to cleaner, structured async handling…
And saw how promises make our code readable, predictable, and scalable.

But wait…
Promises themselves come with some powerful built-in methods that can take things to the next level — especially when dealing with multiple async operations.

Things like:

• Running multiple promises together

• Handling the fastest or all results

• Managing failures smartly

I’ve already covered all of that in detail in my dedicated blog on Promise Methods

🔗 Read it here:
https://js-with-abhishek.hashnode.dev/

And in the next blog… We’ll take one more step forward:
async/await — making async code look like sync magic

Stay consistent and keep grinding.

Peace ✌️

In my previous blog, we explored how JavaScript executes code—Sync vs. Async—and why things don't always run in the order we expect.

If you haven’t read it yet, I highly recommend checking that out first. Here is the link:

https://js-with-abhishek.hashnode.dev/sync-async

Because today’s topic is built on top of that understanding…

Here are some questions for you...

• How does JavaScript handle tasks like API calls or timers?

• How can one function “wait” for another without blocking everything?

• And why do we pass functions inside functions? 🤯

That’s where callbacks enter the scene, and this blog is all about callbacks.

Before jumping into callbacks... let's understand this first

Functions are just values in JavaScript

In JavaScript, functions are first-class citizens.
That means:

• You can store them in variables

• Pass them as arguments

• Return them from other functions

Example:

function greet() {
  console.log("Hello!");
}

function execute(fn) {
  fn(); // calling the function passed as argument
}

execute(greet);

Here, greet is passed as a value.

What is a Callback Function?

In a simple way, the callback function is:

A function that is passed as an argument to another function and is executed later

Example:

function processUser(name, callback) {
  console.log("Processing user:", name);
  callback();
}

function sayWelcome() {
  console.log("Welcome!");
}

processUser("Abhishek", sayWelcome);

Here:

• sayWelcome is the callback

• It runs after processUser does its job

Why do callbacks exist?

Now comes the real question — why do we even need them?

Problem without callbacks

JavaScript is single-threaded. It can do only ONE thing at a time

So what happens with slow tasks?

• API calls

• File reading

• Timers

If JS waits for them → everything freezes

Solution: Asynchronous programming

Instead of blocking, JavaScript says:

“Hey, I’ll continue my work… you call me back when you're done.”

And that “call me back” is exactly what a callback is.

Example

console.log("Start");

setTimeout(() => {
  console.log("Inside timeout");
}, 2000);

console.log("End");

Output:

Start
End
Inside timeout

The function inside the setTimeout is a callback.

Passing Functions as Arguments

Callbacks work because functions can be passed around like data.

Example:

function calculate(a, b, operation) {
  return operation(a, b);
}

function add(x, y) {
  return x + y;
}

console.log(calculate(2, 3, add)); // 5

• add is passed as a callback

• calculate decides when/how to execute it

Use case of callbacks

1. Timers

setTimeout(() => {
  console.log("Executed after delay");
}, 1000);

2. API Calls

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

.then() takes a callback. Don't worry, this code snippet will be covered in the next blog.

3. Event Handling

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

The function runs only when an event happens.

Problems with callbacks

Up until now, callbacks look clean and powerful…

But in real-world apps, things don’t stay this simple

Let’s understand this with a relatable example

To understand the problems with callbacks, imagine this scenario

Imagine you're building a system like Zomato/Swiggy

Steps involved:

1. Place Order

2. Process Payment

3. Assign Delivery Partner

4. Deliver Order

Important: Each step depends on the previous one

• No payment → no delivery

• No order → nothing happens

Let’s implement this using callbacksLet’s implement this using callbacks

function placeOrder(callback) {
  setTimeout(() => {
    console.log("Order placed");
    callback();
  }, 1000);
}

function processPayment(callback) {
  setTimeout(() => {
    console.log("Payment successful");
    callback();
  }, 1000);
}

function assignDelivery(callback) {
  setTimeout(() => {
    console.log("Delivery partner assigned");
    callback();
  }, 1000);
}

function deliverOrder() {
  setTimeout(() => {
    console.log("Order delivered");
  }, 1000);
}

// Flow
placeOrder(() => {
  processPayment(() => {
    assignDelivery(() => {
      deliverOrder();
    });
  });
});

Problem number 1: Pyramid of Doom

Look at that structure carefully…

placeOrder(() => {
  processPayment(() => {
    assignDelivery(() => {
      deliverOrder();
    });
  });
});

This shape is called Pyramid of Doom (aka Callback Hell)

As steps increase → nesting increases

Imagine adding:

• Order tracking

• Notifications

• Refund logic

Your code becomes a right-slanting triangle

• Hard to read

• Hard to maintain

• Easy to break

Problem 2: Function Dependency

Each function depends on the previous one:

• processPayment depends on placeOrder

• assignDelivery depends on processPayment

• deliverOrder depends on assignDelivery

This creates tight coupling

Why is this bad?

• You can’t reuse functions independently

• You must follow the strict order

• Changing one step may break the entire chain

Problem 3: Inversion of Control

This is a subtle but very important issue.

When you pass a callback:

placeOrder(() => {
  processPayment(() => {
    ...
  });
});

You are giving control of your function to another function

Now you’re trusting:

• Will it call your callback?

• Will it call it once or multiple times?

• Will it call it at the right time?

You lose control over execution

Problem 4: Error Handling Nightmare

Now imagine something fails…

placeOrder(() => {
  processPayment((err) => {
    if (err) {
      console.log("Payment failed");
    } else {
      assignDelivery(() => {
        deliverOrder();
      });
    }
  });
});

Error handling becomes:

• Scattered

• Repetitive

• Ugly

And worse… You must handle errors at every level

Callbacks were powerful… but:

• They don’t scale well

• They make code messy

• They reduce readability

And That’s Why Promises Exist

To solve:

• Callback hell

• Dependency issues

• Error handling mess

• Inversion of control

JavaScript introduced Promises

That's it for this blog. I hope you understood callbacks and the problems associated with them. In the next blog, I will discuss what promises are and how they solve these callback issues.

Until then...

Stay Consistent and keep grinding

Peace. ✌️

Welcome back to another blog. In the previous post, I explained the call(), apply(), and bind() methods, highlighting how they can change the context of this and their practical applications.

If you haven't read yet, then READ HERE

Now, let me ask you something

• Why does your app not freeze when fetching data from an API?

• How can JavaScript handle timers, clicks, and network requests at the same time if it’s single-threaded?

• And what really happens when we say something is “async”?

If you’ve ever been confused by these, this blog is going to clear things up.

Let's start.

What is Synchronous Code?

Synchronous code means

Do one task at a time, in order

console.log("Start");
console.log("Processing...");
console.log("End");

Output:

Start
Processing...
End

Everything runs step-by-step — no surprises.

You can think of it as if you are standing in a queue, then

• You order

• You wait

• Only after finishing, the next step happens

You are blocked until the current task completes.

What is Asynchronous Code?

Now comes the interesting part.

Asynchronous code means

Start a task, but don’t wait for it to finish

console.log("Start");

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

console.log("End");

Start
End
Inside Timeout

Even though setTimeout is written earlier, it runs later.

You can think of it as:

At a restaurant:

• You order food

• You don’t stand in the kitchen 😄

• You sit, talk, scroll…

• Food arrives when ready

That’s non-blocking behavior

Why Do We Even Need Async in JavaScript?

To understand the importance of async, imagine this scenario where everything worked synchronously

• You click a button → app freezes

• API call takes 5 seconds → UI stuck for 5 seconds

• Large computation → browser becomes unresponsive

Not a great experience, right?

This is exactly why asynchronous behavior exists

Blocking vs Non-Blocking (The Real Difference)

Blocking (Synchronous)

• Execution stops until the task finishes

• Can freeze your app

while (true) {}
console.log("Never runs");

Non-Blocking (Asynchronous)

• Execution continues

• Task completes in the background

This is what makes modern web apps smooth.

Real-life example that can be used in daily life

1. API Calls

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data));

console.log("After fetch");

Output:

After fetch
<API data later>

2. Timers

setTimeout(() => console.log("Runs later"), 1000);
console.log("Runs first");

These are asynchronous because:

• They depend on external systems (network, browser timers)

• JS doesn’t want to wait and block everything

Problems with Blocking Code

If JavaScript were only synchronous:

• UI would freeze

• Slow user experience

• Cannot handle multiple tasks

Async solves all of this.

How does async work behind the scenes?

JavaScript is a single-threaded language, so a question definitely arises: how does non-blocking (asynchronous) code work?

Without going too deep, here are the steps:

• JS runs your code in a call stack

• Async tasks go to browser APIs

• Once done → they come back via the event loop

I will cover this part in depth in some other blog. This is just an overview.

That's it for this blog. I hope it helps you understand the difference between synchronous and asynchronous code. But now comes the real question:

“If JavaScript doesn’t wait… how do we get results back?”

That’s where callbacks come in —
And trust me, they introduce a whole new set of problems.

I will cover this in the next blog, till then,

Stay consistent and keep grinding.

Peace ✌️

Welcome to another blog. Until now, I have covered all the basics of JavaScript, and thank you so much for appreciating my effort.

In this blog, I'm going to cover the most important and confusing topic of JavaScript, which is "this." It is the most confusing topic of JavaScript, but after reading this blog, you will have a clear understanding of this and its behavior.

Let's understand this with a Bollywood example.

Imagine Ranveer Singh (yup, our Dhurandhar)

He is an actor, and his real name is Ranveer Singh, but something interesting happens in movies.

In one movie, he is Bajirao.

In one movie, he is Alauddin Khilji.

In another movie, he is Hamza.

The actor is the same, but his identity changes depending on the movie he is acting in.

In JavaScript, functions behave exactly like actors.

And the movie they are acting in determines who they represent at that moment.

That changing identity is exactly what this it is.

this represents the object that is calling the function. It gives context to the functions or class.

So think of it like this:

Actor (Function) → Ranveer Singh
Movie (Object) → Bajirao Mastani / Gully Boy
Role (this) → Bajirao / Hamza

this inside Objects

this Inside an object means Ranveer works in a movie, and this value will change according to that movie.

Example:

const bajiraoMovie = {
  heroName: "Bajirao",
  actor: "Ranveer Singh",
  introduce() {
    console.log("I am", this.heroName);
  }
};

bajiraoMovie.introduce(); // I am Bajirao

//another movie
const gullyBoyMovie = {
  heroName: "Murad",
  actor: "Ranveer Singh",
  introduce() {
    console.log("I am", this.heroName);
  }
};

gullyBoyMovie.introduce(); //I am Murad

Here, you can see the movie changes the value of this change, but the function (introduce) is the same.

This is how this it works in JavaScript.

This doesn't depend on where the function is written, it depends on who is calling the function.

this inside the Global Context

console.log(this);

In this code blog, this is not called inside any object or function, so what do you think should be the output?

This output also depends on the environment where JS is running, because JS runs in different environments like browsers, mobile, desktops, etc.

So, the this keyword returns a Global Object whose value completely depends on the environment.

For a browser: the Global Object is equal to window, so you will get window as output.

For a Node environment, the Global Object is equal to global, so you will get global as output.

Example:

function x(){
    console.log(this)
}
window.x(); //output - window (becuase window is calling)

Just like this, you can imagine the above code snippet.

this Keywords also behave differently in strict and non-strict mode

There are two modes in JS: strict and non-strict.

console.log(this)

So, if you run the above snippet in strict mode, then you will get undefined, but the same code will give window as output in non-strict mode.

The reason is this Substitution

this Substitution:

If the value of this is undefined or null, then this keyword will be replaced with the Global Object. This only works in non-strict mode.

this inside normal functions

 function introduce() {
  console.log("Hello, I'm",  this.name);
}

let user1 = { name: "abhishek", introduce };
let user2 = { name: "agam", introduce };

user1.introduce(); // Hello, I'm abhishek
user2.introduce(); // Hello, I'm agam

The above code snippet explains that inside the function, this behaves according to the caller; it doesn't depend on where it is written. The output varies based on which user is calling the introduce function.

this Inside Arrow Functions

const introduce = () => {
  console.log("Hello, I'm", this.name);
};

let user1 = { name: "abhishek", introduce };
let user2 = { name: "agam", introduce };

user1.introduce(); // Hello, i'm undefined
user2.introduce(); // Hello, i'm undefined

Arrow functions don't have their own this. Arrow functions take this value from their lexical environment where they exist. That's why here we are getting undefined because introduce is in global and in global this.name value is undefined.

What is the lexical environment?

In simpler words:

Lexical Environment means where the function is written. That's it.

In the above example Introduce is written in the global, and the global value of this in the browser is Windows.

console.log(this) // output window (in global)
console.log(this.name) // it equal to window.name = undefined

another example of an arrow function, but in a different lexical environment

let user = {
  name: "abhishek",
  greet() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

user.greet(); // abhishek

In the above example, the arrow function is written inside the greet() function, so the lexical environment of the arrow function is the greet() function. Since greet() is a normal function, it has access to the name value, which is why we get the output "abhishek."

That's it about this the keyword. I hope this blog helps you to clear your doubts related to this keywords in JavaScript. Here is the final mental model

in normal function = who is calling me that is this
in arrow function = what was i created decides this
in global this value depends on environment. 

Now you know that "this" provides context, but did you know you can change it? Yes, you can alter the context and even borrow functions from other objects. Sounds intriguing, right? My next blog will dive into this topic (call, apply, and bind). Until then, see you soon. Keep reading and exploring. Peace.

Welcome to another blog in the JS series. In the previous blog, I covered this in depth and in a very simple way. The this keyword in JS is really confusing, but I've tried to make that easy with a real-life example. If you have not read that blog yet, click here and read that blog.

If someone asks me about this in one line, then I would say:

This keyword in js is used to provide the context

But do you know? We can change the context of this the keyword using methods like callI(), apply() and bind(). Yes, you heard write and this blog is all about these methods.

Before jumping into these methods, let's first understand:

Why change the context?

Problem 1: this gets lost

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

const greetFunc = user.greet; //detached function

greetFunc(); 

Output:

Hello, undefined

Why?

Because:

• user.greet() → this = user

• greetFunc() → koi object call nahi kar raha → this lost

• In detached mode, we lost this value. So, manually, we need to change the context of the this

Problem 2: Function Borrowing Needed

const user1 = {
  name: "Abhishek",
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const user2 = {
  name: "Rahul"
};

If we want user2 to also greet, then, without context control:

user2.greet = function () {
  console.log(`Hello, ${this.name}`);
};

Again, we have to write the same function in another object also. But it can be done easily by context switching; we don't need to write the same function for every object.

Problem 3: Reusability Issue

function greet() {
  console.log(`Hello, ${this.name}`);
}

We want this function to be used with multiple objects, and for that, we have to pass the context of this because by default this has no context.

Key Reasons to change the context

• Fix lost this

• Borrow functions from other objects

• Avoid duplicate code

• Reuse the same function with different data

• Control which object should execute the function

• Handle callbacks and delayed execution properly

In JavaScript, there are 3 ways to change the context and those are:

1. call()

2. apply()

3. bind()

1. call()

call() allows you to call a function immediately and set this manually

Syntax

functionName.call(thisArg, arg1, arg2)

Example:

function greet() {
  console.log(`Hello, ${this.name}`);
}

const user1 = { name: "Abhishek" };
const user2 = { name: "Rahul" };

greet.call(user1); // Hello, Abhishek
greet.call(user2); // Hello, Rahul

With arguments

const user = { 
  name: "Abhishek", 
  introduce: function (age, city) {
    console.log(`\({this.name} is \){age} years old from ${city}`);
  }
};

const user2 = { name: "Vivek" };

// Normal call
user.introduce(22, "Patna");

// Borrowed call
user.introduce.call(user2, 22, "Ranchi");

Key Points

• Function executes immediately

• Arguments are passed individually

• Most useful for quick function borrowing

2. apply()

apply() is almost the same as call(). The only difference is in argument passing; it takes an array for its arguments, while the rest is the same as call.

Syntax:

functionName.apply(thisArg, [argsArray])

Example:

function introduce(age, city) {
  console.log(`\({this.name} is \){age} years old from ${city}`);
}

const user = { name: "Abhishek" };

introduce.apply(user, [22, "Patna"]);

Key Points

• Executes immediately

• Arguments are passed as an array

• Useful when data is already in array form

3. bind()

bind() does not execute immediately like call() and apply(). Instead of executing immediately, it returns a function with a changed context.

Syntax:

const newFunc = functionName.bind(thisArg)

Example:

function greet() {
  console.log(`Hello, ${this.name}`);
}

const user = { name: "Abhishek" };

const boundFunc = greet.bind(user);

boundFunc(); // Hello, Abhishek

With Arguments:

function introduce(age) {
  console.log(`\({this.name} is \){age}`);
}

const user = { name: "Abhishek" };

const bound = introduce.bind(user);

bound(25);

Key Points

• Does not execute immediately

• Returns a new function

• Useful in callbacks, event handlers, setTimeout, etc.

Difference Between call(), apply(), and bind()

TLDR;

Understanding this is all about understanding who is calling the function.

And when JavaScript does not behave the way we want, we use:

• call()

• apply()

• bind()

to take control.

In simple words:

We don’t let JavaScript decide this,
We decide it.

That's it for this blog! I hope it helps you understand the call, apply, and bind methods. I'll see you soon in another blog with just as much depth.

Until then, keep grinding and stay consistent.

Peace. ✌️

But when applications grow larger, we need a structured way to create many similar objects.

That’s where Object-Oriented Programming (OOP) comes into play.

OOP

Object-Oriented Programming is a programming style where we organize code using objects and classes.

Instead of writing separate variables and functions everywhere, we group related data and behavior together.

For example:

• A Car has properties → color, brand, speed

• A Car has behaviors → start(), stop(), accelerate()

OOP allows us to represent these things as objects in code.

This approach helps with:

• Code organization

• Code reusability

• Easier maintenance

• Better structure for large applications

To understand OOP easily, think about building a house.

A builder first creates a blueprint.

From that blueprint, multiple houses can be built.

Example:

Blueprint → House 1
Blueprint → House 2
Blueprint → House 3

All houses follow the same structure, but they can have different colors, sizes, or owners.

In programming:

Blueprint → Class
House → Object (Instance)

So a class defines the structure, and objects are created from that structure

Class in JS

A class is like a blueprint for creating objects.

It defines:

• What properties will the object have

• What actions (methods) the object can perform

Example:

class Person {

}

Right now, the class is empty. It just defines a structure.

We need to add properties and methods.

Creating Objects using classes

To create objects from a class, we use the new keyword.

Example:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

const person1 = new Person("Abhishek", 22)
const person2 = new Person("Rahul", 25)

console.log(person1)
console.log(person2)

outptut

Person { name: "Abhishek", age: 22 }
Person { name: "Rahul", age: 25 }

Here:

• Person is the class

• person1, and person2 are objects created from that class.

Understanding the Constructor

A constructor is a special method used to initialize objects.

It runs automatically when a new object is created.

Example:

class Car {
  constructor(brand, color) {
    this.brand = brand
    this.color = color
  }
}

const car1 = new Car("Tesla", "Red")

Here

brand → Tesla
color → Red

The constructor assigns values to the object using this.

this refers to the current object being created.

Methods Inside a Class

Classes can also contain methods.

Methods are simply functions inside a class.

Example:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`)
  }
}

const user = new Person("Abhishek", 22)

user.greet()

Hello, my name is Abhishek

Here greet() is a method of the Person class.

Why OOP is Useful

Object-Oriented Programming helps developers:

• Reuse code efficiently

• Organize large programs

• Model real-world systems easily

• Maintain and extend applications

Most modern applications rely heavily on OOP concepts.

Understanding these concepts is important because many real-world applications rely on object-oriented design to keep the code clean, scalable, and maintainable.

Practice creating your own classes like Student, Car, or Person, and try adding different properties and methods to them. The more you experiment, the clearer these concepts will become.

That's it for this blog. In the next blog, we will dive into call, apply, and bind, and see how JavaScript allows us to use the methods of one object with the properties of another object.

Welcome back to another blog. We have reached the most important part of JS. JS is all about objects; it is also said that everything in JS is an object. This is the 8th blog of my JS series, and thank you so much for showing so much love to my previous blogs. They are really in-depth and worth reading. You can click on the JS series above and read the blogs.

Let's start this blog

Object

Whatever you see or imagine is an object. Anything that can have height, width, or properties can be an object. In terms of programming language, an object is a collection of related data stored as key-value pairs.

Each value in an object is associated with a key (also called a property).

Think of it like storing information about a person.

Name → Abhishek
Age → 22
City → Ranchi

const person = {
  name: "Abhishek",
  age: 22,
  city: "Ranchi"
}

Here:

• name, age, and city are keys

• "Abhishek", 22, and "Ranchi" are values

So the structure looks like this:

key : value

This is why objects are often called a key-value data structure.

Why Do We Need Objects?

Let’s imagine storing a person's details using variables.

const name = "Abhishek"
const age = 22
const city = "Ranchi"

This works, but these variables are not connected.

Objects help us group related information together.

const person = {
  name: "Abhishek",
  age: 22,
  city: "Ranchi"
}

Now all the information related to a person is stored in one place.

This makes code:

• easier to read

• easier to manage

• easier to extend

Creating Objects

Objects are created using curly braces {}.

Basic syntax:

const objectName = {
  key1: value1,
  key2: value2
}

Example:

const person = {
  name: "Abhishek",
  age: 22,
  city: "Ranchi"
}

Accessing Object Properties

There are two ways to access object properties:

1. Dot notation

This is the most commonly used method.

console.log(person.name)
console.log(person.age)

output:

Abhishek
22

1. Bracket Notation

This is less commonly used, but when you need to access properties dynamically, this is the only way to access or set a property.

console.log(person["city"])

output:

Ranchi

Updating Object Properties

Updating object properties is very easy. You can use dot notation or bracket notation to assign a new value.

person.age = 23

Now the object becomes:

{
  name: "Abhishek",
  age: 23,
  city: "Ranchi"
}

Adding New Properties

We can also add new properties to an object.

person.country = "India"

Now our object becomes:

{
  name: "Abhishek",
  age: 23,
  city: "Ranchi",
  country: "India"
}

Deleting Properties

To remove a property, we use the delete keyword.

delete person.city

Now the object becomes:

{
  name: "Abhishek",
  age: 23,
  country: "India"
}

Looping Through Object Keys

To iterate over an object, we commonly use the for...in loop.

Example:

const person = {
  name: "Abhishek",
  age: 22,
  city: "Ranchi"
}

for (let key in person) {
  console.log(key, person[key])
}

Output:

name Abhishek
age 22
city Ranchi

Here:

• key gives the property name

• person[key] gives the corresponding value

Array V/S Object

That’s it for this blog. I hope it was helpful and that you now have a clear understanding of objects in JavaScript.

In the next blog, we will explore Object-Oriented Programming (OOP) in JavaScript. Even though OOP in JavaScript is mostly considered syntactic sugar, it is still an important concept to understand.

So stay tuned, keep practicing, and keep building.

Welcome back to another blog. In the previous blog, I wrote about the functions and some quirks of the functions in JS. I hope you enjoyed that blog. This blog is a continuation of the previous one, and I'm going to tell you about Arrow functions. Arrow functions are one of the most used features of JS. They make writing functions shorter, cleaner, and easier to read.

In modern JavaScript, arrow functions are used everywhere — especially in React, Node.js, and functional programming patterns.

So let's understand them step by step.

Arrow Functions

Arrow functions are a shorter syntax for writing functions in JavaScript.

They were introduced in ES6 (ECMAScript 2015) to reduce the amount of code needed to write functions.

Instead of writing the traditional function keyword, we use an arrow (=>).

Normal Function

function greet(name) {
  return "Hello " + name;
}

Arrow Function

const greet = (name) => {
  return "Hello " + name;
};

Normal Functions vs Arrow Functions

Basic Arrow Function Syntax

The general syntax of an arrow function looks like this:

const functionName = (parameters) => {
  // code
};

Example:

const add = (a, b) => {
  return a + b;
};

console.log(add(2, 3));

Output

5

Here:

• add is the function name

• (a, b) are parameters

• => defines the arrow function

• {} contains the function body

Arrow Function with One Parameter

When there is only one parameter, parentheses are optional.

Example

const square = num => {
  return num * num;
};

console.log(square(4));

output:

16

This makes the code shorter and easier to read.

Implicit Return vs Explicit Return

Arrow functions have a powerful feature called implicit return.

Let's understand this step by step.

Explicit Return

When we use {}, We must use the return keyword.

const add = (a, b) => {
  return a + b;
};

This is called explicit return.

Implicit Return

If the function has only one expression, we can remove {} and return.

const add = (a, b) => a + b;

console.log(add(2, 3));

Output:

5

Using Arrow Functions with Arrays

Arrow functions are very commonly used with array methods like map, filter, and reduce.

Example:

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

const squares = numbers.map(num => num * num);

console.log(squares);

output:

[1, 4, 9, 16]

Here, we used an arrow function inside map() to square every number.

This is one of the most common real-world uses of arrow functions.

That's it for this blog.

In the next blog, we will dive deeper into JavaScript objects. We'll explore how functions in JavaScript can also behave like objects and learn different ways to create objects in JavaScript.

Trust me, this is where JavaScript starts getting really interesting.

Until then, keep learning and keep building 🚀

Welcome to another in-depth blog; this is my 6th blog in this JS series. So far, we have covered topics like variables, operators, if-else, arrays, and array methods. But have you ever considered what you would do if you needed to use the same logic elsewhere? Would you write the same code again? What if you had to use the same logic in multiple features?

So, you can't write the same code everywhere because:

1. It is repetitive code.

2. If you need to change something in the logic, you have to update every single place you've written it.

3. If your peers also want to use that logic, they have to copy-paste or write the same logic again.

We need a solution to resolve these repetition problems, and today's blog is all about this problem resolution: functions. In JS, functions have some extra features compared to other languages, so it is important to learn them in depth.

let's start.

What is a function?

A function is simply a reusable block of code that performs a specific task.

Instead of writing the same code again and again, we can wrap it inside a function and reuse it whenever needed.

Without functions

let a = 5
let b = 10
console.log(a + b)

let x = 20
let y = 30
console.log(x + y)

We are repeating the same logic.

With function:

function add(num1, num2) {
  return num1 + num2
}

console.log(add(5, 10))
console.log(add(20, 30))

Now the logic is written once and reused multiple times.

That’s the power of functions.

Function Declaration

A function declaration defines a named function using the keyword.

Syntax:

function functionName(parameters) {
   // code
}

Example:

function multiply(a, b) {
  return a * b
}

console.log(multiply(4, 5))

This is the most traditional way of defining functions in JavaScript.

Function Expression

In JavaScript, functions can also be stored inside variables. This is called a function expression.

const variableName = function(parameters) {
   // code
}

Example:

const multiply = function(a, b) {
  return a * b
}

console.log(multiply(4, 5))

Function Declaration vs Function Expression

Hoisting

In the first blog, I also described a little about hoisting, but here I will explain it in depth. Hoisting is the memory preparation phase of JavaScript. As you run your JavaScript file, the JS engine first scans your file and starts to prepare the memory, which is known as hoisting. This occurs even before running your code. In hoisting, function declarations are stored as a reference, meaning you can use the function declaration even before defining it because the function reference is already stored.

Example:

sayHello()

function sayHello() {
  console.log("Hello from function declaration")
}

output:

Hello from function declaration

Even though the function is written after the call, it still works.

Why?

Because function declarations are hoisted completely.

However, when you use a function expression, hoisting doesn't store it as a function reference because you use let, const, or var. Therefore, hoisting works differently with function expressions.

Example:

sayHello()

const sayHello = function() {
  console.log("Hello from function expression")
}

output:

ReferenceError

Some Interesting JavaScript Function Quirks

JavaScript functions have some behaviors that surprise many developers.

Let's look at a few.

1. A function can be stored in a value

example:

function greet(name) { 
    console.log("Hello, ", name) 
}
const sayHello = greet
sayHello("Abhishek")

This happens because functions are treated like values in JavaScript.

2. Functions Can Be Passed as Arguments

function greet(name) {
  return "Hello " + name
}

function processUser(callback) {
  console.log(callback("Abhishek"))
}

processUser(greet)

output:

Hello Abhishek

3. Function can return a function

function outer() {
  return function() {
    console.log("Inner function")
  }
}

const result = outer()
result()

output

Inner function

4. Functions have a length property

function add(a, b, c) {}

console.log(add.length)

output:

3

When to use which type?

Use Function Declaration When

• You are defining core logic

• The function should be available throughout the scope

• You want a cleaner, readable structure

Use a Function Expression when

• You want to store functions in variables

• You are creating callbacks

• You want more control over execution timing

That’s it for this blog. In the next one, we’ll dive deeper into arrow functions. Until then, keep learning and building.

Functions are more than just reusable blocks of code. In JavaScript, they behave in powerful and sometimes surprising ways.

Understanding function declarations, function expressions, and hoisting helps you write more predictable and maintainable code.

And remember:
In JavaScript, functions are not just code — they behave like values.

In the upcoming blog, we’ll explore why functions can be treated like objects in JavaScript and what that actually means.

If you enjoyed this blog or learned something new, feel free to share it and drop your feedback.

See you in the next one 🚀

Welcome to another blog. This blog is part of the previous blog, where we discussed the basics of arrays. If you have read that blog yet, here you can read that: Arrays Basics

In this blog, I'm going to cover the methods of arrays. These methods are very important and make the JS array powerful.

These methods will allow you to transform, filter, search, and manipulate data with very little code.

Let's start

1. Push()

The push method is used to insert elements at the end of an array. You can pass multiple elements at a time.

let arr = [1,2,3,4];

//push 5 & 6
arr.push(5,6)

//print the array
console.log(arr)

1. POP()

The pop method is used to extract the last element of the array. It returns the poped (last) element of the array

let arr = [1,2,3,4];

let poppedValue = arr.pop();

console.log("Popped Value: ", poppedValue)
console.log("array: ", arr)

1. shift() & unshift

shift and unshift also work like push and pop, but they insert or pop the element from the start (index 0).

These are called shift and unshift because, due to these operations, all the values of the array shift.

Shift: Returns the first element of the array and remove that from the array. The rest of the elements are shifted to index 0

let arr = [1,2,3,4,5];

let shiftedElement = arr.shift();

console.log("Shifted Value: ", shiftedElement)
console.log("array: ", arr)

unshift: It inserts the element at the 0th index and shifts the rest of the elements from 0.

let arr = [1,2,3];

arr.unshift(-1,0);

console.log("array: ", arr)

1. Map()

Map is one of the most used methods of array. It transforms each element of your array and returns the array with transformed elements.

How does it work?

1. First, it calculates the length of the array.

2. It takes a callback function where you write the logic of the value transformation

3. It iterates through each element of the array and transforms those values according to the callback function.

4. At the end, it returns the new transformed array.

syntax:

array.map(() => ())

Example:

let arr = [10, 20, 30, 3, 5]
let newArray = arr.map((v) => v*2);
console.log(newArray)

Note:

1. Map always returns the array with the same length as the original array

2. In the example, there is only one statement, so no need to wrap it under the curly braces. You can wrap, but if you wrap, then you have to write a return statement to return the value.

5. Filter()

Filter also returns an array and takes a callback function, but it returns only those values that satisfy the condition you passed in the callback function.

It filters the array values based on the condition you pass.

let arr = [10, 20, 9,  30, 3, 5]
console.log("Original Array: ", arr)

let filteredArray = arr.filter((v) => v%5 === 0);

//returns an array with elements which are divisible by 5
console.log("transformed array",filteredArray)

6. Reduce()

Reduce function is one of the powerfull method of an array. It reduces the array into a single value.

It takes a callback function with an argument:

1. accumulator: the result value (it can be any data type)

2. iterator: current value (in each iteration)

let arr = [1,2,3,4,5]
console.log("Original Array: ", arr)

let sum = arr.reduce((acc, iterator) => acc+iterator, 0);

//sum of each element
console.log("sum: ", sum)

7. ForEach()

For each method is another way to iterate over an array. It go though through each element of the array and performs the task you pass as a callback function.

This is a forEach loop, which means you can't use break or continue. It must iterate through each element of the array.

It doesn't return any value.

let arr = [1,2,3,4,5]
console.log("Original Array: ", arr)

arr.forEach((element) => console.log(element * 2));

In the above example, I have printed each element twice.

Final Thoughts

JavaScript arrays are much more powerful than simple data containers.

Once you master methods like:

• map()

• filter()

• reduce()

You will write cleaner, shorter, and more expressive code.

These methods are also heavily used in React, Node.js, and modern JavaScript development.

So mastering them is not optional — it’s essential.

That's it for this blog. I hope this helped you understand how powerful JavaScript array methods are and how they can make your code cleaner and easier to write.

Instead of writing long loops for everything, methods like map(), filter(), and reduce() allow us to work with arrays in a much more expressive and modern way. These methods are heavily used in real-world JavaScript applications, especially in frameworks like React.

If you enjoyed this blog and found it helpful, do share it with others and let me know your feedback.

In the next blog, we will dive into one of the most important concepts in JavaScript — Functions. We'll explore how functions work, why they are so powerful, and how they help us write reusable and organized code.

See you in the next one 🚀