My Past Interview Experience on Debounce and Throttling !!

Interviewer: Let's talk about debounce and throttling. Can you explain what

Priya: 𝐈𝐦𝐚𝐠𝐢𝐧𝐞 𝐲𝐨𝐮'𝐫𝐞 𝐚𝐭 𝐚 𝐜𝐫𝐨𝐰𝐝𝐞𝐝 𝐜𝐨𝐧𝐜𝐞𝐫𝐭, 𝐚𝐧𝐝 𝐞𝐯𝐞𝐫𝐲 𝐭𝐢𝐦𝐞 𝐲𝐨𝐮 𝐜𝐥𝐚𝐩,
debounce is and how it works?

𝐭𝐡𝐞 𝐥𝐢𝐠𝐡𝐭𝐬 𝐟𝐥𝐢𝐜𝐤𝐞𝐫. 𝐃𝐞𝐛𝐨𝐮𝐧𝐜𝐞 𝐢𝐬 𝐥𝐢𝐤𝐞 𝐰𝐚𝐢𝐭𝐢𝐧𝐠 𝐟𝐨𝐫 𝐚 𝐩𝐚𝐮𝐬𝐞 𝐢𝐧 𝐭𝐡𝐞

𝐜𝐥𝐚𝐩𝐩𝐢𝐧𝐠 𝐛𝐞𝐟𝐨𝐫𝐞 𝐜𝐡𝐚𝐧𝐠𝐢𝐧𝐠 𝐭𝐡𝐞 𝐥𝐢𝐠𝐡𝐭𝐬, 𝐬𝐨 𝐭𝐡𝐞 𝐥𝐢𝐠𝐡𝐭𝐬 𝐨𝐧𝐥𝐲 𝐫𝐞𝐬𝐩𝐨𝐧𝐝 𝐭𝐨
𝐭𝐡𝐞 𝐟𝐢𝐧𝐚𝐥 𝐜𝐥𝐚𝐩 𝐚𝐟𝐭𝐞𝐫 𝐭𝐡𝐞 𝐜𝐫𝐨𝐰𝐝 𝐬𝐞𝐭𝐭𝐥𝐞𝐬.

Interviewer: So, debounce waits for a certain period of inactivity before triggering an
action. What about throttling?
Priya: Throttling is like having a bouncer at the concert who only lets you in every
few minutes, no matter how many times you try to enter. It limits the number of
actions over time, making sure things don't get too chaotic.

Interviewer: How do you decide when to use debounce versus throttling?

Priya: Use debounce for things that should only happen after a pause, like waiting
until a user finishes typing in a search box. Use throttling for tasks that need regular
updates, like tracking the scroll position of a page to load new content.

Interviewer: Can you give an example of a scenario where throttling is more

appropriate than debounce?
Priya: For a live search feature that shows suggestions as you type, debounce is
great. But for updating a live feed where you want to load new items periodically,
throttling makes sure you don’t overload the server with requests.

Interviewer: What happens if you use debounce where throttling would be better?
Priya: If you debounce in a situation where throttling would be better, you might
miss out on updates or interactions. For example, you might not see new content
loading as you scroll because the updates are too delayed.

If you find my explanation effective, give it a like, and share any observations or
suggestions in the comments.

My Past Interview Experience on setTimeout and setInterval !!

Priya: 𝐓𝐡𝐢𝐧𝐤 𝐨𝐟 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭 𝐚𝐬 𝐚 𝐨𝐧𝐞-𝐭𝐢𝐦𝐞 𝐚𝐥𝐚𝐫𝐦 𝐜𝐥𝐨𝐜𝐤. 𝐈𝐭 𝐫𝐢𝐧𝐠𝐬 𝐨𝐧𝐥𝐲

Interviewer: Can you explain the difference between setTimeout and setInterval

𝐨𝐧𝐜𝐞 𝐚𝐟𝐭𝐞𝐫 𝐚 𝐬𝐩𝐞𝐜𝐢𝐟𝐢𝐞𝐝 𝐝𝐞𝐥𝐚𝐲. 𝐎𝐧 𝐭𝐡𝐞 𝐨𝐭𝐡𝐞𝐫 𝐡𝐚𝐧𝐝, 𝐬𝐞𝐭𝐈𝐧𝐭𝐞𝐫𝐯𝐚𝐥 𝐢𝐬 𝐥𝐢𝐤𝐞

𝐚 𝐫𝐞𝐜𝐮𝐫𝐫𝐢𝐧𝐠 𝐜𝐚𝐥𝐞𝐧𝐝𝐚𝐫 𝐫𝐞𝐦𝐢𝐧𝐝𝐞𝐫𝐢 𝐭 𝐤𝐞𝐞𝐩𝐬 𝐫𝐢𝐧𝐠𝐢𝐧𝐠 𝐚𝐭 𝐫𝐞𝐠𝐮𝐥𝐚𝐫
𝐢𝐧𝐭𝐞𝐫𝐯𝐚𝐥𝐬.

Interviewer: How does setTimeout work under the hood?

Priya: setTimeout schedules a single execution after the delay. Once the time
elapses, it runs the function once and stops. It’s like setting a timer to cook your egg;
once the timer goes off, the cooking stops.

Interviewer: What about setInterval

Priya: setInterval repeatedly executes the function at the specified intervals until you
stop it. It’s like setting up a recurring meeting reminder every day at 10 AM.

Interviewer: What happens if the function you’re running takes longer than the
interval
Priya: With setInterval, the function might overlap with the next interval if it’s not
finished. It’s like scheduling back-to-back meetings without buffer time you might
run late on one meeting affecting the next.

Interviewer: Can you stop a setInterval once it’s started

Priya: Yes, you can. You just need to clear it using clearInterval, similar to canceling
a recurring meeting in your calendar.

Interviewer: How do you manage multiple setTimeout calls

Priya: Each setTimeout is independent, so you can have several timers going off at
different times. It’s like setting multiple alarms for different tasks throughout the
day.

Interviewer: Can you give an example of when you might use setTimeout and
setInterval in a project
Priya: You might use setTimeout for showing a message after a user logs in, and
setInterval for updating a live clock every second.

Interviewer: What happens if you don’t clear an interval

Priya: If you don’t clear it, the function keeps running at the set intervals, which can
lead to performance issues or unintended behavior. It’s like forgetting to stop your
recurring calendar reminders—they just keep piling up.

Interviewer: How about using setTimeout inside setInterval

Priya: You can nest setTimeout inside setInterval if you need to delay tasks within a
recurring interval. It’s like having a recurring meeting but needing to delay a specific
agenda item within it.

If you find my explanation effective, give it a like, and share any observations or
suggestions in the comments.

Hoisting in JavaScript !!

1. Hoisting lets you use variables and functions before you declare them. Think of it
as JavaScript moving your declarations to the top of your code, so they’re available
everywhere in their scope.

2. With variables, only the declaration part is hoisted, not their initialization. So if you
try to use a variable before it’s assigned a value, you’ll get `undefined` instead of an
error.

3. Function declarations are fully hoisted, meaning you can call a function before it’s
defined in your code. It’s like having a get-out-of-jail-free card for function calls!

4. `let` and `const` don’t behave like `var` with hoisting. They’re hoisted to the top
of their block scope but are in a “temporal dead zone” until they’re actually
declared. So, accessing them before declaration will throw an error.

5. If you assign a function to a variable (function expression), only the variable

declaration is hoisted, not the function definition. So, calling the function before it’s
assigned will result in an error.

6. Class declarations are hoisted but not initialized, similar to `let` and `const`. You
can’t use a class before it’s declared.

7. Variables declared with `var` are hoisted to the top of their function or global
scope but initialized with `undefined` until their actual assignment is reached.

8. Hoisting happens within the scope of a function or globally. A variable declared

inside a function is hoisted within that function, while global variables are hoisted
globally.

9. If you declare a function inside another function, it’s hoisted within that inner
function’s scope, not the outer function’s scope.

10. Although `let` and `var` are both hoisted, `let` creates a block scope, whereas
`var` creates a function scope. This difference can lead to different behaviors and
bugs if you’re not careful.

My Past Interview Experience on Promise.any !!

Interviewer: Can you explain what Promise.any does in JavaScript

Me: Promise.any takes an array of promises and returns a single promise that
resolves as soon as any of the promises in the array resolves. If all promises are
rejected, it will return a rejection.

Interviewer: How is it different from Promise.all

team wins. 𝐏𝐫𝐨𝐦𝐢𝐬𝐞.𝐚𝐧𝐲 𝐢𝐬 𝐦𝐨𝐫𝐞 𝐥𝐢𝐤𝐞 𝐚 𝐫𝐚𝐜𝐞 𝐰𝐡𝐞𝐫𝐞 𝐭𝐡𝐞 𝐭𝐞𝐚𝐦 𝐰𝐢𝐧𝐬 𝐚𝐬
Me: Think of Promise.all like a relay race where all runners need to finish before the

𝐬𝐨𝐨𝐧 𝐚𝐬 𝐨𝐧𝐞 𝐫𝐮𝐧𝐧𝐞𝐫 𝐜𝐫𝐨𝐬𝐬𝐞𝐬 𝐭𝐡𝐞 𝐟𝐢𝐧𝐢𝐬𝐡 𝐥𝐢𝐧𝐞, 𝐧𝐨 𝐦𝐚𝐭𝐭𝐞𝐫 𝐰𝐡𝐚𝐭 𝐭𝐡𝐞
𝐨𝐭𝐡𝐞𝐫𝐬 𝐝𝐨.
Me: 𝐈𝐦𝐚𝐠𝐢𝐧𝐞 𝐲𝐨𝐮’𝐫𝐞 𝐭𝐫𝐲𝐢𝐧𝐠 𝐭𝐨 𝐥𝐨𝐚𝐝 𝐢𝐦𝐚𝐠𝐞𝐬 𝐟𝐫𝐨𝐦 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐬𝐨𝐮𝐫𝐜𝐞𝐬.
Interviewer: Can you give a simple example of how Promise.any might be used

𝐘𝐨𝐮 𝐰𝐚𝐧𝐭 𝐭𝐨 𝐝𝐢𝐬𝐩𝐥𝐚𝐲 𝐭𝐡𝐞 𝐢𝐦𝐚𝐠𝐞 𝐚𝐬 𝐬𝐨𝐨𝐧 𝐚𝐬 𝐚𝐧𝐲 𝐨𝐧𝐞 𝐨𝐟 𝐭𝐡𝐞 𝐬𝐨𝐮𝐫𝐜𝐞𝐬
𝐩𝐫𝐨𝐯𝐢𝐝𝐞𝐬 𝐢𝐭, 𝐫𝐚𝐭𝐡𝐞𝐫 𝐭𝐡𝐚𝐧 𝐰𝐚𝐢𝐭𝐢𝐧𝐠 𝐟𝐨𝐫 𝐚𝐥𝐥 𝐭𝐨 𝐥𝐨𝐚𝐝 𝐨𝐫 𝐟𝐚𝐢𝐥. 𝐏𝐫𝐨𝐦𝐢𝐬𝐞.𝐚𝐧𝐲
𝐡𝐞𝐥𝐩𝐬 𝐚𝐜𝐡𝐢𝐞𝐯𝐞 𝐭𝐡𝐢𝐬 𝐛𝐲 𝐫𝐞𝐬𝐨𝐥𝐯𝐢𝐧𝐠 𝐰𝐢𝐭𝐡 𝐭𝐡𝐞 𝐟𝐢𝐫𝐬𝐭 𝐬𝐮𝐜𝐜𝐞𝐬𝐬𝐟𝐮𝐥 𝐢𝐦𝐚𝐠𝐞
𝐬𝐨𝐮𝐫𝐜𝐞.

Interviewer: What happens if all promises are rejected

Me: If all promises are rejected, Promise.any will return a rejected promise with an
AggregateError, which groups together all the errors from the rejected promises.

Interviewer: When would you use Promise.any over Promise.race?

Me: Use Promise.any when you need at least one promise to succeed, while
Promise.race is useful when you just care about the first promise to settle, whether it
resolves or rejects.

Post link for Promise.all - https://lnkd.in/dUt5Fq_N

Post link for Promise.allsettled - https://lnkd.in/dqcYHtWh
Post link for Promise.race - https://lnkd.in/dv7C7hKY

React/redux

My Past Interview Experience on Redux !!

Interviewer: What’s happening without Redux in react application.

Me: In the "Without Redux" scenario, the component initiating the change is
represented by the purple circle. When this component updates its state, the change
has to be passed down manually through each level of the component tree. This can
become cumbersome and error-prone as the application grows, leading to what's
often referred to as "prop drilling."

Interviewer: So, every component that needs the state has to receive it via props,
right?
Me: Exactly. It means that even components that don't need the state directly still
have to be aware of it and pass it down, which can lead to a lot of unnecessary
complexity.

Interviewer: Now, how does using Redux change this process?

You: With Redux, the state is centralized in a store, which is the large purple circle at
the top. The component initiating the change dispatches an action to the store. This
action is processed by reducers, which update the state. The updated state is then
propagated directly to all subscribed components, bypassing the need to pass state
through intermediate components.

Interviewer: So, the state is globally accessible, and any component can subscribe to
updates it needs?
Me: Exactly. This approach greatly simplifies state management, especially in larger
applications. Components only need to connect to the store to get the state they
need, reducing the dependency on the component tree structure.

Interviewer: That makes sense. It sounds like Redux can make state management
much more efficient and maintainable in complex applications.
Me: That's right! It can significantly reduce the boilerplate code required for state
management and make it easier to reason about the state changes in your
application.

𝐂𝐨𝐦𝐦𝐨𝐧𝐥𝐲 𝐚𝐬𝐤𝐞𝐝 𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐢𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐪𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬: hashtag#Day26:

Javascript Event loop:

1. Interviewer: What is the Call Stack?

Priya: The call stack is a data structure that keeps track of the functions being
executed in a LIFO (Last-In-First-Out) manner, ensuring the order of execution and
managing function calls.

2. Interviewer: What is the Task Queue (Callback Queue)?

Priya: The task queue holds callbacks and tasks scheduled to be executed after the
current execution stack is empty, allowing asynchronous operations to be processed
in a specific order.

3. Interviewer: What are Microtasks and Macrotasks?

Priya: Microtasks (such as Promise callbacks) have higher priority and are executed
before the next rendering, while macrotasks (like setTimeout or DOM events) have
lower priority and are executed in subsequent event loop iterations.

4. Interviewer: How does the event loop prioritize tasks?

Priya: The event loop prioritizes emptying the microtask queue before processing
macrotasks, ensuring that immediate promises and related callbacks are executed
before less time-sensitive tasks.

5. Interviewer: What is the role of the setTimeout function?

Priya: The setTimeout function schedules a callback to be added to the macrotask
queue after a specified delay, allowing delayed execution of code.

6. Interviewer: How does the event loop prevent blocking?

Priya: JavaScript's event loop enables non-blocking behavior by delegating I/O
operations and asynchronous tasks to browser APIs and handling their results in the
task queue without freezing the main thread.

7. Interviewer: Can the event loop handle heavy computation?

Priya: No, heavy computations in the main thread can block the event loop, leading
to unresponsiveness. Web Workers can be employed to offload intensive tasks to
separate threads without affecting the main event loop.

8. Interviewer: What is the event loop in JavaScript?

Priya: The event loop is a core mechanism that manages the execution of
asynchronous code, handling tasks like callbacks and promises to ensure non-
blocking behavior.

9. Interviewer: How does the event loop work?

Priya: The event loop continuously checks the call stack and task queue, moving
tasks from the queue to the stack for execution, allowing JavaScript to handle
asynchronous operations while remaining single-threaded.

Past Interview Experience on Redux Middlewares !!

Interviewer: What happens in the Action Creator?

Me: The Action Creator functions generate actions – these are plain JavaScript
objects that describe what happened. For instance, it might look something like
{ type: 'INCREMENT' }.

Interviewer: So, these actions need to go somewhere, right?

Me: The actions are then dispatched to the Store. But before they reach the
reducers, they pass through Middlewares.

Interviewer: Middlewares, you say? What role do they play?

Me: Middlewares is between the action dispatch and the reducers. They can
intercept actions and perform tasks such as logging, making asynchronous API calls,
or modifying actions before they reach the reducers. Essentially, they're like filters.

Interviewer: So once the middleware is done with the action, what happens next?
Me: Once the middleware processes the action, it's forwarded to the Reducers. The
reducers are pure functions that take the current state and the action as arguments
and return a new state based on the action. This is where the state transformation
happens.

Interviewer: And what does the new state do after the reducer updates it?
Me: The new state is then stored in the Store. The store holds the entire state of the
application. When the state updates, the view re-renders to reflect the changes. This
closes the loop, showing the user the updated state.

Interviewer: And what about the API call?

Me: If an action involves an API call, middleware can handle that too. For instance,
thunk middleware allows action creators to return functions instead of actions. These
functions can perform asynchronous operations like API calls, then dispatch actions
based on the results.
Interviewer: So, to summarize, the flow goes from View to Action Creator, then
through Middleware, to the Store, through the Reducer, and back to the Store, which
updates the View. Did I get that right?
Me: Perfect! You've got it. It's a continuous loop that ensures the state and view stay
in sync.
.
.
.
.
.