DEV Community: Jyoti chaudhary

How Hoisting works internally?

Jyoti chaudhary — Wed, 04 Feb 2026 12:39:22 +0000

🔹What is Hoisting?

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope during the memory creation phase, before code execution.

🔹How Hoisting Works Internally

JS code runs in two phases:

1. Memory Creation Phase (Hoisting happens here)

During the memory creation phase, JavaScript parses the code and allocates memory for variable and function declarations, storing them inside the execution context before code execution begins.

In simple terms, JavaScript scans the code and then allocates memory for variables, functions etc and then stores them in memory.

JS scans the code
Allocates memory for:
- Variables
- Functions
Stores them in memory

2. Execution Phase

Code runs line by line
Assignments happen
Functions are executed

🔹Types of Hoisting in JavaScript

var hoisting
let hoisting
const hoisting
Function declaration hoisting
Function expression hoisting
Class hoisting

1. var Hoisting (Fully Hoisted)

console.log(a);
var a = 10;

Internal:
var a; // undefined

✔ Declaration is hoisted
✔ Initialized with undefined

2. let and const Hoisting (Hoisted but NOT initialized)

console.log(b);
let b = 20;

Error:
ReferenceError: Cannot access 'b' before initialization

---

console.log(c);
const c = 30;
❌ Error:

ReferenceError: Cannot access 'c' before initialization

let and const is hoisted, But placed in Temporal Dead Zone (TDZ)

🔥 Temporal Dead Zone (TDZ)
TDZ = time between: entering scope and variable initialization

// TDZ starts
console.log(b); // ❌ error
let b = 20;
// TDZ ends

let is hoisted but not initialized, and accessing it before declaration causes a ReferenceError due to TDZ.

3. Function Declaration Hoisting (Fully Hoisted)

sayHello();

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

Internally:
sayHello → function reference

4. Function Expression Hoisting

sayHi();

var sayHi = function () {
  console.log("Hi");
};

TypeError: sayHi is not a function

Why? -> sayHi is hoisted as undefined -> Calling undefined() ❌

sayHi();
const sayHi = function () {
  console.log("Hi");
};

ReferenceError (TDZ)

Only function declarations are fully hoisted, not function expressions.

🔹Execution Context

When JavaScript runs your code, it does not execute it line by line immediately.

It does two phases for every execution context:

Memory Creation Phase (also called Creation / Hoisting phase)
Execution Phase

What is an Execution Context?

Execution Context = an environment where JavaScript code is evaluated and executed

Think of it like a box created by JS to run code.

Each execution context contains two main things:

Memory (Variable Environment) ⇒ Variables + Functions stored here
Code (Thread of Execution) ⇒ Code executes line by line

👉 Types of Execution Context

Global Execution Context (GEC)
– Created when the program starts
– Only one
Function Execution Context (FEC)
– Created each time a function is called

👉 Memory Component Stores

During memory creation phase:

Variables
Function declarations
Function parameters
Scope references

👉 Where This Memory Lives Physically?

Stack = where execution happens
Heap = where data lives

Heap Memory

Large and unstructured
Stores:
- Objects
- Functions
- Closures
- Complex data

Stack Memory

Fast and LIFO ordered
Stores:
- Execution contexts
- Primitive values (often)
- References (addresses) to heap

👉 Who Gives This Memory?

JavaScript Engine

Examples:

V8 (Chrome, Node.js)
SpiderMonkey (Firefox)
JavaScriptCore (Safari)

The JS Engine:

Allocates memory
Manages memory
Frees memory (Garbage Collection)

🔹 Internally What Happens?

When JS runs:

Step 1 → Engine creates Execution Context

Step 2 → Allocates memory for variables/functions

Step 3 → Runs code

🔥 Real Flow

Browser / Node
   ↓
JavaScriptEngine(V8 etc.)
   ↓
Creates Execution Context
   ↓
AllocatesMemory(Hoisting Phase)
   ↓
Executes Code

Example:

var a = 10;
let b = 20;
const c = 30;

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

let result = add(2, 3);

STEP 1. Global Execution Context (GEC) is created

GEC is pushed into the CALL STACK
Memory Creation Phase (inside GEC)

🔹What goes to STACK memory?

Primitive variables

var a;
let b;
const c;
let result;

Stored in stack memory (inside GEC):

a      → undefined
b      →<uninitialized>
c      →<uninitialized>
result →<uninitialized>

🔹 What goes to HEAP memory?

Function declaration

functionadd(x, y) { ... }

Function object is stored in heap
Stack stores reference (address) to it

STACK (GEC)           HEAP
─────────────        ─────────────
add  →0x123  ───▶function add(){...}

STEP 2: Execution Phase starts

All primitives → stored directly in STACK

STACK
a →10
b →20
c →30

STEP 3: Function call happens

let result =add(2,3);

🔹What happens internally?

New Function Execution Context (FEC) created
Pushed into CALL STACK

CALL STACK
────────────
|  FEC(add)|
|    GEC|
────────────

🔹 Function Execution Context Memory

Parameters & local variables

x =2
y =3
sum =undefined

All are primitives → STACK

STACK (FEC)
x   →2
y   →3
sum → undefined

Execution inside function

sum = x + y;// 5
return sum;

sum becomes 5
Value returned to global context

Function ends

❌ Function Execution Context is popped from stack

CALL STACK
──────────
|  GEC   |
──────────

Returned value assigned:

result → 5   (STACK)

Basic Coding Interview Questions ( 2025 )

Jyoti chaudhary — Tue, 29 Apr 2025 09:52:28 +0000

Reverse a String
Check if a String is a Palindrome
Remove Duplicates from a String
Find the First Non-Repeating Character
Count the Occurrences of Each Character
Reverse Words in a Sentence
Check if Two Strings are Anagrams
Find the Longest Substring Without Repeating Characters
Convert a String to an Integer
Compress a String
Find the Most Frequent Character
Find All Substrings of a Given String
Check if a String is a Rotation of Another String
Remove All White Spaces from a String
Check if a String is a Valid Shuffle of Two Strings
Convert a String to Title Case
Find the Longest Common Prefix
Convert a String to a Character Array
Replace Spaces with %20 (URL Encoding)
Convert a Sentence into an Acronym
Check if a String Contains Only Digits
Find the Number of Words in a String
Remove a Given Character from a String
Find the Shortest Word in a String
Find the Longest Palindromic Substring

Q.1 How do you check if a variable is an array?

Jyoti chaudhary — Sat, 05 Apr 2025 08:20:40 +0000

Using Array.isArray()

   let arr = [1, 2, 3];
   let notArray = "Hello";
   console.log(Array.isArray(arr));      // true
   console.log(Array.isArray(notArray));  // false

Using instanceof Operator

The instanceof operator can be used to check if a variable is an instance of Array.

let arr = [1, 2, 3];
let notArray = "Hello";
console.log(arr instanceof Array);      // true
console.log(notArray instanceof Array); // false

Using constructor Property

You can check the constructor property of an object, but this method is not as reliable because the constructor property can be modified.

let arr = [1, 2, 3];
let notArray = "Hello";
console.log(arr.constructor === Array);      // true
console.log(notArray.constructor === Array); // false

While this works in most cases, it's generally not recommended due to potential issues with modifying the constructor property.

Recommended Method:

The best and most reliable way to check if a variable is an array in JavaScript is by using Array.isArray() because it is simple, clear, and works in all scenarios.

Promises in JavaScript

Jyoti chaudhary — Tue, 04 Mar 2025 17:14:05 +0000

Promises:

A promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It acts as a placeholder for a value that will be available in the future, allowing you to handle asynchronous operations (like fetching data from an API or reading a file) in a more structured and manageable way.

In simpler terms, a promise is like a contract: it promises to provide a result (either a success or failure) at some point in the future. Until then, it can be in one of three states:

Pending: The initial state; the promise is still being processed.
Fulfilled: The promise has been successfully resolved with a result (i.e., the asynchronous operation has completed successfully).
Rejected: The promise has been rejected due to an error or failure in the asynchronous operation.

Why promises are used?

Promises are used to make working with asynchronous code easier and more readable. Before promises, JavaScript relied on callbacks to handle asynchronous operations, which could lead to callback hell—a situation where callbacks are nested within each other, making the code hard to read and maintain.

Here are the main reasons promises are used:

1. Cleaner Asynchronous Code (Avoid Callback Hell)

Promises allow you to chain multiple asynchronous operations without nesting callbacks, making the code more readable and easier to manage. This helps avoid callback hell (deeply nested callbacks) that often results in complex and hard-to-debug code.

Example with Callbacks:

readFile('file1.txt', function(err, data1) {
    if (err) throw err;
    readFile('file2.txt', function(err, data2) {
        if (err) throw err;
        readFile('file3.txt', function(err, data3) {
            if (err) throw err;
            // Do something with data3
        });
    });
});

Example with Promises:

readFile('file1.txt')
  .then(data1 => readFile('file2.txt'))
  .then(data2 => readFile('file3.txt'))
  .then(data3 => {
    // Do something with data3
  })
  .catch(err => console.error(err));  // Catch any error in the chain

2. Better Error Handling

With callbacks, errors need to be passed around manually, which can lead to confusion or missing error handling. Promises make it easy to handle errors using .catch(), and they also ensure that errors are propagated correctly through the chain of promises.

Example:

someAsyncOperation()
  .then(result => {
    return anotherAsyncOperation(result);
  })
  .catch(err => {
    // Handle error here
    console.error('Error:', err);
  });

3. Handling Multiple Asynchronous Operations

Promises provide tools like Promise.all() and Promise.race() that allow you to handle multiple asynchronous operations simultaneously, making it easier to work with parallel tasks.

Example with Promise.all():

Promise.all([task1(), task2(), task3()])
  .then(results => {
    // Handle results from all tasks
  })
  .catch(err => {
    // Handle any error from any task
  });

Promise.all() waits for all promises to resolve before moving on. If any promise is rejected, it will reject immediately.

4. Composing Asynchronous Code

Promises make it easier to compose multiple asynchronous operations in a sequence (using .then()) or in parallel (using Promise.all()), allowing you to build complex asynchronous workflows in a more maintainable way.

Example with .then() Chaining:

fetchData()
  .then(processData)
  .then(saveData)
  .then(response => console.log('Success:', response))
  .catch(error => console.error('Error:', error));

Basic Promise Example:

let myPromise = new Promise((resolve, reject) => {
  let success = true; // Simulate success or failure

  if (success) {
    resolve("Operation was successful!"); // If operation succeeds
  } else {
    reject("Operation failed!"); // If operation fails
  }
});

myPromise
  .then(result => console.log(result))   // Handle success
  .catch(error => console.log(error));   // Handle failure

Explain the difference between .then() and .catch() in promises.

In JavaScript, .then() and .catch() are methods used to handle the resolution or rejection of promises, but they serve different purposes.

.then()

.then() is used to handle the successful resolution of a promise.
It is called when the promise is fulfilled (i.e., it resolves with a value).
It can take two arguments:
1. A callback function that is executed when the promise is resolved (fulfilled).
2. An optional callback function that is executed if the promise is rejected (though it's usually better to use .catch() for handling rejections).

fetch('https://api.example.com/data')
  .then(response => response.json())  // Handles success, processing the resolved value
  .then(data => console.log(data))    // Handles another success case
  .catch(error => console.error(error)); // Handles any rejection

.catch()

.catch() is used to handle the rejection of a promise.
It is called when the promise is rejected (i.e., it encounters an error).
.catch() can be thought of as a shortcut for handling promise rejections. It is attached to the promise to deal with errors or exceptions.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => console.error('An error occurred:', error));  // Handles errors/rejections

Key Differences:

1. Purpose:

.then() is for handling success (resolved promise).
.catch() is for handling failure (rejected promise).

2. Chaining:

.then() returns a new promise, allowing you to chain multiple .then() calls.
.catch() is typically used at the end of the chain to catch any errors that occurred earlier in the promise chain.

3. Error Handling:

.then() allows you to handle success and failure together, but .catch() is usually preferred for catching errors separately in a clean way.

What happens if you return a value inside .then()?

It automatically wraps the value in a resolved promise, allowing further chaining.

1. Returning a non-promise value:

If you return a regular value (e.g., a string, number, object) inside .then(), that value is automatically wrapped in a resolved promise. This means the next .then() in the chain will receive that value as the resolved value.

2. Returning a promise:

If you return another promise inside .then(), the next .then() in the chain will wait for that promise to resolve and will receive the resolved value of the second promise.

Examples:

1. Returning a non-promise value

let myPromise = new Promise((resolve, reject) => {
  resolve('Hello');
});

myPromise
  .then(result => {
    console.log(result); // Output: 'Hello'
    return 'World';     // This is returned as a normal value
  })
  .then(result => {
    console.log(result); // Output: 'World' (received from previous .then())
  })
  .catch(error => {
    console.log(error);
  });

In this case, the value 'World' is returned from the first .then(), which is automatically wrapped in a resolved promise. The second .then() receives 'World' as its argument.

2. Returning a promise:

let myPromise = new Promise((resolve, reject) => {
  resolve('Hello');
});

myPromise
  .then(result => {
    console.log(result); // Output: 'Hello'
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve('World'), 1000);
    });  // Returning a promise
  })
  .then(result => {
    console.log(result); // Output: 'World' (after 1 second)
  })
  .catch(error => {
    console.log(error);
  });

In this case, the first .then() returns a new promise. The second .then() doesn’t execute until the new promise resolves, and once it does, it receives 'World' as the resolved value after 1 second.

How to handle multiple promises efficiently?

In JavaScript, multiple promises can be handled in several ways depending on whether you want to handle the promises in parallel, sequentially, or based on certain conditions.

Parallel execution (use Promise.all() or Promise.allSettled()) when you want to run multiple independent promises at once.
First result wins (use Promise.race() or Promise.any()) when you care about the first promise to resolve or the first one that completes.
Sequential execution (chain .then() calls) when you need the promises to run one after another.

1. Promise.all() – Handle multiple promises in `parallel`

Promise.all() takes an array of promises and returns a single promise. This new promise is resolved when all the promises in the array have been resolved (or it is rejected as soon as any of the promises is rejected).

Example:

const promise1 = new Promise(resolve => setTimeout(() => resolve('First'), 1000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('Second'), 2000));
const promise3 = new Promise(resolve => setTimeout(() => resolve('Third'), 1500));

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results);  // Output: ['First', 'Second', 'Third']
  })
  .catch(error => {
    console.error('One of the promises failed', error);
  });

Benefits:

It runs all the promises in parallel, speeding up execution when there’s no dependency between them.
The promise returned by Promise.all() resolves when all promises have successfully resolved, providing an array of results in the same order they were passed to Promise.all().
Note: If any promise fails, Promise.all() will reject immediately, and the subsequent promises will not continue.

2. Promise.allSettled() – Wait for all promises to settle, regardless of success or failure

Promise.allSettled()returns a promise that resolves after all the promises have either resolved or rejected. It always resolves with an array of objects, each describing the outcome of each promise (either fulfilled or rejected).

Example:

const promise1 = new Promise(resolve => setTimeout(() => resolve('First'), 1000));
const promise2 = new Promise((_, reject) => setTimeout(() => reject('Second Error'), 1500));
const promise3 = new Promise(resolve => setTimeout(() => resolve('Third'), 2000));

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
    // Output: 
    // [
    //   { status: 'fulfilled', value: 'First' },
    //   { status: 'rejected', reason: 'Second Error' },
    //   { status: 'fulfilled', value: 'Third' }
    // ]
  });

Benefits:

Unlike Promise.all(), Promise.allSettled() waits for all promises to settle (whether they resolve or reject), and returns a summary of the result.
It’s useful when you want to track the status of all promises without stopping execution due to a rejection.

3. Promise.race() – Resolve as soon as the first promise resolves or rejects

Promise.race() takes an array of promises and returns a promise that settles as soon as the first promise in the array resolves or rejects. If the first promise is rejected, the returned promise will reject.

Example:

const promise1 = new Promise(resolve => setTimeout(() => resolve('First'), 2000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('Second'), 1000));

Promise.race([promise1, promise2])
  .then(result => {
    console.log(result);  // Output: 'Second' (since it resolves first)
  })
  .catch(error => {
    console.error(error);
  });

Benefits:

It’s useful when you only care about the first result (whether it’s a success or failure).
If you have multiple competing asynchronous operations and just want the one that completes first, Promise.race() is the way to go.

4. Promise.any() – Resolves as soon as one promise resolves, rejects if all promises are rejected

Promise.any() takes an array of promises and returns a single promise that resolves as soon as any one of the promises resolves. If all promises are rejected, it will reject with an AggregateError containing all the rejection reasons.

Example:

const promise1 = new Promise((_, reject) => setTimeout(() => reject('First Error'), 1000));
const promise2 = new Promise((_, reject) => setTimeout(() => reject('Second Error'), 1500));
const promise3 = new Promise(resolve => setTimeout(() => resolve('Third'), 2000));

Promise.any([promise1, promise2, promise3])
  .then(result => {
    console.log(result);  // Output: 'Third' (since it's the first to resolve)
  })
  .catch(error => {
    console.error(error); // Will not reach here in this example
  });

Benefits:

Useful when you only care about the first successful result and can ignore failures.
If all promises fail, it will reject with an AggregateError.

Chaining Promises (Sequential Execution)

If you need to handle promises sequentially (i.e., one promise must resolve before the next one starts), you can simply chain .then() methods.

Example:

const task1 = () => new Promise(resolve => setTimeout(() => resolve('Task 1 complete'), 1000));
const task2 = () => new Promise(resolve => setTimeout(() => resolve('Task 2 complete'), 500));

task1()
  .then(result1 => {
    console.log(result1); // Output: Task 1 complete
    return task2();       // Return the next promise to chain
  })
  .then(result2 => {
    console.log(result2); // Output: Task 2 complete
  })
  .catch(error => {
    console.error('Error:', error);
  });

Benefits:

Guarantees that each promise will only start after the previous one completes, making it perfect for operations that must be executed in order.
This method ensures sequential execution, which might be necessary in some scenarios (e.g., making multiple API calls in order).

Ways to convert a specified number to an array of digits

Jyoti chaudhary — Fri, 28 Feb 2025 06:57:47 +0000

Method: 1. Using toString() and for loop

const numberToArray = (number) =>  {
    let str = number.toString();
    let result = [];
    for (let i = 0; i < str.length; i++) {
        result.push(Number(str[i]));
    }
    return result;
}
console.log(numberToArray(12345)); // Output:  [1, 2, 3, 4, 5]

Method: 2.Using toString(), split(), and map()

const numberToArray = (number) =>  {
     return number.toString().split('').map(Number);
}
console.log(numberToArray(123456)); // Output:  [1, 2, 3, 4, 5, 6]

Method: 3. Using Math.floor() and a while loop

const numberToArray = (number) =>  {
let result = [];
    while (number > 0) {
        result.unshift(number % 10);  // Get the last digit
        number = Math.floor(number / 10);  // Remove the last digit
    }
    return result;
}
console.log(numberToArray(123456));  // Output:  [1, 2, 3, 4, 5, 6]

Method: 4. Using Array.from()

const numberToArray = (number) =>  {
  return Array.from(number.toString(), Number);
}
console.log(numberToArray(123456)); // Output:  [1, 2, 3, 4, 5, 6]

Method: 5. Using reduce()

const numberToArray = (number) =>  {
   return number
        .toString()
        .split('')
        .reduce((acc, digit) => {
            acc.push(Number(digit));
            return acc;
        }, []);
}
console.log("Number to array: ", numberToArray(123456));
// Output: Number to array: [1, 2, 3, 4, 5, 6]

Method: 6. Using Recursion

function numberToArray(number) {
    if (number === 0) return [];
    return [...numberToArray(Math.floor(number / 10)), number % 10];
}
let result = numberToArray(123456)
 console.log("Result: ", result); // Output: Result:  [ 1, 2, 3, 4, 5, 6 ]

useState and useReducer which should we use?

Jyoti chaudhary — Thu, 20 Feb 2025 16:09:15 +0000

When it comes to state management in React, two commonly used hooks are useState and useReducer. These hooks play a crucial role in managing state within functional components. The choice between useState and useReducer in React depends on the complexity of your state management and how the state interacts within your component. Both hooks allow you to manage state, but they serve different purposes that developers should be aware of.. Here's a deeper dive into both hooks, comparing when to use each one and why.

1. useState Hook:

useState is the simplest hook to manage state in functional components. It's suitable when you only need to manage simple or isolated pieces of state.

Syntax:

const [state, setState] = useState(initialState);

When to Use:

Simple state: When your component has small, isolated pieces of state that don't have complicated logic or interactions.
One state change: If your state can be described with one value or a simple array/object, then useState is easy to use and direct.
Local state management: It's great for form fields, toggling UI elements, or small flags.

Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

In this example, useState is ideal because the state is a single number (count) and it's not dependent on any complex logic or actions.

Use Cases for useState:

Simple state variables:

When the state is a simple value (like a number, string, or boolean), useState is the easiest and most intuitive choice.
Example: Toggling a modal, showing or hiding UI elements, updating form fields.

Example:

const [isVisible, setIsVisible] = useState(false);

Form Inputs:

useState is ideal for handling individual form fields or a set of fields where each field has its own independent state.
Example: Handling a user’s name and email input in a form.

Example:

const [name, setName] = useState('');
const [email, setEmail] = useState('');

Single values with minimal logic:

If you need to keep track of a single piece of state like a counter, a boolean flag, or a single input field, useState provides an easy, straightforward solution.

Example:

const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);

Local component state:

When the state is specific to a single component and doesn’t need to be shared across components, useState is perfect.

Limitations of useState:

Scaling issues with multiple state variables: As a component grows in complexity, managing multiple pieces of state with individual useState calls can become cumbersome and harder to maintain.

Example:

If you have a complex form with many fields, you’ll end up with several useState hooks, which can lead to messy code and potential bugs.

Difficulties with dependent states: If your state updates depend on previous values of the state, it can be tricky. Using a functional update inside setState is necessary, but can still get confusing when dealing with multiple dependencies.

Example:

setCount(prevCount => prevCount + 1);

No centralized state logic:

There’s no central place to manage complex state transitions. Each useState hook operates independently, making state management harder when actions depend on each other.

2. useReducer Hook:

useReducer is more powerful than useState and is usually preferred for managing more complex state logic, especially when the state depends on multiple actions or needs to be updated based on previous state values.

Syntax:

const [state, dispatch] = useReducer(reducer, initialState);

reducer: A function that determines how the state should change based on the dispatched action.
initialState: The initial value of the state.

When to Use:

Complex state logic: If the state has multiple sub-values, or when state transitions depend on multiple actions, useReducer can be a cleaner solution.
State transitions based on actions: If you need to manage a state object or array that gets updated based on a series of actions (like increment, decrement, reset, etc.), useReducer is a better choice because it centralizes the state logic.
Avoiding too many useState hooks: If you have a component with a lot of state variables or complex interactions between them, using multiple useState can get hard to manage. useReducer can help centralize and clean up the state logic.

Example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

In this example, useReducer is beneficial because the state consists of an object ({ count: 0 }) and the state updates depend on multiple actions (increment, decrement, reset). The counterReducer function determines how to update the state based on the action type, making the logic more centralized and easier to manage.

Use Cases for `useReducer`:

Complex state logic:

When the state changes based on multiple actions or conditions, using useReducer centralizes the state management and makes it more organized.
Example: A complex form with multiple fields, each with its own validation state and error messages.

Example:

const initialState = { count: 0, status: 'idle' };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'reset':
      return { ...state, count: 0 };
    default:
      return state;
  }
}

State transitions involving multiple actions:

When state changes involve multiple steps or actions, useReducer allows for more predictable transitions, especially in components where the state changes are complex.
Example: A component that handles a user’s authentication state (login, logout, session expired).

Example:

const initialState = { user: null, loading: false, error: null };
function authReducer(state, action) {
  switch (action.type) {
    case 'LOGIN_REQUEST':
      return { ...state, loading: true };
    case 'LOGIN_SUCCESS':
      return { ...state, loading: false, user: action.user };
    case 'LOGIN_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
}

Handling complex state objects or arrays:

If your state is an object or array with several sub-properties that require specific updates, useReducer can be used to structure and manage the state more effectively.
Example: Managing a form with different input fields, each with its own error message, validity, and other related data.

Decoupling UI logic from business logic:

useReducer is useful when you want to separate how the UI updates from the business logic that defines how the state should change.
Example: For complex workflows, like a multi-step form, that require a defined flow for state transitions.

Limitations of `useReducer`:

More boilerplate:

useReducer introduces more boilerplate code compared to useState. You'll need to define a reducer function and action types, which might feel overkill for simple state management.
Example: Writing a reducer function with a switch statement can be more verbose than simply using useState.

Learning curve:

For beginners, useReducer might seem like overkill because it requires understanding of reducers, actions, and the concept of immutability. It’s a bit harder to get started with compared to useState.

Not necessary for simple state:

If your component’s state is simple, like a single boolean or number, using useReducer adds unnecessary complexity. It’s better to reserve useReducer for scenarios where you have complex state logic.

Dispatching actions and managing flow:

If you don’t need to centralize your state logic, managing each action type and dispatching it properly can lead to unnecessary complexity, especially if you're only working with a small amount of state.

Comparison:

Which One to Use?

1. Use `useState` if:

The state is simple (e.g., a number, string, or boolean).
You don't have complex state transitions.
You have one or a few state variables that are not interdependent.

2. Use `useReducer` if:

The state logic is complex or involves multiple actions that update different parts of state.
You have a state that changes based on multiple conditions.
You want a more organized and scalable way of managing state in large components.

Best Practice:

If you’re just building a small form or handling simple interactions like toggling visibility, useState is often the best choice.
For more advanced or large components with multiple, interdependent pieces of state or complex updates (e.g., multi-step forms, managing arrays/objects, etc.), useReducer can lead to more maintainable code.

How frontend interact with backend?

Jyoti chaudhary — Fri, 14 Feb 2025 08:16:26 +0000

In a MERN stack (MongoDB, Express, React, Node.js), the frontend (React) interacts with the backend (Node.js + Express) primarily through HTTP requests. The backend handles these requests, processes them (often involving interactions with a database like MongoDB), and returns a response to the frontend.

How the Frontend (React) and Backend (Node.js/Express) Interact:

1. Frontend (React):

The frontend is responsible for displaying the user interface, handling user input, and making HTTP requests to the backend when it needs data or to perform actions (such as submitting a form).
In technically terms, we call frontend as client, it can be anything your web application, mobile application or any user facing application.
Client talk via APIs to the server(backend).
React uses libraries like Axios or the native Fetch API to make HTTP requests (GET, POST, PUT, DELETE, etc.) to the backend.

2. Backend (Node.js +Express):

The backend (Express) receives the HTTP requests from the frontend, processes them (such as fetching or modifying data from MongoDB), and sends back a response, which could be data (JSON) or an acknowledgment of the operation.
These fetch calls have routes(like /product, /home, /profile, or ...) and all the code for these routes will be written in Express.
Express also known as routing library, but it's more accurate to call it a web application framework for Node.js. It provides a set of tools that make it easier to build web applications and APIs, and one of its core functionalities is routing.
Server talks database, to get data or to send data by queries (like find, findOne, findById, findByIdAndDelete, findByIdAndUpdate or more queries).
The backend typically exposes routes (API endpoints) for the frontend to call.

3. Database (MongoDB):

MongoDB is a NoSQL database where data is stored in collections and documents. The backend uses MongoDB to store and retrieve data in response to requests from the frontend.
The most commonly used ODM (Object Data Modeling) for MongoDB in Node.js applications is Mongoose.
Mongoose is an ODM library that provides a straightforward way to interact with MongoDB from a Node.js environment. It allows you to define data schemas, validate data, perform CRUD (Create, Read, Update, Delete) operations, and more, in an object-oriented way.

Example: Frontend (React) Making a GET Request to Backend (Express) to Fetch Data

Backend (Express):

Let's start by setting up a basic Express server with one API endpoint to get a list of items from the database.

server.js(Backend)

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = 5000;

// Use CORS to allow requests from the frontend
app.use(cors());

// MongoDB connection
mongoose.connect('mongodb://localhost:27017/mern-demo', 
  { 
    useNewUrlParser: true,
    useUnifiedTopology: true 
  });

// Sample MongoDB schema and model
const Item = mongoose.model('Item', new mongoose.Schema({ name: String }));

// Route to fetch items from MongoDB
app.get('/api/items', async (req, res) => {
  try {
    const items = await Item.find();
    res.json(items);  // Send items as JSON response
  } catch (err) {
    res.status(500).send('Server Error');
  }
});

// Route to Add items to MongoDB
app.post('/api/items', async (req, res) => {
  const { name } = req.body;  // Extract 'name' from request body

  try {
    const newItem = new Item({ name });
    await newItem.save();  // Save the item to MongoDB
    res.json(newItem);  // Send the saved item back as a response
  } catch (err) {
    res.status(500).send('Server Error');
  }
});


// Start server
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Frontend (React):

Now, on the frontend (React), we can make a GET request to this API to fetch the items.

App.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // Fetch data from the backend
    axios.get('http://localhost:5000/api/items')
      .then(response => {
        setItems(response.data);  // Set items to state
      })
      .catch(error => {
        console.error('There was an error fetching the items!', error);
      });
  }, []);  // Empty array means this effect runs only once when the component mounts

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map(item => (
          <li key={item._id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

CreateItems.js

import React, { useState } from 'react';
import axios from 'axios';

const CreateItems = () => {
  const [name, setName] = useState('');

  const addItem = async () => {
    try {
      const response = await axios.post('http://localhost:5000/api/items', { name });
      console.log('Item added:', response.data);
      setName(''); // Reset input field
    } catch (error) {
      console.error('There was an error adding the item!', error);
    }
  };

  return (
    <div>
      <h1>Add Item</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter item name"
      />
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

export default CreateItems;

Explanation:

1. Backend (Express) Setup:

The backend has a two routes, one get(/api/items) that fetches a list of items and second post(/api/items) create a item to the MongoDB database using Mongoose.
The Item model is a simple schema that has a name field (you can add more fields as per your requirement).
The server listens on port 5000, and CORS is enabled to allow requests from the React frontend (which typically runs on port 3000 in development).

2. Frontend (React) Setup:

In the App.js file, the useEffect hook is used to fetch data when the component mounts (i.e., when the app is first loaded).
The axios.get method is used to make an HTTP GET request to the backend's /api/items endpoint.
When the data is fetched, it's stored in the component's state (items), and the list of items is rendered in an unordered list.

3. CORS:

CORS (Cross-Origin Resource Sharing) is enabled in the Express server to allow the React frontend to make requests to the backend even though they are running on different ports (React usually runs on port 3000, while Express runs on port 5000).

Summary:

The React frontend makes HTTP requests (GET, POST, etc.) to the Express backend.
The Express server handles the requests, interacts with the MongoDB database, and sends responses (data or acknowledgment) back to the frontend.
This communication typically happens via RESTful APIs exposed by the backend.

Shallow copy and Deep copy

Jyoti chaudhary — Tue, 11 Feb 2025 05:57:59 +0000

1. Shallow Copy

A shallow copy creates a new object or array but does not recursively copy the nested objects/arrays inside it. Instead, the references to the nested objects are copied, so changes to nested objects affect both the original and the copied objects.
In this process, only the top-level properties are copied, while nested objects or arrays still reference the original memory location. This means that if you change the nested properties in one object, those changes will reflect in the other because they share the same memory reference.

Example 1: Shallow Copy using Object.assign():

// Original Object
const original = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  }
};

// Shallow copy using Object.assign()
const shallowCopy = Object.assign({}, original);

// Modify the nested object in the shallow copy
shallowCopy.address.city = "Los Angeles";
shallowCopy.name = "Sumit";

console.log(original.address.city);     // Output: "Los Angeles"

console.log(shallowCopy.address.city);    // Output: "Los Angeles"

console.log(original);     // Output: {name: 'John', age: 30, address: {city: 'Los Angeles', zip: '10001'}}

console.log(shallowCopy);   // Output: {name: 'Sumit', age: 30, address: {city: 'Los Angeles', zip: '10001'}}

Explanation: In the above example:

original is an object with a nested object address.
shallowCopy is created using Object.assign(), which copies only the first level of properties from original to shallowCopy.
However, since address is a reference to the same object in both original and shallowCopy modifying shallowCopy.address affects both objects, but not name which shares different memory, so it doesn't affect the 'original' object.

Example 2: Shallow Copy using the Spread Operator

// Original object
const book = {
  title: 'JavaScript Guide',
  author: 'John Doe',
  publisher: {
    name: 'Tech Books',
    year: 2020
  }
};

// Shallow copy using the spread operator
const bookCopy = { ...book };

// Modify the nested object in the copied object
bookCopy.publisher.year = 2023;

console.log(book.publisher.year); // Output: 2023 (affected)
console.log(bookCopy.publisher.year); // Output: 2023

Explanation:

The spread operator ({...book}) creates a shallow copy of the object. However, since publisher is a nested object, both the original and the copied object share the same reference for the publisher object.

Example 3: Shallow Copy with Arrays using the Spread Operator

// Original array
const colors = ['red', 'green', 'blue'];

// Shallow copy using the spread operator
const colorsCopy = [...colors];

// Modify an element in the copied array
colorsCopy[0] = 'yellow';

console.log(colors); // Output: ['red', 'green', 'blue']
console.log(colorsCopy); // Output: ['yellow', 'green', 'blue']

Explanation:

In this case, the spread operator creates a shallow copy of the array. Since the array doesn't contain any nested objects or arrays, changes to the copied array don’t affect the original.

Example 4: Shallow Copy with Arrays using Slice

// Original array
const numbers = [1, 2, [3, 4]];

// Shallow copy using slice method
const numbersCopy = numbers.slice();

// Modify the nested array in the copied array
numbersCopy[2][0] = 99;
numbersCopy[1] = 12

console.log(numbers); // Output: [1, 2, [99, 4]
console.log(numbersCopy); // Output: [1, 12, [99, 4]

Explanation:

The shallow copy with .slice() only copied the references for the nested arrays.
Modifying the nested array (numbersCopy[2][0] = 99) affected both numbers and numbersCopy because they share the same reference to the nested array.
Modifying a non-nested element (numbersCopy[1] = 12) only affected numbersCopy, not numbers, because it is a primitive value (non-reference type).

Thus, the shallow copy mechanism with .slice() works at the top level for the array but does not fully isolate nested objects or arrays.

Example 5: Shallow Copy with Objects Containing Arrays

const config = {
  theme: 'dark',
  colors: ['red', 'green'],
};

// Shallow copy using Object.assign()
const configCopy = Object.assign({}, config);

// Modify the array in the copied object
configCopy.colors[0] = 'yellow';
config.theme = "light"

console.log(config); // Output: {theme: 'light', colors: ['yellow', 'green']}
console.log(configCopy); // Output: {theme: 'dark', colors: ['yellow', 'green']}

Explanation:

configCopy.theme remains 'dark' because theme is a primitive, and the shallow copy copied the value, not the reference.
configCopy.colors still points to the array ['yellow', 'green'], but this change was due to the shared reference between config and configCopy (they both point to the same array).
Shallow copy means that the top-level properties are copied, but for reference types (arrays, objects), only the reference is copied, not the actual values.

Example 6: Shallow Copy with Arrays Containing Objects

// Original array containing objects
const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 }
];

// Shallow copy using slice
const productsCopy = products.slice();

// Modify the object in the copied array
productsCopy[0].price = 1200;

console.log(products[0]); // Output: {name: 'Laptop', price: 1200}
console.log(productsCopy[0]); // Output: {name: 'Laptop', price: 1200}

Explanation:

Since the products array contains objects, and slice() creates a shallow copy, both products and productsCopy refer to the same object for each element in the array. Changing the price in the copied array also affects the original array.

In a shallow copy, primitive values are copied by value, so changing them doesn’t affect the original, but nested objects are copied by reference, so changes reflect in both.

2.Deep Copy

A Deep Copy creates a completely independent copy of the object, and recursively copies all nested objects and arrays, meaning that changes to the deep copy will not affect the original object and vice versa. This ensures that changes made to one object do not affect the others. Each object is stored in a separate memory location, making them entirely independent.

Example:

// Original Object
const original = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  }
};

// Deep copy using JSON methods
const deepCopy = JSON.parse(JSON.stringify(original));

// Modify the nested object in the deep copy
deepCopy.address.city = "Los Angeles";

console.log(original.address.city); // Output: "New York"
console.log(deepCopy.address.city); // Output: "Los Angeles"

Explanation:

JSON.stringify() converts the object into a JSON string.
JSON.parse() parses the string back into a new object.
This creates a new, independent object where all nested objects are copied, and any modifications to the deep copy do not affect the original object.

Important Differences:

Deep Copy with Arrays:

// Original Array
const originalArray = [1, 2, [3, 4]];

// Deep copy using JSON methods
const deepCopyArray = JSON.parse(JSON.stringify(originalArray));

// Modify the nested array
deepCopyArray[2][0] = 99;
deepCopyArray[1] = 12

console.log(originalArray); // Output: [1, 2, [3, 4]
console.log(deepCopyArray); // Output: [1, 12, [99, 4]

Explanation:

const deepCopyArray = JSON.parse(JSON.stringify(originalArray));

`JSON.stringify(originalArray):`

This converts the entire originalArray into a JSON string. The nested array [3, 4] is also converted to its JSON representation (a string representation).

`JSON.parse():`

The JSON.parse() method takes the JSON string and converts it back into a new object or array.
The key point here is that nested objects (like the array [3, 4]) are also deep-copied, not just the top-level array.
As a result, deepCopyArray is an entirely new array with a new reference, and the nested array [3, 4] is also a new reference in deepCopyArray. This is the key difference between deep copy and shallow copy.

deepCopyArray[2][0] = 99;

Here, deepCopyArray[2] refers to the nested array [3, 4], which is a new, independent array from the one in originalArray.
We change the first element of this nested array to 99. This does not affect originalArray because the nested arrays are deeply copied.

originalArray: [1, 2, [3, 4]]

This remains unchanged because we performed a deep copy, meaning the original array and the copied array are completely independent, including their nested arrays.

deepCopyArray: [1, 12, [99, 4]]

This reflects the changes we made:
The second element was changed from 2 to 12.
The first element of the nested array was changed from 3 to 99.

Caveats:

Using JSON.parse(JSON.stringify()) for deep copying has limitations:
It cannot copy functions, undefined, RegExp, Date, or circular references.
It might not preserve special object types (e.g., Map, Set, or Date).

For these cases, libraries like Lodash provide more robust deep copying utilities (e.g., _.cloneDeep()), which handle these edge cases more gracefully.

Shallow Copy is faster but links to nested objects, meaning changes to nested structures will reflect in both the original and the copy.
Deep Copy is slower but creates a fully independent copy, including all nested objects, which makes it more suitable when you need complete isolation between the original and the copied object.

Why Serverless Architecture is the Future of Web Development: Pros and Cons

Jyoti chaudhary — Fri, 07 Feb 2025 10:44:54 +0000

Serverless architecture is an innovative cloud computing solution where
developers build and run applications without managing servers. Thus, developers can focus solely on the application code. Serverless doesn't mean that servers are absent but developers don’t have to deal with server management handled by providers.

Instead of provisioning and maintaining servers, developers rely on cloud providers like AWS (Amazon Web Services), Google Cloud, or Microsoft Azure to automatically scale and manage the infrastructure for them.
The idea is that you only pay for what you use, and the cloud provider automatically scales resources based on demand.

Serverless Architecture:

How Serverless Works (Example):

Imagine you're building an e-commerce website:

1. User Places an Order:

When a user places an order on your site, an API Gateway receives the request.
The API Gateway triggers a serverless function (like AWS Lambda) that handles payment processing.
The serverless function processes the payment and updates the order status in a database.

2. Scalability Example:

If 10,000 people place orders at once, the cloud provider automatically scales the number of serverless functions to handle the traffic. You only pay for the computation time of those functions during the orders' processing.

Serverless Computing Providers and Platforms

With distinct platforms and features suited to various development requirements, serverless computing has emerged as a key area of attention for numerous cloud service providers. These are a few of the top platforms and providers of serverless computing:

AWS Lambda: Without having to provision or manage servers, developers may use AWS Lambda, perhaps the most well-known serverless computing tool, to execute code in response to events from more than 200 AWS services and SaaS apps.
Azure Functions: With Azure Functions, a serverless compute solution from Microsoft, you can execute event-triggered code without explicitly provisioning or managing infrastructure. Azure Functions easily connects with other Azure services and supports a large number of programming languages.
Google Cloud Functions: This is the serverless execution environment used by Google to create and link cloud services. All you have to do with Google Cloud Functions is write your code; Google handles the management, scaling, and underlying infrastructure.
Oracle Cloud Functions: Using functions that are triggered by HTTP requests or events coming from Oracle Cloud services, developers can create apps with Oracle's serverless architecture. It is intended to provide an integrated cloud experience by integrating easily with Oracle's existing cloud products.

Developing serverless applications requires a shift in how you approach traditional application architecture, focusing on cloud-based services that handle infrastructure management for you. Here's a step-by-step guide to building a serverless application:

Steps for Developing Serverless Applications

1. Define the Application’s Requirements

Before diving into the technical details, you need to outline the business logic and functionality of your serverless application. Consider the following:

Event-driven: What events will trigger the functions? (e.g., user requests, database changes, file uploads)
Services needed: What AWS services (or services from other cloud providers) will be used? (e.g., AWS Lambda, DynamoDB, S3, API Gateway)
Scalability and performance needs: Estimate expected usage to decide if serverless fits well or if you need hybrid architectures.

2. Choose Your Cloud Provider

Most serverless platforms are tied to a particular cloud provider. You’ll need to pick one based on your requirements:

AWS Lambda (Amazon Web Services)
Google Cloud Functions (Google Cloud)
Azure Functions (Microsoft Azure) Other providers such as IBM Cloud Functions or Oracle Functions also offer serverless computing.

3. Define and Create Serverless Functions

Serverless functions (e.g., AWS Lambda functions) are the heart of your serverless application. Each function is responsible for executing a small unit of work.

Write your function code: Develop small, stateless functions that are triggered by events like HTTP requests, file uploads, or database changes.
For example, a function might process an incoming HTTP request to fetch user data from a database.
Function Triggers: Define how the function will be triggered. These triggers can include:
- HTTP requests (via an API Gateway)
- Changes in a database (using DynamoDB Streams or Google Firestore)
- File uploads to cloud storage (S3, Google Cloud Storage)
- Scheduled tasks (using CloudWatch Events or Google Cloud Scheduler)
Example: A function in AWS Lambda that sends a welcome email when a new user signs up for an app.

4. Set Up API Gateway (for HTTP-based Applications)

If your serverless application interacts with web clients, you'll likely need an API Gateway to expose your serverless functions as HTTP endpoints.

Create API Gateway: This will act as a frontend to route incoming HTTP requests to the appropriate serverless function.
- For example, AWS API Gateway can expose HTTP endpoints that route requests to Lambda functions.
Define routes and methods: Set up HTTP methods (GET, POST, PUT, DELETE) to connect specific routes to functions.
- Example: /users/{userId} might be routed to a Lambda function that fetches user information.
Authentication and Authorization: Implement security features like OAuth or API keys to secure your API endpoints, if necessary.

5. Set Up Data Storage (Database and File Storage)

Even though serverless removes the need to manage traditional servers, you still need to store and access data.

NoSQL Databases: Serverless applications often use managed NoSQL databases like:
- Amazon DynamoDB (AWS)
- Firestore (Google Cloud)
- Cosmos DB (Azure)

These databases can scale automatically with your application’s needs.

Object Storage: If your application deals with files (e.g., images, documents), use cloud storage solutions like:
- Amazon S3
- Google Cloud Storage
- Azure Blob Storage

These services scale based on usage and don’t require server management.

6. Handle Authentication and Authorization

For secure access, it’s essential to integrate authentication into your serverless application.

Authentication: Use services like AWS Cognito, Firebase Authentication, or Azure Active Directory to authenticate users.
Authorization: Implement role-based access control (RBAC) or policies to control which users or services can access specific resources.

For example:

AWS Cognito can authenticate users, and then AWS API Gateway can authorize requests using IAM roles or Lambda authorizers.

7. Deploy Serverless Functions and Infrastructure

After your functions are developed, you’ll need to deploy them to the cloud. Here’s how you can go about it:

Serverless Framework: One of the most popular tools for deploying serverless applications is the Serverless Framework. It abstracts much of the complexity and makes deploying easier.
- Command: serverless deploy to automatically upload your functions and resources to the cloud.
Other Deployment Tools: You can also use native tools provided by your cloud provider, such as:
- AWS SAM (Serverless Application Model)
- Google Cloud Deployment Manager
- Azure Functions Deployment
CI/CD Pipeline: Set up continuous integration and delivery (CI/CD) pipelines using tools like GitLab CI, GitHub Actions, or AWS CodePipeline to automate deployments and updates.

8. Monitor and Log Serverless Functions

Monitoring and logging are vital for debugging and understanding how your functions are performing in the cloud.

Cloud-native Monitoring: Use services like AWS CloudWatch, Google Stackdriver, or Azure Monitor to track the performance and logs of your serverless functions.
Metrics to Monitor: Keep an eye on:
- Function execution times
- Invocation counts
- Errors and failures
- Cold start durations
Example: AWS Lambda’s CloudWatch Logs provide detailed logs of function execution, which can help debug errors or optimize performance.

9. Implement Caching and Optimization (Optional)

For performance optimization, serverless applications often require caching mechanisms to minimize response time and reduce costs.

Cache Responses: Use services like AWS API Gateway caching, AWS CloudFront, or Google Cloud CDN to cache responses from your functions.
Optimize Functions: Refactor serverless functions to reduce cold start times or handle higher volumes of requests effectively.

10. Test and Iterate

Before launching, thoroughly test your serverless application to ensure that it meets your performance and functionality requirements:

Unit Testing: Test individual functions using frameworks like Jest (for Node.js functions) or PyTest (for Python).
Integration Testing: Test the integration of serverless functions with other services (e.g., databases, storage, APIs).
Load Testing: Simulate high-traffic scenarios to ensure your serverless functions can handle sudden spikes in traffic without failing or becoming too slow.

Example Serverless Workflow for an E-commerce Application:

User Browsing Product: User accesses the product page; a request is sent to the serverless function via API Gateway.
Fetch Product Data: Lambda function queries a NoSQL database (e.g., DynamoDB) and returns product details to the front-end.
User Makes Purchase: User checks out and an API Gateway request triggers a payment processing function in Lambda.
Payment Processed: Payment information is processed via an external API (e.g., Stripe) and the order is saved to DynamoDB.
Confirmation Email: A separate Lambda function sends an order confirmation email using an email service like AWS SES.

Pros of Serverless Architecture:

1. Cost Efficiency:

Pay-per-use model: With serverless, you only pay for the compute resources you use. You aren’t paying for idle server time, which makes it a highly cost-efficient option, especially for applications with variable traffic.
No infrastructure management costs: Developers don’t need to worry about managing or maintaining servers, reducing operational overhead.

2. Scalability:

Automatic scaling: Serverless platforms automatically scale to accommodate the demand. When there is an influx of requests, the platform scales up, and when demand decreases, it scales down without manual intervention.
No need to plan for peak loads: You don’t have to worry about provisioning for peak capacity, which reduces unnecessary costs.

3. Faster Time to Market:

Simplified development: Since developers don’t need to manage infrastructure, they can focus purely on writing code, speeding up the development process.
Managed services: Serverless platforms often come with a variety of pre-configured services such as databases, authentication, and storage, which accelerate development.

4. Flexibility and Focus on Code:

Developers only need to focus on the application logic, as the cloud provider handles everything else (e.g., scaling, load balancing, and provisioning).
This allows businesses to innovate faster and focus on their product instead of infrastructure.

5. Reduced Operational Complexity:

No server management: No need to manage or patch servers, which simplifies the operational aspect of running applications.
Built-in monitoring and logging: Many serverless platforms offer built-in monitoring, which helps developers track performance without extra setup.

Cons of Serverless Architecture:

1. Cold Starts:

Latency issues: When a function is called after a period of inactivity, it can experience “cold start” delays. This happens because the platform must initialize the serverless function before it can execute, leading to higher latency.
Impact on performance: This can negatively affect user experience, especially in real-time applications.

2. Vendor Lock-in:

Dependence on cloud provider: Serverless applications are often tightly coupled with the cloud provider’s ecosystem. Migrating to a different provider could be challenging and costly, leading to vendor lock-in.
Limited portability: Since each cloud provider has its own proprietary offerings and services, serverless applications may not be easily portable across different platforms.

3. Limited Control and Customization:

Less control over infrastructure: Since the infrastructure is abstracted away, developers have limited control over the underlying environment and configuration, which could be restrictive for certain use cases.
Harder debugging and testing: Testing serverless functions locally can be difficult, and debugging issues in a cloud environment may require a different approach compared to traditional server-based applications.

4. Resource Limits:

Execution time limits: Many serverless providers impose execution time limits on functions, meaning that long-running processes may not be suitable for serverless architecture.
Memory and storage restrictions: Some platforms may have limits on the amount of memory, storage, or concurrent executions, which could pose challenges for certain applications.

5. Security Concerns:

Surface area for attacks: Serverless applications might increase the attack surface since each function can be seen as an individual service. Ensuring proper security configurations for each function is crucial.
Cold start vulnerability: Cold starts could also potentially introduce security concerns if attackers manage to exploit the delay in execution.

6. Harder for Stateful Applications:

Not ideal for long-running, stateful applications: Serverless functions are inherently stateless, so handling stateful workloads (like sessions or persistent user data) requires additional architecture, often involving external services like databases or storage.

Real-Life Examples of Serverless Usage:

1. Netflix:

Netflix uses AWS Lambda to handle tasks like user authentication and video streaming events. The platform's scalability is enhanced by serverless architecture to handle massive traffic spikes.

2. Airbnb:

Airbnb utilizes AWS Lambda for serverless functions to manage reservations and user notifications, benefiting from the automatic scaling during traffic spikes (e.g., peak booking seasons).

3. Slack:

Slack uses serverless functions to handle real-time notifications and interactions, which can scale up and down as needed based on user activity.

Serverless Architecture Use Cases

Serverless architecture is ideal for many types of applications due to its scalability, flexibility, and cost efficiency. Here are several use cases where serverless architecture excels:

1. Web and Mobile Backends

Serverless is well-suited for building backends for web or mobile applications because it scales automatically based on demand.

Example Use Case: E-commerce application backend

When users visit an e-commerce website, serverless functions can handle requests like searching for products, checking out, and updating user information. Since traffic can vary (more during sales or peak hours), serverless applications automatically scale to handle surges, and you only pay for the time spent processing requests.
Why Serverless?:

Serverless architectures, such as AWS Lambda and Google Cloud Functions, automatically scale based on incoming requests. With serverless, developers can focus on business logic without worrying about managing infrastructure, providing cost-efficient and responsive web and mobile app backends.

2. Real-Time Data Processing

Serverless architectures are great for processing streams of data in real-time.

Example Use Case: Real-time analytics

Consider a service like Twitter that processes massive streams of tweets or a stock trading platform analyzing real-time data. Serverless functions can be used to process and transform real-time data, aggregate results, and store them in databases.
Why Serverless?:

Serverless functions are well-suited for short-lived, event-driven tasks. Cloud services such as AWS Lambda or Azure Functions can process events as they come, such as data streams from Kafka, Kinesis, or Google Cloud Pub/Sub, without requiring a full-time server.

3. Image or File Processing

Serverless functions can handle image manipulation, video encoding, or file format conversion tasks. This is especially useful when working with images, audio files, or videos uploaded by users.

Example Use Case: Image resizing and thumbnail generation

When a user uploads an image to a site like Instagram or Flickr, serverless functions can automatically resize the image into multiple formats or create thumbnails for faster display.
Why Serverless?:

Serverless functions can be triggered by file uploads to cloud storage (e.g., AWS S3, Google Cloud Storage). Functions only run when needed (e.g., to resize or optimize an image), and you pay for the actual processing time. This makes it cost-effective, as you don’t need to run a server waiting for uploads.

4. Chatbots and AI/ML Integration

Serverless is a great fit for running small, event-driven tasks like processing chatbot messages, executing machine learning models, or interacting with AI APIs.

Example Use Case: Customer support chatbot

A company integrates a serverless chatbot to handle customer inquiries, where serverless functions process natural language queries and connect to an AI backend (like AWS Lex or Google Dialogflow) to generate responses.
Why Serverless?:

Serverless functions handle individual requests, and they scale up or down based on the volume of queries. Machine learning or AI models can be invoked via serverless functions to process requests in real-time, without requiring a long-running backend server.

5. Event-Driven Applications

Serverless is perfect for applications that require event-driven workflows, such as responding to events or triggers from other services.

Example Use Case: IoT device data processing

In an Internet of Things (IoT) setup, data from sensors or devices can be processed in real-time using serverless functions. For example, data from a smart thermostat (temperature readings) can trigger a serverless function that adjusts a home’s heating or cooling system.
Why Serverless?:

Serverless functions are ideal for event-driven workloads. The architecture works well with services that generate events or notifications, such as cloud storage (file uploads), databases (data changes), or messaging queues. Since serverless functions are triggered by events, they can process these events as they happen.

6. Handling Webhooks and APIs

Serverless is a natural fit for handling webhooks and lightweight API processing.

Example Use Case: Processing payment gateway notifications

When a payment is processed via a service like Stripe, a webhook is triggered to notify your system. A serverless function can process the webhook, update the user’s account, and handle any further actions.
Why Serverless?:

Serverless functions are lightweight, cost-efficient, and can easily handle webhooks or lightweight API requests. You can create endpoints using API Gateway (AWS, Azure, etc.) that invoke serverless functions upon receiving an HTTP request.

The Future of Serverless Computing

The future of serverless computing appears incredibly bright as the technology continues to evolve and adapt to new challenges and opportunities. As we look forward, we can anticipate significant advancements that will enhance the security and reliability of serverless platforms, addressing the notable limitations.

One of the primary benefits of serverless computing is its ability to scale effortlessly according to application demands without manual intervention in server management. Future developments will further capitalize on this advantage, refining auto-scaling capabilities to become more responsive and cost-effective.

Moreover, integrating serverless architecture with cutting-edge technologies like artificial intelligence (AI) and machine learning (ML) promises to revolutionize how businesses approach problem-solving and innovation.

When discussing serverless pros and cons, it’s also worth mentioning security as a critical concern for many organizations considering serverless. This aspect will likely see robust enhancements soon. As serverless platforms mature, we expect more sophisticated security protocols embedded into the architecture. Such technologies offer tighter controls and more robust protection measures against potential cyber threats.

In summary, the future of serverless computing is not just about maintaining the status quo but pushing the boundaries of cloud technology possibilities.

Reverse an array in different ways.

Jyoti chaudhary — Thu, 06 Feb 2025 10:18:43 +0000

There is a built-in array method in Javascript that reverses the array i.e. reverse() method.

1. Using reverse() method:

reverse() method: The reverse() method reverses the array in place, meaning it modifies the original array directly and does not return a new array.

Example:

const givenArr = [5, 2, 3, 7, 9, 15, 20];
const reversedArr1 = givenArr.reverse();

// Prints the reversed array
console.log(reversedArr1);  // Output: [20, 15, 9, 7, 3, 2, 5]
console.log(givenArr);  // Output: [20, 15, 9, 7, 3, 2, 5]

The reverse() method directly modifies the original array by reversing its elements.
The reversed array is also returned as the result of the method

In the above example, If you want to avoid modifying the original array, you can first create a copy of the array using .slice() and then apply .reverse() to the copy.

const givenArr = [5, 2, 3, 7, 9, 15, 20];

// Create a copy of the array and reverse the copy
const reversedArr = givenArr.slice().reverse();

console.log(reversedArr);  // Output: [20, 15, 9, 7, 3, 2, 5]
console.log(givenArr);   // Output: [5, 2, 3, 7, 9, 15, 20]

2. Using a for-loop:

const givenArr = [5, 12, 3, 7, 21, 9, 45, 90];
const printReversedArr = (arr) => {
    const arrLen = arr.length;
    for(let i = 0; i < arrLen / 2; i++) {
        let temp = arr[i];
        arr[i] = arr[arrLen - 1 - i];
        arr[arrLen - 1 - i] = temp
    }
    return arr ;
}
console.log(printReversedArr(givenArr));  // Output: [90, 45, 9, 21, 7, 3, 12, 5]

3. Using a for-loop (with a new array):

const givenArr = [5, 12, 3, 7, 21, 9, 45, 90];
const getReverseArr = (arr) => {
    let reversedArr = [];
    for(let i = arr.length - 1; i >= 0 ; i --) {
        reversedArr.push(arr[i]);
    }
    return reversedArr;
}
console.log(getReverseArr(givenArr));  // Output: [90, 45, 9, 21, 7, 3, 12, 5]

4. Using forEach() method:

const givenArr = [ 12, 3, 21, 9, 45, 22, 7];
const reverseArray = (arr) => {
    let reversedArr = [];
    arr.forEach(item => {
        reversedArr.unshift(item);
    });
    return reversedArr;
}
console.log(reverseArray(givenArr));  // Output: [7, 22, 45, 9, 21, 3, 12]

5. Using reduce() method:

const givenArr = [ 12, 3, 21, 9, 45, 22, 7];
const reverseArray = (arr) => {
    return arr.reduce((reversed, current) => [current, ...reversed], []);
}
console.log(reverseArray(givenArr));  // Output: [7, 22, 45, 9, 21, 3, 12]

6. Using unshift() method:

const givenArr = [5, 2, 3, 7, 9, 15, 20];
const  reverseArray = (arr) => {
    let reversedArr = [];
    for (let i = 0; i < arr.length; i++) {
        reversedArr.unshift(arr[i]);
    }
    return reversedArr;
}
console.log(reverseArray(givenArr));  // Output: [20, 15, 9, 7, 3, 2, 5]

7. Using a while loop (in-place modification):

const givenArr = [10, 6, 9, 3, 4, 5, 1];
const reverseArray = (arr) => {
    let start = 0;
    let end = arr.length - 1;
    while (start < end) {
        // Swap elements at start and end
        let temp = arr[start];
        arr[start] = arr[end];
        arr[end] = temp;

        start++;
        end--;
    }
    return arr;
}
console.log(reverseArray(givenArr));  // Output: [1, 5, 4, 3, 9, 6, 10]

8. Using recursion:

const givenArr = [10, 6, 9, 3, 4, 5, 1];
const reverseArray = (arr) =>  {
    if (arr.length === 0) {
        return arr;
    } else {
        return reverseArray(arr.slice(1)).concat(arr[0]);
    }
}
console.log(reverseArray(givenArr));  // Output: [1, 5, 4, 3, 9, 6, 10]
console.log("Original Array: ", givenArr);  // Output: Original Array: [10, 6, 9, 3, 4, 5, 1]

Closure in JavaScript

Jyoti chaudhary — Wed, 05 Feb 2025 08:57:11 +0000

A closure is the combination of a function and the lexical environment within which that function was declared.
OR
A closure in JavaScript is a function that remembers its lexical scope (the scope in which it was created) even when it is executed outside that scope. This means that a function can "remember" the environment in which it was created, including any variables that were in scope at the time.

Imagine you want to speed posting some documents. You put all the documents in an envelope and sealed it. All the documents are inside the envelope and after speed posting from one place to another, the documents are still inside it. Similarly, a closure "remembers" the variables from the place where it was created, even after it moves to a different place in the code.

Lexical Scoping:

JavaScript functions are lexically scoped, meaning that they can access variables from the surrounding code in which they were defined, even if that surrounding code is no longer in execution.

In simple terms:

Lexical scope means that the scope of a variable is defined by where it is written in the code, not where it is called from.
A closure captures variables from the outer scope at the time the function is created, not when it is called.

How does closure work?

In a closure, when a function is declared inside another function, it gets access to the outer function's variables. Even after the outer function has finished executing, the inner function retains access to those variables.

1: Basic Closure Example:

function outerFunction() {
  let outerVariable = 'I am outside!';

  function innerFunction() {
    console.log(outerVariable);  // Inner function uses outerVariable
  }

  return innerFunction;
}

const closureFunc = outerFunction();  // Call the outer function
closureFunc();  // Even though outerFunction is done, innerFunction can still access outerVariable

// Output: I am outside!

Explanation:

outerFunction has a variable called outerVariable and it returns another function (called innerFunction).
When outerFunction() is called, it returns the innerFunction.
Even though outerFunction has finished executing by the time closureFunc is called, the innerFunction still remembers the outerVariable that was declared in the outer function. This is the closure.

2: Closure with Arguments:

function multiplier(x) {
  return function(y) {
    return x * y;
  }
}

const multiplyBy = multiplier(5);
console.log(multiplyBy(10));  // Output: 50
console.log(multiplyBy(6));  // Output: 30

Explanation:

multiplier is a function that takes a parameter x and returns an inner function.
The inner function takes a parameter y and returns the multiply of x and y.
When we call multiplier(5), it returns a new function that multiplies 5 by any number passed into it.
Each call to multiplyBy remembers x = 5 (from the outer scope) and can access it to calculate the result.

3: Closures and SetTimeout

function createCounter() {
    let count = 0;

    function innerCounter() {
      count++;
      console.log(count);
    }
  return innerCounter;
  }

  const counter = createCounter();
  counter();                  // Immedietely Output 1
  setTimeout(counter, 1000);  // Output after 1 second: 2
  setTimeout(counter, 2000);  // Output after 2 seconds: 3
  setTimeout(counter, 3000);  // Output after 3 seconds: 4

Explanation:

The function createCounter defines a variable count and returns a function innerCounter that increments count each time it is called.
Even though createCounter has finished executing, the returned function (the closure) still "remembers" count.
The setTimeout calls invoke the returned function, and the counter continues to increment as expected.

4: Practical Use of Closure (Data Encapsulation)

function Counter() {
  let count = 0;  // private variable

  this.increment = function() {
    count++;
    console.log(count);
  }

  this.decrement = function() {
    count--;
    console.log(count);
  }

  this.getCount = function() {
    return count;
  }
}

const myCounter = new Counter();
myCounter.increment(); // Output: 1
myCounter.increment(); // Output: 2
myCounter.decrement(); // Output: 1
console.log(myCounter.getCount()); // Output: 1

Explanation:

The Counter function acts as a constructor, defining a private variable count.
The methods increment, decrement, and getCount form closures because they have access to the count variable.
Outside code cannot directly access or modify count; it can only interact with it via the provided methods.

Why Closures are Important?

Data Privacy/Encapsulation: You can create private variables that cannot be accessed directly from the outside world, but can still be manipulated via functions (like in the Counter example above).
Function Factories: Closures allow you to create customized versions of a function, like the makeAdder example.
Asynchronous Programming: Closures are useful in scenarios like asynchronous code, where functions need to "remember" their environment (like the setTimeout example).

Performance Consideration

While closures are a powerful tool, they come with some potential performance implications:

Memory Usage: A closure can keep a reference to its outer variables, potentially leading to higher memory usage. If you create many closures that capture large amounts of data, it could slow down the application.
Garbage Collection: Closures may delay the garbage collection of variables they capture. If you no longer need the closure, ensure you release references to it.

Key Concept:

A closure is created when a function has access to its parent function’s variables, even after the parent function has finished executing.
The inner function "closes over" the variables from the outer function, which is why it’s called a closure.

Event Loop

Jyoti chaudhary — Tue, 04 Feb 2025 10:50:11 +0000

The Event Loop is a fundamental concept in JavaScript that helps manage how code is executed, particularly when dealing with asynchronous operations like fetching data from an API or setting timers. Understanding the Event Loop is key to grasping how JavaScript handles tasks in a non-blocking manner.

JavaScript is a single-threaded language, meaning it can only do one thing at a time. However, JavaScript often needs to handle multiple tasks simultaneously, such as waiting for user input or fetching data from the internet. This is where the Event Loop comes in.

The timers (setTimeout() and setInterval()) are handled by the event loop mechanism in JavaScript. When you use timers, you’re asking the JavaScript runtime to wait for the delay, and when the delay expires, the callback function is pushed into the event queue.

Here’s what happens under the hood:

JavaScript runs the code line by line.
When a timer is called (e.g., setTimeout()), it schedules the callback function in the event queue after the specified delay.
The event loop checks if the call stack is empty. Once it's empty, it pulls the callback from the event queue and executes it.

How Event Loop Cycle works:

Example

   function runTasks() {
       console.log("Running Task 1.")

        setTimeout(() => {
            console.log("Running Task 2.")
        }, 5000);

        setTimeout(() => {
            console.log("Running Task 3.")
        }, 0);

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

        console.log("Running Task 5.")
    }
  runTasks();

Output

Running Task 1.
Running Task 5.
Running Task 3.
Running Task 4.
Running Task 2.

Components Involved:

Call Stack:
- The call stack is where JavaScript keeps track of what function is currently being executed. When you call a function, it gets added to the call stack. When that function finishes, it's removed from the stack.
- If the call stack is empty, JavaScript can execute the next piece of code.
Web APIs:
- These are browser-provided features that allow JavaScript to perform tasks like making HTTP requests, setting timers.
- When you use a Web API like setTimeout, the task is handed off to the browser, which handles it separately.
Callback Queue (Task Queue):
- When an asynchronous task (like an API request or a timer) is completed, the associated callback function (the code that should run after the task is done) is placed in the Callback Queue.
- The Callback Queue holds these functions until the call stack is empty and they can be executed.
Event Loop:
- The Event Loop's job is to constantly check the call stack and the callback queue. If the call stack is empty, it takes the first task from the callback queue and moves it to the call stack for execution.

Importance of Event Loop:

Non-blocking Operations: The Event Loop allows JavaScript to handle long-running tasks (like network requests) without freezing the entire application.
Responsive User Interfaces: By not blocking the tasks, the Event Loop helps keep the UI responsive, even when performing complex operations.

DEV Community: Jyoti chaudhary

How Hoisting works internally?

🔹What is Hoisting?

🔹How Hoisting Works Internally

🔹Types of Hoisting in JavaScript

🔹Execution Context

👉 Types of Execution Context

👉 Memory Component Stores

👉 Where This Memory Lives Physically?

Heap Memory

Stack Memory

👉 Who Gives This Memory?

JavaScript Engine

The JS Engine:

🔹 Internally What Happens?

Step 1 → Engine creates Execution Context

Step 2 → Allocates memory for variables/functions

Step 3 → Runs code

🔥 Real Flow

Example:

Primitive variables

Function declaration

🔹 Function Execution Context Memory

Parameters & local variables

Execution inside function

Function ends

Returned value assigned:

Basic Coding Interview Questions ( 2025 )

Q.1 How do you check if a variable is an array?

Using Array.isArray()

Using instanceof Operator

Using constructor Property

Recommended Method:

Promises in JavaScript

Promises:

Why promises are used?

1. Cleaner Asynchronous Code (Avoid Callback Hell)

Example with Callbacks:

Example with Promises:

2. Better Error Handling

Example:

3. Handling Multiple Asynchronous Operations

Example with Promise.all():

4. Composing Asynchronous Code

Example with .then() Chaining:

Basic Promise Example:

Explain the difference between .then() and .catch() in promises.

.then()

.catch()

Key Differences:

1. Purpose:

2. Chaining:

3. Error Handling:

What happens if you return a value inside .then()?

1. Returning a non-promise value:

2. Returning a promise:

Examples:

1. Returning a non-promise value

2. Returning a promise:

How to handle multiple promises efficiently?

1. Promise.all() – Handle multiple promises in parallel

Example:

Benefits:

2. Promise.allSettled() – Wait for all promises to settle, regardless of success or failure

Benefits:

3. Promise.race() – Resolve as soon as the first promise resolves or rejects

Example:

Benefits:

4. Promise.any() – Resolves as soon as one promise resolves, rejects if all promises are rejected

Example:

Benefits:

Chaining Promises (Sequential Execution)

Example:

Benefits:

Ways to convert a specified number to an array of digits

Method: 1. Using toString() and for loop

Method: 2.Using toString(), split(), and map()

Method: 3. Using Math.floor() and a while loop

Method: 4. Using Array.from()

Method: 5. Using reduce()

1. Promise.all() – Handle multiple promises in `parallel`

Use Cases for `useReducer`:

Limitations of `useReducer`:

1. Use `useState` if:

2. Use `useReducer` if:

`JSON.stringify(originalArray):`

`JSON.parse():`