{"id":136345,"date":"2024-07-03T05:18:34","date_gmt":"2024-07-03T05:18:34","guid":{"rendered":"https:\/\/www.sushilkumar.ind.in\/blog\/?page_id=136345"},"modified":"2024-08-09T04:06:19","modified_gmt":"2024-08-09T04:06:19","slug":"interview-question-list","status":"publish","type":"page","link":"https:\/\/www.sushilkumar.ind.in\/blog\/interview-question-list\/","title":{"rendered":"Interview Question list"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" data-attachment-id=\"136482\" data-permalink=\"https:\/\/www.sushilkumar.ind.in\/blog\/interview-question-list\/attachment\/pexels-photo-5699479\/\" data-orig-file=\"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479.jpeg\" data-orig-size=\"1880,1253\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;Photo by Alex Green on &lt;a href=\\&quot;https:\\\/\\\/www.pexels.com\\\/photo\\\/ethnic-female-psychotherapist-listening-to-black-clients-explanation-5699479\\\/\\&quot; rel=\\&quot;nofollow\\&quot;&gt;Pexels.com&lt;\\\/a&gt;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;ethnic female psychotherapist listening to black clients explanation&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"pexels-photo-5699479\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Photo by Alex Green on &lt;a href=&quot;https:\/\/www.pexels.com\/photo\/ethnic-female-psychotherapist-listening-to-black-clients-explanation-5699479\/&quot; rel=&quot;nofollow&quot;&gt;Pexels.com&lt;\/a&gt;&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479-300x200.jpeg\" data-large-file=\"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479-1024x682.jpeg\" tabindex=\"0\" role=\"button\" src=\"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479-1024x682.jpeg\" alt=\"ethnic female psychotherapist listening to black clients explanation\" class=\"wp-image-136482\" srcset=\"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479-1024x682.jpeg 1024w, https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479-300x200.jpeg 300w, https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479-768x512.jpeg 768w, https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479-1536x1024.jpeg 1536w, https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479-310x205.jpeg 310w, https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2024\/07\/pexels-photo-5699479.jpeg 1880w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Photo by Alex Green on <a href=\"https:\/\/www.pexels.com\/photo\/ethnic-female-psychotherapist-listening-to-black-clients-explanation-5699479\/\" rel=\"nofollow\">Pexels.com<\/a><\/figcaption><\/figure>\n\n\n\n<p><strong>If a user writes wipro.com in the browser, how does it work as DOM creation?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When a user enters &#8220;wipro.com&#8221; into the browser, the following steps occur:\n<ol class=\"wp-block-list\">\n<li><strong>DNS Lookup:<\/strong> The browser looks up the IP address of &#8220;wipro.com&#8221; using DNS.<\/li>\n\n\n\n<li><strong>HTTP Request:<\/strong> The browser sends an HTTP request to the server at the retrieved IP address.<\/li>\n\n\n\n<li><strong>Server Response:<\/strong> The server sends back an HTTP response, which usually includes HTML, CSS, and JavaScript.<\/li>\n\n\n\n<li><strong>HTML Parsing:<\/strong> The browser starts parsing the HTML document. This creates the Document Object Model (DOM), a tree-like structure representing the document&#8217;s content.<\/li>\n\n\n\n<li><strong>Resource Loading:<\/strong> The browser requests additional resources (CSS, JS, images) needed by the HTML.<\/li>\n\n\n\n<li><strong>CSSOM Construction:<\/strong> CSS is parsed into the CSS Object Model (CSSOM).<\/li>\n\n\n\n<li><strong>Render Tree Construction:<\/strong> The DOM and CSSOM are combined to create the render tree.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> The browser calculates the layout of each element based on the render tree.<\/li>\n\n\n\n<li><strong>Painting:<\/strong> The browser paints the pixels to the screen based on the layout.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>What is CORS?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers to prevent web pages from making requests to a different domain than the one that served the web page. It allows servers to specify who can access their resources and how they can be accessed.<\/li>\n<\/ul>\n\n\n\n<p><strong>How can we whitelist server A in server B to avoid CORS?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On server B, you can set the appropriate CORS headers to allow requests from server A. For example, in an Express.js server, you can do this: <code>const express = require('express'); const cors = require('cors'); const app = express(); const corsOptions = { origin: 'http:\/\/serverA.com', optionsSuccessStatus: 200 }; app.use(cors(corsOptions)); app.get('\/endpoint', (req, res) =&gt; { res.json({ message: 'This is CORS-enabled for server A only' }); }); app.listen(3000, () =&gt; { console.log('Server B listening on port 3000'); });<\/code><\/li>\n<\/ul>\n\n\n\n<p><strong>Async\/Await<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>async<\/strong> and <strong>await<\/strong> are keywords in JavaScript that enable asynchronous, promise-based behavior in a cleaner, more readable way. <ul> <li><strong>async<\/strong> function: Declares an asynchronous function that implicitly returns a promise.<\/li>   <li><strong>await<\/strong>: Pauses the execution of an async function and waits for the promise to resolve or reject.<\/li><\/ul><\/li>\n<\/ul>\n\n\n\n<p><strong>What is the difference between <strong>map<\/strong> and <strong>filter<\/strong>?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>map<\/strong>: Creates a new array by applying a function to each element of the original array.<\/li>\n\n\n\n<li><strong>filter<\/strong>: Creates a new array with all elements that pass the test implemented by the provided function.<\/li>\n<\/ul>\n\n\n\n<p><strong>What is the difference between <strong>map<\/strong> and <strong>forEach<\/strong>?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>map<\/strong>: Returns a new array with the results of calling a function on every element in the original array.<\/li>\n\n\n\n<li><code>forEach<\/code>: Executes a function on each element of the array but does not return a new array.<\/li>\n<\/ul>\n\n\n\n<p><strong>What is a closure?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function&#8217;s variables, even after the outer function has returned.<\/li>\n<\/ul>\n\n\n\n<p><strong>What is the temporal dead zone?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The temporal dead zone (TDZ) is the period of time during which the <strong>let<\/strong> and <strong>const<\/strong> variables are in scope but not yet declared, and therefore cannot be accessed.<\/li>\n<\/ul>\n\n\n\n<p><strong>Difference between <strong>var<\/strong> and <strong>let<\/strong>?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>var<\/strong>: Function-scoped, hoisted, and can be redeclared.<\/li>\n\n\n\n<li><strong>let<\/strong>: Block-scoped, not hoisted in the same way as <strong>var<\/strong>, and cannot be redeclared in the same scope.<\/li>\n<\/ul>\n\n\n\n<p><strong>What is <strong>memo<\/strong> in React?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>React.memo<\/strong> is a higher-order component that prevents a functional component from re-rendering if its props have not changed.<\/li>\n<\/ul>\n\n\n\n<p><strong>How can you check the performance of any application?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use browser developer tools (e.g., Chrome DevTools) to monitor performance, measure load times, and analyze network requests.<\/li>\n\n\n\n<li>Use performance monitoring tools like Lighthouse, WebPageTest, and New Relic.<\/li>\n\n\n\n<li>Optimize code, reduce render times, and improve resource loading.<\/li>\n<\/ul>\n\n\n\n<p><strong>What are higher-order functions?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Higher-order functions are functions that take other functions as arguments, return a function, or both.<\/li>\n<\/ul>\n\n\n\n<p><strong>What is IIFE (Immediately Invoked Function Expression) in JavaScript?<\/strong><ul><li>An IIFE is a function that is executed immediately after it is defined. It is a common pattern to create a local scope.<\/li><\/ul><code>(function() { \/\/ Code here is executed immediately })();<\/code><\/p>\n\n\n\n<p><strong>What is the Event Loop?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Event Loop is a mechanism in JavaScript that handles asynchronous operations. It continuously checks the call stack and the task queue, pushing callback functions from the queue to the stack for execution.<\/li>\n<\/ul>\n\n\n\n<p><strong>Explain about Async and Defer?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>async<\/strong>: Downloads the script asynchronously and executes it as soon as it&#8217;s downloaded.<\/li>\n\n\n\n<li><strong>defer<\/strong>: Downloads the script asynchronously but executes it only after the HTML is fully parsed.<\/li>\n<\/ul>\n\n\n\n<p><strong>Filter and map function?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>filter<\/strong>: Creates a new array with elements that pass a test.<\/li>\n\n\n\n<li><strong>map<\/strong>: Creates a new array with the results of calling a function on every element in the array.<\/li>\n<\/ul>\n\n\n\n<p>From an <strong>array of integers [1,2,3,4,5,6,7,8], get the values greater than 4 by using the filter function. Also, create your own <strong>myFilter<\/strong> function that should work like the built-in filter.<\/strong> <\/p>\n\n\n\n<p><code>const arr = [1, 2, 3, 4, 5, 6, 7, 8]; const result = arr.filter(num =&gt; num &gt; 4); console.log(result); \/\/ [5, 6, 7, 8] Array.prototype.myFilter = function(callback) { const result = []; for (let i = 0; i &lt; this.length; i++) { if (callback(this[i], i, this)) { result.push(this[i]); } } return result; }; const customResult = arr.myFilter(num =&gt; num &gt; 4); console.log(customResult); \/\/ [5, 6, 7, 8]<\/code><\/p>\n\n\n\n<p><strong>Output for the below code:<\/strong><\/p>\n\n\n\n<p><code>console.log(\"start\"); setTimeout(() =&gt; { console.log(\"setTimeout\"); }, 0); console.log(\"end\");<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Explanation: The <strong>setTimeout<\/strong> callback is placed in the task queue and is executed after the current call stack is empty.<\/li>\n<\/ul>\n\n\n\n<p><strong>Output for the below code and explanation:<\/strong><\/p>\n\n\n\n<p><code>for(var i=0; i&lt;4; i++){ setTimeout(() =&gt; { console.log(i); }, i * 1000); }<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Explanation: <strong>var<\/strong> is function-scoped, so the same <strong>i<\/strong> is shared across all iterations. When the <strong>setTimeout<\/strong> callbacks execute, <strong>i<\/strong> has already been incremented to 4.<\/li>\n<\/ul>\n\n\n\n<p><strong><a href=\"https:\/\/react.dev\/\" title=\"What is React?\">What is React?<\/a><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of applications efficiently.<\/li>\n<\/ul>\n\n\n\n<p><strong><a href=\"https:\/\/www.sushilkumar.ind.in\/blog\/javascript\/what-is-higher-order-function-in-javascript\/\" title=\"What is higher order function in JavaScript?\">What are Higher-order Components (HOC) in React?<\/a><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Higher-order Components are functions that take a component and return a new component with additional props or functionality.<\/li>\n<\/ul>\n\n\n\n<p><strong>Difference between a <\/strong>class component and a <strong>function component?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Class Component: Uses ES6 classes, has lifecycle methods, and state is managed using <strong>this.state<\/strong>.<\/li>\n\n\n\n<li>Function Component: Uses functions, can use hooks (e.g., <strong>useState<\/strong>, <strong>useEffect<\/strong>), and is generally simpler and more concise.<\/li>\n<\/ul>\n\n\n\n<p><strong>What is Context API?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Context API is a React feature that allows you to pass data through the component tree without having to pass props down manually at every level.<\/li>\n<\/ul>\n\n\n\n<p><strong>Why do we need Redux?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Redux is a state management library that helps manage and centralize application state, making state changes predictable and easier to debug, especially in large applications with complex state interactions.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Photo by Alex Green on Pexels.com If a user writes wipro.com in the browser, how does it work as DOM creation? When a user enters &#8220;wipro.com&#8221; into the browser, the following steps occur: DNS Lookup: The browser looks up the IP address of &#8220;wipro.com&#8221; using DNS. HTTP Request: The browser sends an HTTP request to &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-136345","page","type-page","status-publish",""],"acf":[],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P99pkJ-zt7","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/pages\/136345"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=136345"}],"version-history":[{"count":16,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/pages\/136345\/revisions"}],"predecessor-version":[{"id":136484,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/pages\/136345\/revisions\/136484"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=136345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}