Ultimate Frontend Interview Preparation Guide
feature in Javascript where function and variable declaration are moved to the top
TDZ is the time between entering a scope and declaring a let or const variable.
Understanding call, bind, and apply is essential for mastering how JavaScript handles function context (this).
apply, bind and call function in javascript
Pass by Value and Pass by Reference in Javascript
Function that runs immediately upon definition.
(function(){
// Do something;
})();Function that takes another function as variable and returns another function
function higherOrder(fn) {
fn();
}
higherOrder(function() { console.log("Hello world") }); Complex Function with multiple arguments split into multiple functions that take one argument at a time.
function multiply(a,b){
return a*b;
}
function currying(fn){
return function(a){
return function(b){
return fn(a,b);
}
}
}
var curriedMultiply = currying(multiply);
multiply(4, 3); // Returns 12
curriedMultiply(4)(3); // Also returns 12Ability of a function to remember variables and functions that are declared in the outer scope.
Function that is executed when another function gets executed.
Memoization is a form of caching where the return value of a function is cached based on its parameters. If the parameter of that function is not changed, the cached version of the function is returned.
JavaScript runs tasks using an event loop. Macrotasks include setTimeout and DOM events. Microtasks include Promises and queueMicrotask. Microtasks always run before the next macrotask. That’s why Promise callbacks execute earlier than setTimeout, even with zero delay.
Promise.resolve().then(() => console.log("micro")); setTimeout(() => console.log("macro"), 0);This is the bunch of interview questions that are must to check if you are taking interviews. Several concepts like hoisting, Temporal Dead Zone (TDX), implicit type coercion, etc can be learned here with examples
Types of Promises in JavaScript
Javascript Interview Questions - Github
setTimeout(() => console.log(1));
Promise.resolve().then(() => console.log(2));
Promise.resolve().then(() => setTimeout(() => console.log(3)));
new Promise(() => console.log(4));
setTimeout(() => console.log(5));
// Ans: 4 2 1 5 3preload: Allows resources which are initiated via CSS and JavaScript to be preloaded and define when each resource should be applied.Sets resource priority, determine resource type, determine if the request is compliant with the content security policy (CSP).prefetch: This will do a DNS lookup before the page is loaded so that the site is readily loaded. Fetch resources in background and store them in browser cache. a. Link prefetching: fetch and store resources in browser cache b. DNS prefetching: perform DNS Lookups on a page in the background with user is browsing. c. Prerendering (prerender): Loads the entire page in the background with all the assets.preconnect: (DNS + TCP + TLS) Setup an early connections before an HTTP request is actually sent to the server. Improves performance by avoiding latency in subsequent calls.
preconnect vs dns-prefetch resource hints
Preloading Resources - faster initial pageloads
Key value pair of data that carry metadata about request and response
- Request headers (sent by client):
Host,User-Agent,Accept,Authorization,Cookie, etc - Response headers (sent by server):
Content-Type,Content-Length,Cache-Control, etc - General headers (used with both request and response):
Date,Connection - Security related headers:
CSP,HSTS,CORS
HTTP Strict Transport Security (HSTS)
React Interview Questions & Answers
React Hooks Execution Order & Rendering Mechanism Deep Dive
Database on client level
Pros: Transactional, Asynchronous, indexes added by default, data stored as key value pairs
Persisting State in IndexedDB Without Breaking the Browser
A SyntheticEvent is an object created by React that normalizes native DOM events (like click, change, submit) so they behave the same across all browsers.
Ensures Cross-browser compatibility, Consistent API, Performance Optimization, etc.
React Event > Native Equivalent
onClick > click
onChange > change
onSubmit > submit
onMouseOver > mouseover
onKeyDown > keydownThe forwardRef function in React lets a parent component access a specific element or method inside a child component. This is helpful when the parent needs to do something like focus on an input field or start an animation in the child component directly.
The React Context API allows data to be shared across components without passing it through each level. It simplifies state management and avoids "prop drilling" in larger applications.
How to combine useContext with useReducer?
Optimize the page rendering when loading large dataset by displaying only the items that are visible on the screen.
Library example: react-window, react-virtualized
Optimizing React Performance with Virtualization: A Developer's Guide
Code Splitting & Lazy Loading
Performance optimization by loading limited data. Components and modules are loaded asynchronously so that perfance is maintained.
We achieve that by using React.lazy and Suspense
React splits the javascript bundle into smaller chunks and make sure that each bundle is called asynchronously with the help of lazy and suspense feature
Remove unused code from your applications. Tools like Webpack can help achieve this automatically.
Instead of making api calls for every keypress, we will make api calls after a certain interval after keypress
Throttle and Debounce works the same. Throttle will call the function after the interval regularly. Wont reset the interval value. Debounce reset the interval value after each function call.
cache lets you cache the result of a data fetch or computation.
There are mainly two types of caching mechanism in React
Best approach for Caching Mechanism
React HTTP caching involves storing data from API responses to reduce network requests, while in-memory caching stores data in the application's memory for quick access. HTTP caching typically uses browser mechanisms like service workers or HTTP headers, whereas in-memory caching uses React hooks like useMemo or useCallback to store computed values.
Caching Data with React Query and Hooks
How to Use the useMemo and useCallback Hooks for Caching in React
SWR and React Query (Best for API Caching).
For caching server responses, libraries like SWR and React Query provide powerful caching and data-fetching solutions. These libraries fetch data, cache it, and automatically update stale data in the background.
Using Service Workers is an advanced approach that allows caching assets and API requests for offline use. With service workers, you can cache dynamic data at the network level, and it works seamlessly with Progressive Web Apps (PWA).
Web worker is a javascript script that run in background without affecting the main thread Eg: Load 10MB image without blocking UI
Service workers background script that acts as a proxy between your web app and the internet Eg: Push notiifcations, offline support etc
Web Workers vs. Service Workers in React
Google uses the first three metrics of this real-world data—Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS)—to alter the rank of your application based on the scores. Note that as of March 12, 2024, INP has replaced First Input Delay (FID).
How Core Web Vitals affect SEO
Progressive Page Loading technique. idle-until-urgent pattern. The task will wait until listed as urgent.
Non critical tasks are run only once the browser is idle state.
Similar to setTimeout and setInterval
Used for loading analytics like page views, click trackers
https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
React Hydration (SSR)
Server side rendering (SSR). Its the process by which React attaches itself to HTML component on client side.
https://dev.to/jitendrachoudhary/what-is-react-hydration-2bc3
Look for topics in this page - Layout Thrashing, Reflow, Repaint https://mikitaaliaksandrovich.substack.com/p/react-nextjs-dom-performance-interview
This is important URL check that out https://www.debugbear.com/blog/forced-reflows
https://web.dev/articles/simplify-paint-complexity-and-reduce-paint-areas
Optimize Images
Responsive Images
Performance Metrics
LCP (Largest Contentful Paint) INP (Interaction to Next Paint) CLS (Cumulative Layout Shift)
Tools Chrome DevTools Performance tab Lighthouse React Profiler
SSRF (Server-Side Request Forgery) is a critical web security vulnerability where an attacker tricks a server into making unauthorized HTTP requests on their behalf. Attacker convinces server to get restricted info acting like an authenicated user. Issues: Account Takeover, Privilage Escalation Prevention: Mange Allowed IPs, Block Internal IPs, use HTTPS, etc
CSRF (Client Side Request Forgery) is a web security vulnerability where an attacker tricks a logged-in user’s browser into making unauthorized requests to a trusted website without the user’s consent. Browser automatically passes value to server to process request without user authorization. Issues: Financial Fraud, Account Modifications, Data Modifications Prevention: SameSite Cookies, Custom Headers, CSRF Tokens, use HTTPS, etc
Denial of Service (DoS / DDoS)
Man-in-the-Middle (MITM)
DNS Attacks
IP Spoofing
Packet Sniffing
TCP Attacks
SSL/TLS Attacks
Application level
- SQL Injection
- Cross-Site Scripting (XSS): when a website allows user input, such as comments, without proper filtering or sanitization. Inject malicious code to client side Prevention: set CSP, HTTPOnly and Secure Cookies for secure HTTPS connections
- Cross-Site Request Forgery (CSRF)
- Server-Side Request Forgery (SSRF)
- Remote Code Execution (RCE)
- Insecure Deserialization
- HTTP Request Smuggling
Cookie: Attributes of Cookie
XXE: Inject malicious code into XML files
SSL: Secure Socket Layer secure communication to transfer information between server and client Public Key and Private Key
JWT
security headers