Forem: Abhishek sahni

Async/Await in JavaScript: Writing Cleaner Asynchronous Code

Abhishek sahni — Wed, 01 Apr 2026 11:36:10 +0000

“If you write asynchronous code using promises, this blog is for you.
In this blog, we explore Async/Await in JavaScript.”

What is Async/Await:

Async/Await keywords are used to write asynchronous code that looks like synchronous code. It makes your code more readable and clean.
They are just syntactic sugar over JavaScript promises.

Async keyword:

We can use the async keyword with any function. This keyword ensures that the function always returns a promise.
If a function returns a non-promise value, JavaScript automatically wraps it in a resolved promise.

Await keyword:

We use the await keyword with code that takes time to resolve.
The await keyword pauses the execution of the function until the promise is either resolved or rejected.
While the function is paused, the JavaScript thread is free to perform other tasks.

How Async/Await work together:
async creates a promise based function.
await wait for the promise to resolve inside that function.

Code Example of Async/Await

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 2000);
  });
}

// async function
async function getData() {
  console.log("Fetching data...");

  const result = await fetchData(); // waits here

  console.log(result);
}

getData();

output : 
Fetching data...
(Data comes after 2 seconds)
Data fetched successfully!

Same code Without Async/Await(Promises)

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 2000);
  });
}

function getData() {
  console.log("Fetching data...");

  fetchData().then((result) => {
    console.log(result);
  });
}

getData();

.then() callback style.
await easy to read and understand.

Error handling with async code :

Error handling in asynchronous code ensures that failures (like database errors) are handled without crashing the application.

Try-Catch is the standard way to handle errors in modern JavaScript.
You use the await keyword inside the try block. If any error occurs, the catch block executes and handles the error.

async function getData() {
  try {
    const result = await fetchData(); // if promise rejects, control goes to catch
    console.log(result);
  } catch (error) {
    console.log("Error:", error);
  }
}

Conclusion :

In this blog, we learned how to write cleaner and more readable asynchronous code using the Async/Await keywords. We also explored error handling using try-catch inside an asynchronous function.

Understanding this keyword in javaScript

Abhishek sahni — Tue, 31 Mar 2026 10:26:22 +0000

If you work in JavaScript, you have probably seen the this keyword many times. Many developers have a basic understanding of it, but there is still a lot of confusion around it because its behaviour changes depending on the current context.

What is `this` keyword :

Let’s understand the this keyword with an example. Think of this as an actor. An actor changes their role in every movie depending on the context of the movie.

Similarly, the this keyword also behaves like an actor because it changes its behaviour according to the current context in JavaScript.

Definition of this word :

this keyword is reference to the object of currently executing functions. its value is not static. It is determined at runtime based on how a function is called.

Now let's see behaviour of this keyword in various different context .

`this` in Global context :

In browser :this in the global context refers to the window object.

In Node.js, when you use this in the global context (at the top of a file, outside all functions), it refers to the module.exportsobject.

This happens because, before executing your file, Node.js wraps your code inside a function. So, it is not truly running in the global scope like in the browser.

Node.js internally wraps your code like this:

(function (exports, require, module, __filename, __dirname) {
  // your code here
});

So this is equal to module.exports

but when you print this at the top of the file (in global context).

console.log(this);

//output : {} output will be an empty object.

Because by default :

module.exports = {};

`this` inside objects :

When this is used inside an object method, it refers to the object that is calling the function.

Code example :

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

user.greet();
// output : John

because user calling the function. this = user

so when you write this.name it is equal to user.name.

it clear that who is calling the function that is this .

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

user.greet();
//output : { name: "Abhi", greet: [Function] }
// this = whole object.

this inside Nested Function : this is undefined inside nested functions .

const user = {
  name: "John",
  greet: function () {
    function inner() {
      console.log(this.name);
    }
    inner();
  }
};

user.greet();
//output : undefined

Detached Function : When you extract method from an object and call it separately.

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

const fn = user.greet; // function detached

fn(); // called independently

// output : undefined

when you extract the method from object. this is lost because you call that method without any object.

This inside Functions :

Regular Function (using function keyword) : Behaviour of this is depend on how the function is called.

this refers to the global object (window in browsers, globalin Node.js).

but it is undefined in "strict mode".

Function inside object:

const user = {
  name: "John",
  greet: function () {
    function inner() {
      console.log(this);
    }
    inner();
  }
};

user.greet();

Output: Browser → window Node.js → undefined

Because inner is a normal function not called by object.So this lost again.

Constructor call : when you call a constructor using new keyword this always refers to the newly created instance .

Arrow Functions : Arrow functions does not have their own this . they inherit their this from parent scope where it is defined.

const user = {
  name: "John",
  greet: function () {
    const inner = () => {
      console.log(this.name);
    };
    inner();
  }
};

user.greet();

Conclusion :

In this blog, we explored the behavior of the this keyword across different JavaScript environments. We also understood how this works inside functions, arrow functions, and objects.

Array flattening in javaScript (basic to advance)

Abhishek sahni — Mon, 30 Mar 2026 06:51:50 +0000

Before taking the dive into the concept of array flattening let's understand what are nested arrays.

Nested arrays are nothing just an array inside another array. Nested arrays are used to handle complex data in organise way that cannot be represented by a linear array.

Code Example :

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

console.log(numbers[2]);      // [3, 4]
console.log(numbers[2][0]);   // 3
console.log(numbers[2][1]);   // 4

how above code work

index 2 gives -> [ 3 , 4 ]

[2][0] gives -> 3

So , now we understand nested arrays but what is array flattening ?

Array flattening is a process to combine multi-dimensional (nested) arrays by extracting all sub-arrays into a singe main array.

what is the use case of array flattening ?

Api response : when real world data arrive from sever it may be a nested array. So we combine multiple array into one single array to simplify the response.

const users = [
  { name: "Abhi", skills: ["HTML", "CSS"] },
  { name: "Rahul", skills: ["JS", "React"] }
];

const allSkills = users.map(user => user.skills).flat();

console.log(allSkills);
// ["HTML", "CSS", "JS", "React"]

It makes search and filter easy.

Form Data Processing :

const formSections = [
  ["name", "email"],
  ["password", "confirmPassword"]
];

const allFields = formSections.flat();

console.log(allFields);
// ["name", "email", "password", "confirmPassword"]

Now we can perform data validation easily .

Matrix / Grid Problems : It simply calculations and makes searching and filtering easy.

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

const flatMatrix = matrix.flat();

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

Now you get the idea how you can use the concept of array flattening.

There are different approaches to flatten array Let's see the one by one.

Different approaches to flatten array :

Build in methods : JavaScript provides built-in methods to flatten arrays that are optimized and easy to use.

`flat()` Method:

.flat() is a built-in method that combines elements of all sub-arrays into a single array.

It performs single-level flattening by default.

.flat(2) → Performs flattening up to depth level 2

.flat(Infinity) → Flattens all sub-arrays into a single array

`flatMap()` Method:

flatMap() is a combination of map() and flat().

It removes the extra array layer from the return value of map().

It is slightly more optimized than using map() and flat() separately.

Code Example :

without flatMap()

const arr = [1, 2, 3];

const result = arr.map(num => [num * 2]);

console.log(result);
// [[2], [4], [6]]   nested array

const final = result.flat();

console.log(final);
// [2, 4, 6]

with flatMap()

const arr = [1, 2, 3];

const result = arr.flatMap(num => [num * 2]);

console.log(result);

// [2, 4, 6]

Using `foreach()` loop :

Loop through array

Check: element is array or not

If array → add all elements

If not → push directly

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

arr.forEach(item => {
  if (Array.isArray(item)) {
    item.forEach(val => result.push(val));
  } else {
    result.push(item);
  }
});

console.log(result);

Common Interview Scenarios :

Flatten Infinite Nested Array :

//input  :  [1, [2, [3, [4]]]]

//expected output : [1, 2, 3, 4]

1 → not array → push

[2, [3, [4]]] → array → call again

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

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

  return result;
}

Stack Approach (Iterative) :

Put all elements into a stack

Process one by one

If array → break it and push back

If value → add to result

function flatten(arr) {
  let stack = [...arr];
  let result = [];

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

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

  return result.reverse();
}

Why interviewer ask this ? :

Recursion understanding : can you solve a problem that repeat itself .

Problem Breakdown : Can you handle unknown depth?

Edge Cases : Empty arrays and mixed datatypes .

Conclusion :

In this blog, we learned what nested arrays are and how to convert them into a single array.

We also explored the use cases and interview perspectives of array flattening with practical code examples.

Spread vs Rest Operator In JavaScript

Abhishek sahni — Thu, 26 Mar 2026 13:19:25 +0000

It is very confusing to use spread and rest operator in javaScript because both have same syntax (...) but working is totally different .

Let's see the difference between them.

Spread Operator : The spread operator is used to expand or spread individual values of an array or properties of an object.

Code Example :

const arr = [1, 2];
console.log(...arr); // 1 2

It takes [1, 2] and spread values of array and return 1 2.

Function Example :

with spread operator

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

const arr = [3 , 4];

console.log(add(...arr)); // 3 ,4 we spread the values of array.

Same function without spread operator

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

const arr = [3, 4];

console.log(add(arr[0], arr[1])); // 7

Rest Operator : It is opposite of spread operator. It collect all remaining properties from an object or array in a new array or object.

with rest operator

function sum(...nums)
 { 
    console.log(nums);
 }

sum(1, 2, 3); // [1, 2, 3]

without rest operator

function sum() 
{ 
    const nums = Array.from(arguments); 
    console.log(nums); 
}

sum(1, 2, 3); // [1, 2, 3]

Now you understand the basic working of spread and rest operator. Let's the use cases of both operators.

Use Cases of Spread Operator :

Copy an array :

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

console.log(arr2); // [1, 2, 3]

Merge arrays :

const a = [1, 2];
const b = [3, 4];

const result = [...a, ...b];

console.log(result); // [1, 2, 3, 4]

Add Element in array :

const arr = [1, 2];

const newArr = [...arr, 3, 4];

console.log(newArr); // [1, 2, 3, 4]

Copy Object :

const user = { name: "Abhi", age: 20 };

const newUser = { ...user };

console.log(newUser);

Merge Objects :

const obj1 = { a: 1 };
const obj2 = { b: 2 };

const result = { ...obj1, ...obj2 };

console.log(result); // { a: 1, b: 2 }

Override Values :

const user = { name: "Abhi", age: 20 }; // age = 20

const updated = { ...user, age: 25 };

console.log(updated); // age updated now age = 25

Shallow Copy : A shallow copy creates a new array or object by copying only the first level of data. Nested objects and arrays are not copied; they remain shared by reference with the original.

Conclusion :

In this blog, we explored the core concepts of destructuring, rest, and spread operators in JavaScript. We understood how destructuring helps extract values in a clean and readable way, while the spread operator expands data and the rest operator collects it efficiently.

We also learned important concepts like shallow copy and how nested objects and arrays are still shared by reference.

Destructuring in JavaScript(beginner to advance)

Abhishek sahni — Thu, 26 Mar 2026 09:36:17 +0000

If you know JavaScript then you must have used an object and array.

In object you use dot(.) notation to access values from an object.

And it array we use bracket [] to access the values.

But when you use object dot(.) notation and [] many times in code . It makes our code unreadable.

Code Example :

Without destructuring

const user = {
  name: "John",
  age: 20,
  city: "Mumbai"
};

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

console.log(name, age, city);

What destructuring means :

Destructuring is a JavaScript syntax that introduce in ES6 that allow us to extract values from object into variable without using dot(.) notation and brackets. It makes our code more readable and clean.

With destructuring

const user = {
  name: "John",
  age: 20,
  city: "Mumbai"
};

const { name, age, city } = user;

console.log(name, age, city);

Object Destructuring :

Object destructuring use braces {} to match property key from an object.

Basic Assignment : Extract the object properly into the same variable name.

const user = { name: 'Alice', age: 25 };

const {name , age} = user; //name = Alice , age = 25

Renaming : You can assign a property in a variable with a different name using colon (:) syntax.

const user = { name: 'Alice';

const {name : userName} = user; //userName = Alice

Default Values : You can assign default values to a variable if property is undefined.

const { city = 'Unknown' } = user; // city = 'Unknown'

Nested destructuring : You can destructure nested objects.

const profile = { id: 1, info: { email: 'a@ex.com' } };
const { info: { email } } = profile; // email = 'a@ex.com'

Array Destructuring :

Array destructuring use brackets to assign values from array position(index) into variables.

Basic Assignment : you can extract values from array index into variables.

const colors = ['red', 'blue', 'green']; 
const [first, second] = colors; // first = 'red', second = 'blue'

Skip Values : Use commas to skip the values.

const [first, , third] = colors; // first = 'red', third = 'green'

Swapping Variables : Swapping two variables with a third temporary variable .

let a = 4; 
let b = 5;

[a , b] = [b , a]; // a = 2, b = 1

How this works :

javaScript first execute right side array.

[ b , a ] evaluate first -> becomes [5 , 4]

then destructuring on left side [ a , b ] = [5 , 4]

Now values are assigned like this

a = 5 and b = 4

Why This Works

Because of array destructuring + assignment:

Right side creates a temporary array [5, 4]

Left side picks values in order:

first → goes to a

second → goes to b

Rest Operator (...) :

Rest operators extract all remaining properties and elements into a new object or array. Always the use the rest operator in the end of the destructing syntax.

const numbers = [1, 2, 3, 4];
const [one, ...others] = numbers; // one = 1, others = [2, 3, 4]

Important Points of Destructuring :

It does not modify original object or array only extract values from it.

It makes the shallow copy means nested objects or array are passed by reference.

Code Example :

const user = {
  name: "Abhi",
  address: {
    city: "Jalandhar"
  }
};

const { address } = user;

address.city = "Delhi";

console.log(user.address.city); 
// Delhi  (original also changed)

value of city is changed because in shallow copy nested objects and arrays are still passed reference.

If you try to destructure null or undefined, it throws error.

Code Example :

const { name } = null; 
//  TypeError

Conclusion :

In this blog, we explored the concept of destructuring in JavaScript along with its key advantages and important points. We also covered the rest operator and demonstrated how to swap two variables without using a temporary variable through practical code examples.

Write cleaner code with Template Literals in JavaScript

Abhishek sahni — Wed, 25 Mar 2026 16:55:02 +0000

We use template literals to write clean and readable code because traditional string concatenation has problem of readability.

Code Example :

Without template literals

const name = "John"; const age = 20;

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

console.log(message);

To many "+" sign

Difficult to understand.

With Template literals

const name = "John";
const age = 20;

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

How to write Template literals (syntax) :

We use backticks \ to write template literal.

Inside the backticks you can embed(insert) your variables and valid JavaScript expression.

// use of variables inside the string.
const message = `My name is ${name} and I am ${age} years old.`;

//valid JavaScript expression inside the string.
console.log(`Sum is ${a + b}`);

So what are template literals ?

In JavaScript, template literals(also known as template strings) . It allows string interpolation and multi-line string.

string interpolation : You can can use variables and any valid JavaScript expression inside the sting using ${expression}.

Using string interpolation

const name = "Abhi";
const age = 20;

// Using template literals
const message = `My name is ${name} and I am ${age} years old.`;

console.log(message);

You can also write valid JavaScript expressions.

const a = 5;
const b = 10;

console.log(`Sum is ${a + b}`);

multi-line string : Template literals preserve line breaks as you write inside the string .

Eliminating the need the escape characters like \n.

const text = `This is line 1
This is line 2
This is line 3`;

console.log(text);

No need to use \n because in automatically preserve space.

Same Code without template literal (for comparison)

const name = "Abhi";
const age = 20;

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

const text = "This is line 1\nThis is line 2\nThis is line 3";

console.log(message);
console.log(text);

Less readable and confusing.

Conclusion :

In this blog, we discussed template literals in JavaScript. We explored advanced features such as string interpolation and multi-line strings with practical code examples.

We also compared template literals with traditional string concatenation to understand how they improve readability and simplify code writing.

JavaScript Modules: Import and Export Explained

Abhishek sahni — Tue, 24 Mar 2026 08:40:54 +0000

In the software industry, maintaining and organizing code is a challenging task. It is very important to manage code properly because it improves readability, enhances structure, and makes debugging easier.

However, if we write a large amount of code in a single file, it becomes very difficult to maintain, read, and detect bugs. That’s why we use modules in JavaScript.

What is a module in java script :

A module is a self-contained independent file that performs a specific task.

It has its own private scope.

How to Manage Code Efficiently in JavaScript

JavaScript modules allow us to break our code into smaller, manageable files, making it easier to organize and maintain. Each file contains a specific functionality that can be imported and exported anywhere in the application.

How to use modules in JavaScript :

named export statement : It available your module and in any part of your application.

You just need to import that module.

You can export multiple things from a file using named export statement .

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

export const PI = 3.14;

import statement : It is used to import a module in any part of your code.

You can import multiple things from a file .

import add from './math.js';

You imported add function from math.js file.

default export statement : You can export only one thing from a file.

// greet.js 
export default function greet()
 { 
    console.log("Hello bhai!"); 
 }

import greet from "./greet.js";
greet();

Don't use {} in default export.

You can change name while importing.

import sayHello from "./greet.js";

export at bottom : you can export from bottom. Works same as named export.

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

const PI = 3.14;

export { add, PI };

(Named + Default) :

export const PI = 3.14;

export default function add(a, b) { return a + b; }

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

Key Benefits of Using Modules :

Encapsulation : Modules have their own private scope preventing variables from leaking

in global scope causing naming conflicts.

Code Reusability : Modules properly follows DRY Principle (Don't repeat yourself).You can share your module in any part of your project and use it many times as you need it.

Dependency Management : It shows that which part of code is rely on which module by using explicit import and export statements.

Performance : Modern module systems ((like ES Modules) use the concept of tree shaking and remove unused code from bundle.

What is bundle and tree shaking :

Bundle :You write you code in multiple files but browser don't like this because more files more processing. So browser combine all your code in single file called bundle.

Tree shaking :Tree shaking is a process that removes unused code from bundle.

Code Example :

// you declare three functions
export function add() {} 
export function subtract() {} 
export function multiply() {}

//But use only one
import { add } from "./math.js";

Tree shaking will keep add function and remove subtract and multiply.

Conclusion :

In this blog, we learned how to write manageable and organized code in JavaScript using modules. We also explored how to use modules effectively with practical examples.

Additionally, we discussed the benefits of modular code and how it improves performance internally.

Callbacks in JavaScript: Why They Exist

Abhishek sahni — Mon, 23 Mar 2026 09:58:40 +0000

In JavaScript function are treated as values just like normal (numbers , string and arrays etc).

That means you can :

1. You can store a function in a variable.

2. You can pass it as an argument to another function.

3. You can return a function from another function.

What is Callback? :

A callback is a function that is passed to another function as an argument and is executed later. It is used to delay the execution of a function.

function greet(name, callback) {
  console.log("Hello " + name);
  callback(); // calling the callback
}

function sayBye() {
  console.log("Bye");
}

greet("John", sayBye);

Output :
Hello John
Bye

Why callbacks are used in asynchronous programming :

Callbacks are used to delay the execution of a function.

Scenario: Food Order System :

You order food and it takes time to prepare.

You give phone number -> call me when ready (callback).

Code Example :

function orderFood(callback) {
  console.log("Order placed...");

  setTimeout(function() {
    console.log("Food is ready ");
    callback(); // calling you back
  }, 3000);
}

function notifyUser() {
  console.log("Hey Abhi, your order is ready! Come pick it up");
}

// placing order
orderFood(notifyUser);

Output : 
Order placed...
(3 sec later...)
Food is ready
Hey Abhi, your order is ready! Come pick it up

Let's break down above code to understand use case of callback.

First, the orderFood function runs.

“Order placed...” is printed immediately.

After that, setTimeout starts a timer for 3 seconds.

JavaScript does not wait here and continues its work.

After 3 seconds, the message “Food is ready ” is printed.

Then, the function notifyUser is called.

Finally, the user can see the notification.

Basic problem of callback nesting:

When multiple asynchronous tasks depend on each other, developers often use a chain of callbacks to execute them. However, this approach makes the code difficult to read, maintain, and debug. This issue is known as callback hell or the pyramid of doom.

function step1(callback) {
  setTimeout(() => {
    console.log("Step 1 done");
    callback();
  }, 1000);
}

function step2(callback) {
  setTimeout(() => {
    console.log("Step 2 done");
    callback();
  }, 1000);
}

function step3(callback) {
  setTimeout(() => {
    console.log("Step 3 done");
    callback();
  }, 1000);
}

// nesting starts here 
step1(() => {
  step2(() => {
    step3(() => {
      console.log("All steps completed");
    });
  });
});

step1(() => {
  step2(() => {
    step3(() => {

Look at this part of code is growing horizontally in a pyramid shape.

Solution of Callback hell :

To avoid this you should use promises and async/await.

Promises : Promise solve the callback nesting by making the code readable.

Same code example using promises:

function step1() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Step 1 done");
      resolve();
    }, 1000);
  });
}

function step2() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Step 2 done");
      resolve();
    }, 1000);
  });
}

function step3() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Step 3 done");
      resolve();
    }, 1000);
  });
}

// clean chaining 
step1()
  .then(step2)
  .then(step3)
  .then(() => {
    console.log("All steps completed");
  });

Async/Await :

Async/Await makes asynchronous code look like synchronous code.

Same example using Async/Await :

async function runSteps() {
  await step1();
  await step2();
  await step3();
  console.log("All steps completed ");
}

runSteps();

Summary:

In this blog, we learned how callbacks work in JavaScript using a simple real-world example. Callbacks allow us to run a function after a task is completed, especially in asynchronous operations.

However, when multiple asynchronous tasks depend on each other, using callbacks can lead to deeply nested code, making it difficult to read, maintain, and debug. This problem is known as callback hell or the pyramid of doom.

To solve this issue, we use Promises, which help us write cleaner and more structured code using .then() chaining. Further, async/await makes asynchronous code look like synchronous code, improving readability and making it easier to handle errors.

Handle errors like a pro in javascript. A beginner friendly guide.

Abhishek sahni — Sun, 22 Mar 2026 17:54:04 +0000

What is an error ?

An error in any programming language is a mistake that disrupts the normal flow of a program and prevents the code from executing properly. In some cases, errors can even cause the program to crash.

Errors usually occur due to incorrect syntax or logical mistakes in the code. Syntax errors happen when the code does not follow the rules of the programming language, while logical errors occur when the program runs but produces incorrect results because of flawed logic.

Handling errors using try , catch and finally in JS :

In javascript try catch block is used to handle runtime errors.

Runtime errors occurs during the execution of script not when you write the code.

It can cause unexpected crashes.

It cannot catch syntax errors ( like a bracket missing) because the script is not even run at that time.

Try block : Try block contains the code that may introduce errors. If error occurs execution jumps to catch block.

Catch Block : Catch blog only runs when error occur in try block. Catch block has access of error object. This object contains error name (eg. TypeError) and error message etc.

Finally Block : This block always runs after try and catch. Usually used for cleanup.

Example Code :

try {
  // Code that may cause an error
  let user = null;
  console.log(user.name); // Error
} 

catch (error) {
// Runs if an error occur
  console.log("Error caught:", error.message);
} 

finally {

// Always runs
  console.log("Execution completed");
}

Synchronous Execution :

It won't catch errors in asynchronous call backs (like setTimeout) unless the try catch code is inside the callback function.

Example Code :

try { setTimeout(() => 
    { 
       throw new Error("Something went wrong!"); 
    }, 1000); 
} 
catch (err) { console.log("Caught:", err.message); }

Output :
Uncaught Error: Something went wrong!

Catch Block did not run.

Why this happens : Javascript works on event loops.

1. try block runs.

2. setTimeOut schedule back for later.

3. After 1 second callback run separately .

4. Error happens outside the try block.

You must put try catch inside async callback.

Example Code :

setTimeout(() => { 
    try { 
            throw new Error("Something went wrong!"); 
        } 
    catch (err) { console.log("Caught:", err.message); }
 }, 1000);

Output : 
Caught: Something went wrong!

Async/Await Support :

It works with async/await. Because await stop the execution of code and wait for resolve/reject the promise. If promise reject catch block runs.

async function test() { 
    try { 
        await Promise.reject("Error occurred"); 
    } 

    catch (err) { console.log("Caught:", err); } 

}
test();

Output : 
Caught : Error occurred

How Try Catch detect and show errors :

When an error occur inside a try block javascript engine automatically creates an Error Object and pass it to catch block. This object contains essential details about failure to handle the error gracefully.

Core Properties of Error Object :

Every built in javascript Error object has at least these three properties.

1. name : A string that specifies the type of error (eg. TypeError , ReferenceError , SyntaxError).

2. message : A human readable string to throw the custom error message.

3.stack : It provide the trace of the function calls. Basically it tells you where error occur and how we reached at that error. It also provides the line number where error make it easy to

debug the code. However, the stack property of Error object is not an official part of ECMAScript specifications. But it is implemented of all major JavaScript engines (v8 , SpiderMonkey , etc).

How to throw custom error messages :

throw new Error () : You can throw user defined exception using throw statement halts the

current process and pass the error object to the nearest catch block.

new Error() → creates an error object
throw → stops execution and sends error to nearest catch

Example Code :

function withdraw(amount, balance){
 if (amount > balance) {
     throw new Error("Insufficient balance"); 
  } return balance - amount; 
}

try { withdraw(500, 100); }
catch (err) { console.log(err.message); }

Insufficient balance

Built-in Error Types :

throw new TypeError("Wrong type"); 
throw new ReferenceError("Variable not found");

Understanding Objets in JavaScript

Abhishek sahni — Thu, 12 Mar 2026 09:01:01 +0000

Objects in JavaScript are very interesting because internally everything that is not a primitive data type is an object.

What is an Object?

An object is a non-primitive data type that can store multiple values. It is used to store related data and functionality together in a single, manageable unit.

Objects store data as comma-separated key-value pairs.
You can think of an object as a container that holds multiple variables together.

Let's look at a code snippet of an object storing multiple values.

const user = {
   name : "someone",
   age : 12,
   course : "Web Development"

console.log(user.age)

//Output : 12
}

In this example

name , age , course are keys
and someone , 12 , Web Development are values

Empty Object :

An object can also be empty.

  // empty object -> {}

This creates an empty object with no properties you can add them later.

Diagram

As you can see in the example above, an object in JavaScript is created using curly braces {}.
You can store the object in a variable.
Now you know how to create an object. But how do we access the values stored inside it?
We can access values from an object in two ways.

1. Using Dot Notation :

This is the most common way to access values from an object.
Dot notation is used when you know the property name and the property name does not contain spaces or special characters.

SYNTAX : objectName.propertyName

const user = {
  name: "someone",
  age: 20
};

console.log(user.name); //someone
console.log(user.age);  // 20

In this example :

user is the object
name and age are properties
user.name access values of the name property

2.Bracket Notation :

This method is useful when property name contains special character like (space or hyphen),starts with a number or when the property name is stored in a variable.

SYNTAX : objectName[propertyName]

const product = {
  "product name": "Laptop",
  price: 50000
};

console.log(product["product name"]); 
//Output : Laptop

We have learned how to create objects and access their values.
Now let's learn how to update objects.

In JavaScript, objects are mutable by default. This means that after an object is created, we can update its properties without creating a new object.

const user = {
  name: "Abhi",
  age: 20
};

user.age = 21;

console.log(user.age); // 21

Reference Types are Mutable :

Objects are reference types. When you assign an object to another variable, JavaScript does not create a new object.
Instead, both variables point to the same object in memory.

Side Effects of mutability :

Because objects store references instead of copies, assigning the same object to multiple variables can lead to side effects.
If one variable updates the object, the change is reflected in all variables that reference that object.

const person = { name: 'John', age: 30 };
const person2 = person; // person2 references the same object as person

person2.age = 31; // Modifying the object through person2

console.log(person.age); // Output: 31 (The change is seen in the original object)

Adding and Deleting Properties in Object :

In JavaScript, you can easily add new properties to an object after it has been created.
You can add a property in the same way you assign a value to a variable.

Let's take an example code :

const user = {
   name : "someone",
   age : 12,
}

In this object, we currently have two properties:

name
age

To add a new property, we can use the following syntax:

objectName.propertyName = value

Adding a new property

user.course = "system design"
console.log(user.course);

//Output : system design

Now the user object contains three properties

{
  name: "someone",
  age: 12,
  course: "system design"
}

You can remove a property from an object using delete keyword.

delete user.age;

Now the age property will be removed from the object.

Looping through object keys:

Sometimes we need to go through all the properties of an object. In JavaScript, we can loop through the keys and values of an object.
One common way to do this is by using the for...in loop.

const user = {
  name: "Abhi",
  age: 20,
  course: "Web Development"
};

for (let key in user) {
  console.log(key);
}

//Output : 
 Abhi
 20
 Web Development

In this example loop goes through each key in the object.

Looping through objects values :

const user = {
  name: "Abhi",
  age: 20,
  course: "Web Development"
};

for (let key in user) {
  console.log(key + " : " + user[key]);
}

//Output :
name : Abhi
age : 20
course : Web Development

Conclusion :

Objects are one of the most important data structures in JavaScript. They allow us to store related data and functionality together using key–value pairs.
In this article, we learned how to:
Create objects using curly braces {}
Access object properties using dot notation and bracket notation
Update object properties since objects are mutable by default
Add and delete properties from an object
Loop through object keys and values.

Understanding objects is essential because they are used everywhere in JavaScript, from storing application data to building complex applications.

Forem: Abhishek sahni

Async/Await in JavaScript: Writing Cleaner Asynchronous Code

Code Example of Async/Await

Same code Without Async/Await(Promises)

Error handling with async code :

Conclusion :

Understanding this keyword in javaScript

What is this keyword :

this in Global context :

this inside objects :

This inside Functions :

Conclusion :

Array flattening in javaScript (basic to advance)

Code Example :

what is the use case of array flattening ?

Different approaches to flatten array :

flat() Method:

flatMap() Method:

Code Example :

Using foreach() loop :

Common Interview Scenarios :

Stack Approach (Iterative) :

Why interviewer ask this ? :

Conclusion :

Spread vs Rest Operator In JavaScript

Code Example :

Function Example :

Use Cases of Spread Operator :

Conclusion :

Destructuring in JavaScript(beginner to advance)

Code Example :

What destructuring means :

Object Destructuring :

Array Destructuring :

Why This Works

Rest Operator (...) :

Code Example :

Code Example :

Conclusion :

Write cleaner code with Template Literals in JavaScript

Code Example :

So what are template literals ?

Conclusion :

JavaScript Modules: Import and Export Explained

What is a module in java script :

How to Manage Code Efficiently in JavaScript

How to use modules in JavaScript :

Key Benefits of Using Modules :

What is bundle and tree shaking :

Code Example :

Conclusion :

Callbacks in JavaScript: Why They Exist

What is Callback? :

Why callbacks are used in asynchronous programming :

Scenario: Food Order System :

Code Example :

Basic problem of callback nesting:

Solution of Callback hell :

Same code example using promises:

Async/Await :

Same example using Async/Await :

Summary:

Handle errors like a pro in javascript. A beginner friendly guide.

What is an error ?

Handling errors using try , catch and finally in JS :

Example Code :

Synchronous Execution :

Example Code :

Example Code :

Async/Await Support :

How Try Catch detect and show errors :

How to throw custom error messages :

Example Code :

Understanding Objets in JavaScript

What is an Object?

Empty Object :

Diagram

1. Using Dot Notation :

2.Bracket Notation :

Reference Types are Mutable :

What is `this` keyword :

`this` in Global context :

`this` inside objects :

`flat()` Method:

`flatMap()` Method:

Using `foreach()` loop :