Interview Question list

If a user writes wipro.com in the browser, how does it work as DOM creation?

• When a user enters “wipro.com” into the browser, the following steps occur:
  1. DNS Lookup: The browser looks up the IP address of “wipro.com” using DNS.
  2. HTTP Request: The browser sends an HTTP request to the server at the retrieved IP address.
  3. Server Response: The server sends back an HTTP response, which usually includes HTML, CSS, and JavaScript.
  4. HTML Parsing: The browser starts parsing the HTML document. This creates the Document Object Model (DOM), a tree-like structure representing the document’s content.
  5. Resource Loading: The browser requests additional resources (CSS, JS, images) needed by the HTML.
  6. CSSOM Construction: CSS is parsed into the CSS Object Model (CSSOM).
  7. Render Tree Construction: The DOM and CSSOM are combined to create the render tree.
  8. Layout: The browser calculates the layout of each element based on the render tree.
  9. Painting: The browser paints the pixels to the screen based on the layout.

What is CORS?

• 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.

How can we whitelist server A in server B to avoid CORS?

• 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: 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) => { res.json({ message: 'This is CORS-enabled for server A only' }); }); app.listen(3000, () => { console.log('Server B listening on port 3000'); });

Async/Await

• async and await are keywords in JavaScript that enable asynchronous, promise-based behavior in a cleaner, more readable way.
  • async function: Declares an asynchronous function that implicitly returns a promise.
  • await: Pauses the execution of an async function and waits for the promise to resolve or reject.

What is the difference between map and filter?

• map: Creates a new array by applying a function to each element of the original array.
• filter: Creates a new array with all elements that pass the test implemented by the provided function.

What is the difference between map and forEach?

• map: Returns a new array with the results of calling a function on every element in the original array.
• forEach: Executes a function on each element of the array but does not return a new array.

What is a closure?

• A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables, even after the outer function has returned.

What is the temporal dead zone?

• The temporal dead zone (TDZ) is the period of time during which the let and const variables are in scope but not yet declared, and therefore cannot be accessed.

Difference between var and let?

• var: Function-scoped, hoisted, and can be redeclared.
• let: Block-scoped, not hoisted in the same way as var, and cannot be redeclared in the same scope.

What is memo in React?

• React.memo is a higher-order component that prevents a functional component from re-rendering if its props have not changed.

How can you check the performance of any application?

• Use browser developer tools (e.g., Chrome DevTools) to monitor performance, measure load times, and analyze network requests.
• Use performance monitoring tools like Lighthouse, WebPageTest, and New Relic.
• Optimize code, reduce render times, and improve resource loading.

What are higher-order functions?

• Higher-order functions are functions that take other functions as arguments, return a function, or both.

What is IIFE (Immediately Invoked Function Expression) in JavaScript?

• An IIFE is a function that is executed immediately after it is defined. It is a common pattern to create a local scope.

(function() { // Code here is executed immediately })();

What is the Event Loop?

• 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.

Explain about Async and Defer?

• async: Downloads the script asynchronously and executes it as soon as it’s downloaded.
• defer: Downloads the script asynchronously but executes it only after the HTML is fully parsed.

Filter and map function?

• filter: Creates a new array with elements that pass a test.
• map: Creates a new array with the results of calling a function on every element in the array.

From an 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 myFilter function that should work like the built-in filter.

const arr = [1, 2, 3, 4, 5, 6, 7, 8]; const result = arr.filter(num => num > 4); console.log(result); // [5, 6, 7, 8] Array.prototype.myFilter = function(callback) { const result = []; for (let i = 0; i < this.length; i++) { if (callback(this[i], i, this)) { result.push(this[i]); } } return result; }; const customResult = arr.myFilter(num => num > 4); console.log(customResult); // [5, 6, 7, 8]

Output for the below code:

console.log("start"); setTimeout(() => { console.log("setTimeout"); }, 0); console.log("end");

• Explanation: The setTimeout callback is placed in the task queue and is executed after the current call stack is empty.

Output for the below code and explanation:

for(var i=0; i<4; i++){ setTimeout(() => { console.log(i); }, i * 1000); }

• Explanation: var is function-scoped, so the same i is shared across all iterations. When the setTimeout callbacks execute, i has already been incremented to 4.

What is React?

• React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of applications efficiently.

What are Higher-order Components (HOC) in React?

• Higher-order Components are functions that take a component and return a new component with additional props or functionality.

Difference between a class component and a function component?

• Class Component: Uses ES6 classes, has lifecycle methods, and state is managed using this.state.
• Function Component: Uses functions, can use hooks (e.g., useState, useEffect), and is generally simpler and more concise.

What is Context API?

• 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.

Why do we need Redux?

• 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.