Interview

Here’s a detailed breakdown of the interview questions you provided, organized by topic:

---

### **HTML**

1. **How does the `defer` attribute in a script tag work?**
   - The `defer` attribute in a `<script>` tag tells the browser to download the script file in the background while parsing the HTML. The script is executed only after the HTML document has been fully parsed. This ensures that the script does not block the rendering of the page.
   - Example: `<script src="script.js" defer></script>`

2. **How would you create an accessible custom tooltip using only HTML?**
   - Use the `title` attribute for simple tooltips, but for custom tooltips, use ARIA attributes for accessibility:
     ```html
     <div role="tooltip" aria-describedby="tooltip1">Hover me
       <span id="tooltip1" role="tooltip">This is a tooltip</span>
     </div>
     ```
   - Style the tooltip with CSS and ensure it is keyboard-accessible.

3. **What are custom data attributes, and how are they used?**
   - Custom data attributes (`data-*`) allow you to store extra information in HTML elements without affecting the rendering or behavior of the page.
   - Example: `<div data-user-id="123" data-role="admin"></div>`
   - Accessed in JavaScript using `element.dataset.userId`.

---

### **JavaScript**

1. **How does prototypal inheritance work?**
   - In JavaScript, objects inherit properties and methods from their prototype. Every object has a hidden `[[Prototype]]` property that points to another object. If a property or method is not found on the object, JavaScript looks up the prototype chain.

2. **What is debouncing and throttling in JavaScript?**
   - **Debouncing**: Delays the execution of a function until a certain amount of time has passed since the last time it was called (e.g., for search input).
   - **Throttling**: Limits the execution of a function to once every specified time interval (e.g., for scroll events).

3. **How would you implement a deep clone of an object without using libraries?**
   - Use recursion and handle edge cases like circular references:
     ```javascript
     function deepClone(obj) {
       if (obj === null || typeof obj !== 'object') return obj;
       let clone = Array.isArray(obj) ? [] : {};
       for (let key in obj) {
         if (obj.hasOwnProperty(key)) {
           clone[key] = deepClone(obj[key]);
         }
       }
       return clone;
     }
     ```

4. **How do you test a webpage for accessibility?**
   - Use tools like Lighthouse, Axe, or WAVE to audit accessibility.
   - Test keyboard navigation, screen reader compatibility, and ARIA roles.

5. **How do you make images accessible?**
   - Use the `alt` attribute to describe the image: `<img src="image.jpg" alt="Description of image">`.
   - For decorative images, use an empty `alt` attribute: `alt=""`.

6. **How do service workers improve web performance?**
   - Service workers act as a proxy between the browser and the network, enabling features like offline caching, background sync, and push notifications.

7. **What are the possible reasons for memory leaks?**
   - Unintended global variables.
   - Forgotten timers or callbacks.
   - Closures retaining references.
   - Detached DOM elements.

8. **What are JavaScript design patterns?**
   - Common patterns include:
     - **Module Pattern**: Encapsulates code into modules.
     - **Singleton**: Ensures a class has only one instance.
     - **Observer**: Allows objects to subscribe to events.
     - **Factory**: Creates objects without specifying the exact class.

9. **What is the difference between `setTimeout`, `setImmediate`, and `process.nextTick`?**
   - `setTimeout`: Schedules a callback after a minimum delay.
   - `setImmediate`: Executes a callback after the current event loop cycle.
   - `process.nextTick`: Executes a callback immediately after the current operation, before the next event loop tick.

10. **What is referential transparency?**
    - A property of pure functions where the function call can be replaced with its result without changing the program's behavior.

11. **What are the differences between `arguments` object and rest parameter?**
    - `arguments`: Array-like object containing all arguments passed to a function (not available in arrow functions).
    - Rest parameter (`...args`): Actual array containing all remaining arguments.

12. **What are the possible side effects in JavaScript?**
    - Modifying global variables, mutating objects, or performing I/O operations.

13. **What are the phases of execution context?**
    - Creation phase: Variable and function declarations are hoisted.
    - Execution phase: Code is executed line by line.

14. **What is nullish coalescing operator (`??`)?**
    - Returns the right-hand side operand if the left-hand side is `null` or `undefined`.

15. **What is the difference between dense and sparse arrays?**
    - Dense arrays have contiguous elements, while sparse arrays have "holes" (undefined values).

16. **What are the real-world use cases of `Proxy`?**
    - Intercepting and customizing object operations (e.g., validation, logging).

17. **What is the module pattern? What is function composition?**
    - **Module Pattern**: Encapsulates code into reusable modules.
    - **Function Composition**: Combining multiple functions to create a new function.

18. **What are decorators and annotations in JavaScript?**
    - **Decorators**: Functions that modify classes or methods (used with `@` syntax).
    - **Annotations**: Metadata added to code (often used in frameworks like Angular).

19. **Promise.all, Promise.race, Promise.any, Promise.allSettled**
    - `Promise.all`: Resolves when all promises resolve; rejects if any promise rejects.
    - `Promise.race`: Resolves or rejects as soon as one promise settles.
    - `Promise.any`: Resolves as soon as one promise resolves; rejects if all promises reject.
    - `Promise.allSettled`: Resolves after all promises settle, regardless of success or failure.

---

### **React Round**

1. **Describe the flow of data in a Redux application.**
   - Data flows unidirectionally:
     1. User triggers an action.
     2. The action is dispatched to the Redux store.
     3. The store invokes the reducer with the current state and action.
     4. The reducer returns a new state.
     5. The store updates, and React components re-render based on the new state.

2. **Can we use `async` and `await` inside the `useEffect` hooks?**
   - Yes, but you need to define an async function inside `useEffect` and call it:
     ```javascript
     useEffect(() => {
       const fetchData = async () => {
         const result = await someAsyncFunction();
         // Handle result
       };
       fetchData();
     }, []);
     ```

---

Let me know if you need further clarification on any of these topics!