DEV Community: randhavevaibhav

Never asked JavaScript interview question 🤪 How will you create an object of class from other object Normal way - const jack = new Person(); //using class name find a way to create tom object without using class name Person

randhavevaibhav — Sat, 04 Oct 2025 14:52:48 +0000

SQL Q. series 1 - Last Person to Fit in the Bus 🚌🚌

randhavevaibhav — Thu, 21 Aug 2025 15:17:40 +0000

Can you solve this LeetCode SQL question ?

Table: Queue

person_id	person_name	weight	turn
5	Alice	250	1
4	Bob	175	5
3	Alex	350	2
6	John Cena	400	3
1	Winston	500	6
2	Marie	200	4

person_id column contains unique values.
Q). This Queue table has the information about all people waiting for a bus.The person_id and turn columns will contain all numbers from 1 to n, where n is the number of rows in the table.turn determines the order of which the people will board the bus, where turn=1 denotes the first person to board and turn=n denotes the last person to board.
weight is the weight of the person in kilograms.

There is a queue of people waiting to board a bus. However, the bus has a weight limit of 1000 kilograms, so there may be some people who cannot board.

Write a solution to find the person_name of the last person that can fit on the bus without exceeding the weight limit. The test cases are generated such that the first person does not exceed the weight limit.

Note that only one person can board the bus at any given turn.

Ans -

First approach calculate max weight

SELECT SUM(weight) from queue;

But it will give only sum of all weights. We want to sum the weights of persons but iteratively and by their turn.

OVER CLAUSE

We can use OVER clause with aggregate function in this case SUM to SUM OVER turn column which is ORDER BY turn meaning it will sum weight repeatedly over column turn where turns starting from 1 to n.

SELECT
    PERSON_NAME,
    WEIGHT,
    TURN,
    SUM(WEIGHT) OVER (
        ORDER BY
            TURN
    ) AS ACCUMULATED_WEIGHT
FROM
    QUEUE

It will give following result -

person_name	weight	turn	accumulated_weight
Alice	250	1	250
Alex	350	2	600
John Cena	400	3	1000
Marie	200	4	1200
Bob	175	5	1375
Winston	500	6	1875

Notice all accumulated_weight is sum of all previous weights and also it is order by turn.

Now we just need to get all rows where accumulated_weight >=1000
We can do that by using SQL sub-query and where condition as below -

SELECT
    PERSON_NAME,
    WEIGHT,
    TURN,
    ACCUMULATED_WEIGHT
FROM
    (
        SELECT
            PERSON_NAME,
            WEIGHT,
            TURN,
            SUM(WEIGHT) OVER (
                ORDER BY
                    TURN
            ) AS ACCUMULATED_WEIGHT
        FROM
            QUEUE
    )
WHERE ACCUMULATED_WEIGHT<=1000

Which give us

PERSON_NAME	WEIGHT	TURN	ACCUMULATED_WEIGHT
Alice	250	1	250
Alex	350	2	600
John Cena	400	3	1000

we see when John Cena board the bus weight limit exceeds. so we just need to sort this result in DESC order and get the top result by LIMIT 1;

SELECT
    PERSON_NAME,
    WEIGHT,
    TURN,
    ACCUMULATED_WEIGHT
FROM
    (
        SELECT
            PERSON_NAME,
            WEIGHT,
            TURN,
            SUM(WEIGHT) OVER (
                ORDER BY
                    TURN
            ) AS ACCUMULATED_WEIGHT
        FROM
            QUEUE
    )
WHERE ACCUMULATED_WEIGHT<=1000
ORDER BY ACCUMULATED_WEIGHT DESC LIMIT 1

which will give us ans -

PERSON_NAME	WEIGHT	TURN	ACCUMULATED_WEIGHT
John Cena	400	3	1000

Callback 📞 vs Promise 🤞 based functions

randhavevaibhav — Wed, 20 Aug 2025 14:12:32 +0000

callback based -

In callback based function we provide a callback function as an argument to a function like
below -

callbackBasedFn("Hello", (err, data) => {
  if (err) {
    throw new Error(err);
  } else {
    console.log(`data : ${data}😉`);
  }
});

Inside the callback we are getting err or data depending on the result of callbackBasedFn()
the callbackBasedFn can have internal implementation like below -

function callbackBasedFn(data, cb) {
  setTimeout(() => {
    if (data === "error") {
      cb("Something went wrong 😵‍💫", null);
    }
    cb(null, data);
  }, 1000);
}

In this function we are doing some async operation that will result in data or err.

So if we want to process the output of callbackBasedFn() we have to do it in callback fun provided to callbackBasedFn() itself like below -

callbackBasedFn("Hello", (err, data) => {
  if (err) {
    throw new Error(err);
  } else {
    console.log(`data : ${data}😉`);
    const operation = data + " add some lines";  
    // ⬆️ some operations
  }
});

It is ok for one function but what if we have bunch of function which are depending on output of the previous function calls and all of them are async ?

Then code will get quite messy and un-readable like below -

callbackBasedFn("Hello", (err, data) => {
  if (err) {
    throw new Error(err);
  } else {
    console.log(`data : ${data}😉`);
    const op1 = data + " add some lines";  
    // ⬆️ some operations
    
    callbackBasedFn2(op1,(err,data)=>{
       if (err) {
        throw new Error(err);
      } else {
        console.log(`data : ${data}😉 2`);
        const op2 = data + " add some more lines";  
           
          callbackBasedFn3(op2,(err,data)=>{
           if (err) {
            throw new Error(err);
          } else {
            console.log(`data : ${data}😉 3`);
            const op3 = data + " add some more lines";  
        })
    })
    
  }
});

Due to this heavy nesting of function it also got fancy name The Callback hell 👿 .

To solve this promises where introduce.

Promise based -

A Promise is a JS class which returns a Promise object when called with new keyword.
while calling a Promise constructor with new keyword we pass a constructor function
which receives 2 arguments resolve and reject. we can call our callback based function callbackBasedFn() here and resolve it with data if everything went well or reject it with err
if any error occurred.
like below -

const newPromiseObj = new Promise((resolve,reject)=>{
    callbackFunc((err,data)=>{
        if(err)
        {
            reject(err)
        }else{
            resolve(data)
        }
    })
})

Then how will we catch errors and get data?
Ans - with .then() and .catch() methods.

This newPromiseObj comes with .then() and .catch() methods which accepts a callback for data and error resp. we will get our data and error like below -

newPromiseObj.then((data)=>{
    console.log(data); // ⬆️ Process data
}).catch((err)=>{
    console.error(err)   // ⬅️ Process error
})

We can promisify previous callbackBasedFn() function like below -

const promisify = (callbackBasedFn) => {
  return new Promise((resolve, reject) => {
    callbackBasedFn("Hello 1", (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(`data : ${data}😉`);
      }
    });
  });
};

and consume it like below -

promisify(callbackBasedFn)
  .then((res) => {
    console.log(res);
    }).catch((err) => console.error(err));

OUTPUT - data : Hello 1😉

But again if we have multiple async functions were input of one function is depends on output of other function then we have to return new Promise from .then() block of previous promise.
and attached a new .then() block and then process the data .

promisify(callbackBasedFn)
 .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
      callbackBasedFn(`${res} Hello 2`, (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(`${data} 😉`);
        }
      });

    });

  })
.then((res) => {
     console.log(res);
    return new Promise((resolve, reject) => {
      callbackBasedFn(`${res} Hello 3`, (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(`data : ${data} 😉`);
        }
      });
    });

  })
.then((res)=> console.log(res))
.catch((err) => console.error(err));

OUTPUT - 
Hello 1😉
Hello 1😉 Hello 2 😉
data : Hello 1😉 Hello 2 😉 Hello 3 😉

Well it avoids nesting of function calls but still we end up with another structure called then() ladder 🪜. and also it is hard to follow what's going on.
Then what to use ?

with await

with await we can literally wait for the promise to finish executing and then operate on the data like below -

const p1 = await promisify(callbackBasedFn);
console.log(p1);
const p2 = await new Promise((resolve,reject)=>{
    callbackBasedFn(`${p1} Hello 2`, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(`${data}😉`);
      }
    });
});

console.log(p2)

const p3 = await new Promise((resolve,reject)=>{
    callbackBasedFn(`${p2} Hello 3`, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(`data: ${data}😉`);
      }
    });
});

console.log(p3)

OUTPUT -
Hello 1😉
Hello 1😉 Hello 2😉
data: Hello 1😉 Hello 2😉 Hello 3😉

But what about error's?

Async functions -

Now we have to use async functions -

const p1AsyncFunc = async () => {
  try {
    return await promisify(callbackBasedFn);
  } catch (error) {
    console.error(error);
  }
};


const p2AsyncFunc = async (p1) => {
  try {
    return await new Promise((resolve, reject) => {
      callbackBasedFn(`${p1} Hello 2`, (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(`${data}😉`);
        }
      });
    });
  } catch (error) {
    console.error(error);
  }
};



const p3AsyncFunc = async (p2) => {
  try {
    return await new Promise((resolve, reject) => {
      callbackBasedFn(`${p2} Hello 3`, (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(`data: ${data}😉`);
        }
      });
    });
  } catch (error) {
    console.error(error);
  }
};


const p1 = await p1AsyncFunc();
console.log(p1)

const p2 = await p2AsyncFunc(p1);
console.log(p2)

const p3 = await p3AsyncFunc(p2);
console.log(p3)

OUTPUT - 
Hello 1😉
Hello 1😉 Hello 2😉
data: Hello 1😉 Hello 2😉 Hello 3😉

Notice how each async function call is done one after another like sync function and we are also able to catch error for each function call.

Typescript basics

randhavevaibhav — Tue, 19 Aug 2025 15:08:38 +0000

Basic types

1. any

Use if you are completely out of options.
basically typescript will not throw any error for type any.

const a : any;

2. unknown

Unknown is like any but with restrictions. You can't perform any action with unknown type unless you convince typescript that the type is of specific type.

Things to remember ==>

TypeScript will never infer something as unknown . you have to explicitly annotate it.
You can compare values to values that are of type unknown.

let a: unknown = 30;
if(a!=9) { //true

}

But, you can’t do things that assume an unknown value is of a specific type you have to prove to TypeScript that the value really is of that type first.

let a: unknown = 30;

let c = a +90;  //Error 'a' is of type 'unknown'.
if (typeof a === 'number') {  //true
let d = a+20;  //valid
}

3. boolean

The Boolean type has two values: true and false. You can compare them (with, =, === ||, &&, and ?), negate them (with !), and not much else. Use Boolean like this:

let a = true // boolean  (a)
var b = false // boolean  (b)
const c = true // true  (c)
let d: boolean = true // boolean  (d)
let e: true = true // true  (e)
let f: true = false // Error TS2322: Type 'false' is not assignable to type true (f)

This example shows a few ways to tell TypeScript that something is a boolean:

You can let TypeScript infer that your value is a boolean (a and b).
You can let TypeScript infer that your value is a specific boolean (c).
You can tell TypeScript explicitly that your value is a boolean (d).
You can tell TypeScript explicitly that your value is a specific boolean (e and f)

🚨Special const

Notice how const type is inferred at (c). You don't have to specify types for const as it gets infer by typescript. Also you have to initialize const declaration in typescript otherwise it will throw an error.

const d; //Error 'const' declarations must be initialized
const c = true; //infer as true

🚨Type literal

Notice how we used boolean true as type in (e). This is called type literal. By definition it means -
A type that represents a single value and nothing else.

let e: true = true // true  (e)

4. number

number is the set of all numbers: integers, floats, positives, negatives, Infinity, NaN,

and so on. Numbers can do, well, numbery things, like addition (+), subtraction (-),

modulo (%), and comparison (<). Let’s look at a few examples:

let a = 1234 // number  
var b = Infinity * 0.10 // number  
const c = 5678 // 5678  
let d = a < b // boolean  
let e: number = 100 // number  
let f: 26.218 = 26.218 // 26.218  
let g: 26.218 = 10 // Error TS2322: Type '10' is not assignable to type '26.218'.

5. bigint

bigint is a newcomer to JavaScript and TypeScript: it lets you work with large inte‐

gers without running into rounding errors. While the number type can only represent

whole numbers up to 253, bigint can represent integers bigger than that too. I supports all arithmetic operations. It does not support floating point numbers.

let a = 1234n // bigint  
const b = 5678n // 5678n  
var c = a + b // bigint  
let d = a < 1235 // boolean  
let e = 88.5n // Error TS1353: A bigint literal must be an integer.  
let f: bigint = 100n // bigint  
let g: 100n = 100n // 100n  
let h: bigint = 100 // Error TS2322: Type '100' is not assignable to type bigint

6. object

let a: {b: number} = {  
    b: 12  
}

here {b: number} is the shape of the object and after = is the actual value of the object.

[!NOTE] Optional Fields ?

By default all fields in object type are required . You can define an optional field by " ? ".

let a: {b: number; c?:boolean}

 a={b: 144} //ok even without c

[!NOTE] Index Signatures

you can define object keys type in Index Signatures format like below

let a: {b: number,[key:number]:boolean} = {  
    b: 12 

}

Note that this key is not compulsory but optional meaning you can define a without such key like

 a = {  
    b: 12 
}

But if you define a key with number as key then you have to follow the object structure of
[ key:number ]:boolean

 a = {  
    b: 12 
    10:true //ok
    10:'sdf' //Error
}

🚨 IMP : only string, number, symbol are assignable as key type.

[!NOTE] Read-only fields

Use "readonly" keyword for defining a object field as read-only.

let user: {  
readonly firstName: string  
} = {  
firstName: 'abby'  
}  
user.firstName // string  
user.firstName =  
'abbey with an e' // Error TS2540: Cannot assign to 'firstName' because it  
// is a read-only property.

[!NOTE] Empty object types {}

Every type except null and undefined—is assignable to an empty object type, which can make it

tricky to use. Try to avoid empty object types when possible:

let danger: {}  
danger = {}  
danger = {x: 1}  
danger = []  
danger = 2

7. arrays

let a = [1, 2, 3] // number[]  
var b = ['a', 'b'] // string[]  
let c: string[] = ['a'] // string[]  
let d = [1, 'a'] // (string | number)[]  
const e = [2, 'b'] // (string | number)[]  
let f = ['red']  
f.push('blue')  
f.push(true) // Error TS2345: Argument of type 'true' is not  
// assignable to parameter of type 'string'.  
let g = [] // any[]  
g.push(1) // number[]  
g.push('red') // (string | number)[]  
let h: number[] = [] // number[]  
h.push(1) // number[]  
h.push('red') // Error TS2345: Argument of type '"red"' is not  
// assignable to parameter of type 'number'.

8. Tuples

Tuples are subtypes of array. They’re a special way to type arrays that have fixed

lengths, where the values at each index have specific, known types. Unlike most other

types, tuples have to be Explicitly Typed when you declare them Typescript will NOT infer them.

let a: [number] = [1]  
// A tuple of [first name, last name, birth year]  
let b: [string, string, number] = ['malcolm', 'gladwell', 1963]  
b = ['queen', 'elizabeth', 'ii', 1926] // Error TS2322: Type 'string' is not  
// assignable to type 'number'.

Tuples also support "rest" operator,

// A list of strings with at least 1 element  
let friends: [string, ...string[]] = ['Sara', 'Tali', 'Chloe', 'Claire']  //a
// A heterogeneous list  
let list: [number, boolean, ...string[]] = [1, false, 'a', 'b', 'c'] //b

a - means tuples can have one string element and rest all the elements should have type "string"
they can have any number of length.

[!NOTE] Read-only Arrays and Tuples

let as: readonly number[] = [1, 2, 3] // readonly number[]  
let bs: readonly number[] = as.concat(4) // readonly number[]  //concat does not mutate as original arrray

let three = bs[2] // number  
as[4] = 5 // Error TS2542: Index signature in type  
// 'readonly number[]' only permits reading.  
as.push(6) // Error TS2339: Property 'push' does not  
// exist on type 'readonly number[]'

let r:readonly [number,string] =[12,"test"]//readonly [number,string]

r[0] = 334; // Cannot assign to '0' because it is a read-only property

Difference between Read-only Array and Read-only tuple

Feature	Readonly Array	Readonly Tuple
Purpose	Represents a collection of elements of the same type that should not be modified.	Represents a fixed-size collection of elements, where each element may have a different type, and the structure should not be modified.
Size	Can be of any length.	Has a fixed length defined by its type.
Type of Elements	All elements must be of the same type.	Elements can be of different types.
Use Cases	Useful when you need to pass an array to a function and ensure that the function doesn't modify it.	Useful when you need to represent a fixed set of values with known types, such as coordinates (x, y) or RGB colors.
Syntax	`readonly T[]` or `ReadonlyArray<T>`	`readonly [T1, T2, ...]`

9. null, undefined, void, and never

Type	Meaning
null	null Absence of a value
undefined	undefined Variable that has not been assigned a value yet
void	void Function that doesn’t have a return statement
never	never Function that never returns

10. Never type

The never type in TypeScript represents values that will never occur. It's used in situations where a function will never return or a variable can never hold a value.

note :

No type is a subtype of, or assignable to, never (except never itself).
Even any isn't assignable to never.

Use-case : exhaustive type checking in switch case

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; sideLength: number };

function getShape(shape: Shape): void {
  switch (shape.kind) {
    case "circle":
      console.log("circle");
      break;
    case "square":
      console.log("square");
      break;
    default:
      //if we forgot to include any case from Shape type then we will get below error.
      let exau: never = shape; // Error -Type '{ kind: "square"; sideLength: number; }' is not assignable to type 'never'.
      return exau;
  }
}

11. Enums

Think of them like objects where the keys are fixed at compile time, so TypeScript can check that the given key actually exists when you access it.

There are ONLY two kinds of enums: enums that map from strings to strings, and enums

that map from strings to numbers. They look like this:

//mapped to NUMBERS
const enum Language {  
English,  
Spanish,  
Russian  
}

console.log(Language.English); //0
console.log(Language.Spanish); //1
console.log(Language.Russian); //3

//Notice they are auto-incrementing

//mapped to strings
//Notice = NOT : like object
const enum Language {  
English='English',  
Spanish='Spanish',  
Russian='Spanish', 
}
console.log(Language.English); // English
console.log(Language.Spanish); //Spanish

you can access enums by keys only.

const enum Color {  
Red = '#c10000',  
Blue = '#007ac1',  
Pink = 0xc10050, // A hexadecimal literal  
White = 255 // A decimal literal  
}

//By Key
let a = Color.Red // Color  
let b = Color.Green // Error TS2339: Property 'Green' does not exist  
// on type 'typeof Color'. 

console.log(Color[0]) // Error: A const enum member can only be accessed using a string literal.

In Number type enum values are auto-incrementing. if you start a member by 99 then next will be 100 even if you do not explicitly define.

enum Color {  
Red = 99,
Pink
}

console.log(Color.Pink); // 100

Use-case

enum APIstatus {
NOT_FOUND=404,
BAD_REQUEST=400,
INTERNAL_SERVER_ERR=500,
OK=200,
FORBIDDEN=403
}


function printError (errStatus:APIstatus) // here enum is used as type.
{
  console.log("Request Failed with staus code",errStatus)
}

printError(APIstatus.NOT_FOUND); // here enum used as value i.e, 404 
printError(500); 
printError(201);//Argument of type '201' is not assignable to parameter of type 'APIstatus'.

Scooby doo and Scrappy doo !!

randhavevaibhav — Mon, 04 Aug 2025 16:27:10 +0000

🚀 Just launched my own full-stack blogging platform inspired from dev to — built from scratch without Firebase!

Over the past few weeks, I’ve been working on a complete blog application using:

⚛️ ReactJS for the front-end

🔧 Node.js / Express for building my own REST APIs

🐘 Supabase PostgreSQL as the database

Proud to say this app doesn’t rely on Firebase or any third-party everything from authentication to CRUD logic is powered by my custom back-end and database.

✨ Core features included:

Authentication & Authorization

React query for server state management

Session-based login

Search users/posts

Infinite scroll

Optimistic updates (likes, bookmarks, comments, replies)

Pre-fetching for faster UX

Followers / Following system

Nested comments and replies

Full CRUD operations

User stats Dashboard

👉 Live now at: https://blog-w-three.vercel.app/

Note - API server location is in India (Mumbai) hence if you access this website from out of India or using VPN you may experience some network delay.

GitHub repos -
🌐 client - https://github.com/randhavevaibhav/Blog_W
🌐 API - https://github.com/randhavevaibhav/blog_w_api

Write now working on the e2e test with cypress

Feel free to explore the app using the test credentials below:

User 1:
email: test789@gmail.com
password: UIO90JKI

User 2:
email: test67y@gmail.com
password: JKOP67FG

⚠️ In case you see a "Terminate session" prompt, please terminate the session and log in again using the above credentials.

and remember why i called it as scrappy doo 😄😄!!
Would love to hear your feedback & suggestions! 🙌

UseEffect

randhavevaibhav — Sun, 14 Apr 2024 13:34:39 +0000

Syntax -

// 1. Import *useState* and *useEffect*
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
    // 2. Create our *dogImage* variable as well as the *setDogImage* function via useState
    // We're setting the default value of dogImage to null, so that while we wait for the
    // fetch to complete, we dont attempt to render the image
  let [dogImage, setDogImage] = useState(null)

    // 3. Create out useEffect function
  useEffect(() => {
    fetch("https://dog.ceo/api/breeds/image/random")
    .then(response => response.json())
        // 4. Setting *dogImage* to the image url that we received from the response above
    .then(data => setDogImage(data.message))
  },[])

  return (
    <div className="App">
        {/* 5. Using *dogImage as* the *src* for our image*/}
    {dogImage && <img src={dogImage}></img>}
    </div>
  );
}

export default App;