40+ Front end Engineer Interview Questions and Answers

Code to find if input date is today/tomorrow or no of days difference from current date.

• Get current date using Date() constructor

• Convert input date to Date object

• Compare input date with current date to check if it's today/tomorrow

• If not, calculate the difference in days using getTime() method

• Output the result accordingly

Box model defines how elements are rendered in CSS. Specificity determines which CSS rule applies to an element. Render-blocking statements delay page rendering.

• Box model includes content, padding, border, and margin.

• Specificity is calculated based on the number of selectors and their types.

• Render-blocking statements are CSS or JavaScript files that prevent the page from rendering until they are loaded.

• Use media queries to optimize rendering and reduce render-blocking stateme...read more

A callback is a function passed as an argument to another function to be executed later. It is commonly used in asynchronous programming.

• A callback function is often used in event handling, AJAX requests, and setTimeout functions.

• It allows the program to continue running while waiting for a response, improving efficiency.

• Callbacks can be synchronous or asynchronous, with the latter being more common in modern web development.

Event bubbling and event capturing are two mechanisms in JavaScript that describe the order in which events are handled.

• Event bubbling is the process where an event is first captured by the innermost element and then propagated to its parent elements.

• Event capturing is the opposite process where an event is first captured by the outermost element and then propagated to its child elements.

• Event bubbling is the default behavior in most browsers.

• Event.stopPropagation() can be us...read more

Saas is a CSS preprocessor that extends the functionality of CSS with variables, mixins, and more.

• Saas stands for Syntactically Awesome Style Sheets

• It allows for the use of variables, mixins, and functions in CSS

• Saas code must be compiled into CSS before it can be used in a web page

• Saas is often used in conjunction with build tools like Gulp or Webpack

Code to check equality of two objects in JavaScript

• Use the JSON.stringify() method to convert the objects into strings

• Compare the string representations of the objects using the === operator

• If the strings are equal, the objects are considered equal

Bind creates a new function with a specified 'this' value and arguments.

• Bind returns a new function with the same body as the original function.

• The 'this' value of the new function is bound to the first argument passed to bind().

• The subsequent arguments are passed as arguments to the new function.

• Polyfill for bind() can be created using call() or apply() methods.

async loads script while page continues to load, defer loads script after page has loaded

• async loads scripts asynchronously while page continues to load

• defer loads scripts after the page has loaded

• async scripts may not execute in order, while defer scripts do

• async scripts may cause rendering issues, while defer scripts do not

Yes, I have worked on PWA. PWA stands for Progressive Web App and offers benefits like offline access, fast loading, and push notifications.

• PWA provides offline access to users, allowing them to use the app even without an internet connection.

• PWA loads quickly, providing a seamless user experience similar to native apps.

• PWA can send push notifications to engage users and increase retention.

• Examples of popular PWAs include Twitter Lite, Pinterest, and Starbucks.

You can apply a certain CSS on three div elements by using a common class or ID for all three divs.

• Add a common class or ID to all three div elements

• Define the CSS properties for that class or ID in your stylesheet

• Apply the class or ID to each of the three div elements in your HTML markup

DOM is a tree-like structure representing the HTML elements of a webpage. Virtual DOM is a lightweight copy of the DOM used for efficient updates.

• DOM stands for Document Object Model and represents the structure of HTML elements on a webpage.

• Virtual DOM is a lightweight copy of the DOM kept in memory by frameworks like React for efficient updates.

• Changes made to the Virtual DOM are compared with the actual DOM, and only the differences are updated on the real DOM.

• Virtual DOM ...read more

useCallback() is a React hook that returns a memoized callback function.

• useCallback() is used to optimize performance by memoizing functions.

• It is useful when passing callbacks to child components that rely on reference equality.

• It takes a callback function and an array of dependencies as arguments.

• The callback function is only re-created if any of the dependencies change.

• Example: const memoizedCallback = useCallback(() => { // callback function }, [dependency1, dependency2])...read more

I would architect logging events by defining clear event types, implementing structured logging, utilizing a centralized logging system, and setting up alerts for critical events.

• Define clear event types to categorize different types of logs (e.g. error, info, warning)

• Implement structured logging to include relevant metadata with each log entry (e.g. timestamp, user ID)

• Utilize a centralized logging system like ELK stack or Splunk to aggregate and analyze logs efficiently

• Set u...read more

Event loop in JS manages asynchronous operations, hoisting moves variable declarations to the top, closures allow functions to access outer scope variables, find second largest in array using sorting or looping.

• Event loop in JS manages the execution of asynchronous tasks by placing them in a queue and executing them in order.

• Hoisting in JS moves variable and function declarations to the top of their containing scope.

• Closures in JS allow functions to access variables from thei...read more

To find the second highest number in an array and detect if a linked list contains a loop and identify the starting node.

• To find the second highest number in an array, sort the array in descending order and return the second element.

• To detect a loop in a linked list, use Floyd's Cycle Detection Algorithm by having two pointers, one moving twice as fast as the other. If they meet, there is a loop. To find the starting node, reset one pointer to the head and move both pointers ...read more

ReactJS is good for UI development due to its component-based architecture, virtual DOM, and reusable code.

• ReactJS uses a component-based architecture which allows for reusability and easier maintenance of UI elements.

• Virtual DOM in ReactJS helps in optimizing performance by only updating the necessary parts of the UI when data changes.

• ReactJS promotes the use of reusable code through components, making it easier to build complex UIs with consistent design patterns.

• ReactJS ha...read more

Semantic HTML provides structure and meaning to content, improving accessibility, SEO, and maintainability.

• Improves accessibility for screen readers and other assistive technologies

• Enhances SEO by providing search engines with better understanding of content

• Improves maintainability by making code easier to read and understand

• Helps with styling and layout by providing more specific elements to target

A tic-tac-toe game built using React framework in JavaScript.

• Create a board component to display the game grid.

• Implement logic to handle player moves and check for win conditions.

• Use state management to update the game state.

• Consider adding features like a reset button or keeping track of player scores.

useState() is used to manage state in functional components, while useRef() is used to persist values between renders.

• useState() re-renders the component when the state changes, useRef() does not trigger a re-render.

• useState() returns a pair: the current state value and a function that lets you update it, useRef() returns a mutable ref object.

• useState() is used for managing component state, useRef() is used for accessing DOM nodes or persisting values between renders.

Specificity is a CSS concept that determines which style rule is applied to an element. Semantic tags are HTML tags that provide meaning to the content. Promises and async/await are used for asynchronous programming. useMemo and useCallback are React hooks for optimizing performance.

• Specificity in CSS determines which style rule takes precedence based on selectors and their specificity values.

• Semantic tags in HTML provide meaning to the content and help with SEO and accessibi...read more

Create a tic tac toe game with customizable number of boards.

• Accept number of boards as a parameter

• Create a 3x3 grid for each board

• Implement logic to check for winning combinations on each board

Promises are objects representing the eventual completion or failure of an asynchronous operation.

• Promises are used to handle asynchronous operations in JavaScript.

• They can be in one of three states: pending, fulfilled, or rejected.

• Promises can be chained together using .then() method.

• They help avoid callback hell and make code more readable.

• Example: Fetching data from an API returns a promise that resolves with the data.

Find array elements that sum to a target value

• Use a nested loop to iterate through all possible pairs of elements

• Check if the sum of the pair equals the target value

• Return the pair if found, otherwise return an empty array

React is a JavaScript library for building user interfaces. React Reconciliation is the process of updating the UI efficiently.

• React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

• React uses a virtual DOM to improve performance by only updating the necessary parts of the actual DOM.

• React Reconciliation is the process of determining which parts of the UI need to be updated based on changes in the data or state.

• Example: When a user int...read more

Create a higher order function that converts any function into a curry function

• Define a higher order function that takes a function as input

• Return a new function that accepts arguments one at a time until all arguments are received

• Use the apply method to call the original function with the collected arguments

Functional programming focuses on functions and immutability, while object-oriented programming focuses on objects and encapsulation.

• Functional programming uses pure functions and avoids side effects.

• Object-oriented programming uses classes and objects to model real-world entities.

• Functional programming emphasizes immutability, while object-oriented programming allows for mutable state.

• Functional programming languages include Haskell and Clojure, while object-oriented program...read more

I am proficient in HTML, CSS, JavaScript, React, Angular, and Node.js.

• HTML

• CSS

• JavaScript

• React

• Angular

• Node.js

Implement multiselect using checkboxes or dropdown with multiple selection enabled

• Use checkboxes or a dropdown with multiple selection enabled

• Allow users to select multiple options by clicking on checkboxes or selecting from dropdown

• Store selected options in an array of strings

CDNs are Content Delivery Networks that help deliver web content faster by caching it on servers closer to the user.

• CDNs distribute content across multiple servers located in different geographic locations

• They cache static content like images, CSS, and JavaScript files to reduce load times

• CDNs use edge servers to deliver content to users from the server closest to them

• Popular CDNs include Cloudflare, Akamai, and Amazon CloudFront

To fetch data from an API, you can use tools like fetch or axios in JavaScript.

• Use fetch or axios library in JavaScript to make API requests

• Specify the API endpoint URL in the fetch/axios call

• Handle the response data using promises or async/await

• Parse the JSON response data to use in your application

Pure components are React components that do not have any side effects and always render the same output for the same input.

• Pure components are typically implemented as functional components in React.

• They do not modify the state or props passed to them.

• Pure components help in optimizing performance by preventing unnecessary re-renders.

• Examples include functional components with no internal state or class components that extend PureComponent class.

Feature flag component to control feature toggling in the application

• Create a component that accepts a feature flag name as prop

• Check if the feature flag is enabled or disabled

• Render the component content based on the feature flag status

Recursive search in JavaScript object

• Use a recursive function to search through nested objects

• Check if current property is an object, if so call the function recursively

• Return the value if found, otherwise return null

Span tag is an inline element used in HTML to apply styles to a specific section of text.

• Used to apply styles to a specific section of text within a larger block of content

• Does not create a new line, unlike block-level elements

• Commonly used for highlighting or styling small portions of text

V8 is a JavaScript engine developed by Google for Chrome and Node.js.

• V8 compiles JavaScript code into machine code for faster execution

• It uses Just-In-Time (JIT) compilation to optimize performance

• V8 includes a garbage collector to manage memory efficiently

The minimum cost to buy and sell a product involves considering the purchase price, selling price, and any associated fees.

• Calculate the total cost by adding the purchase price and any fees incurred during the buying process.

• Calculate the total revenue by subtracting any fees incurred during the selling process from the selling price.

• Subtract the total cost from the total revenue to determine the minimum cost to buy and sell.

LLD for autoComplete component involves designing the architecture and data flow for a feature that suggests completions based on user input.

• Design a data structure to store possible completions

• Implement a search algorithm to filter completions based on user input

• Handle user interactions like selecting a completion and submitting the form

Trapping rainwater problem involves calculating the amount of rainwater that can be trapped between buildings.

• Calculate the maximum height of water that can be trapped at each index

• Calculate the water trapped at each index by subtracting the height of the building at that index from the minimum of the maximum heights on its left and right

• Sum up the water trapped at each index to get the total amount of rainwater trapped

Develop a Chess UI for users to play the game online.

• Create a chessboard with 64 squares

• Implement drag-and-drop functionality for moving pieces

• Display captured pieces on the side of the board

• Include options for player vs player or player vs computer

• Add a timer for each player's turn

Repaint involves changing the visual appearance of an element, while reflow involves recalculating the layout of elements on the page.

• Repaint is when changes are made to an element's style that do not affect its layout, such as color or background.

• Reflow is when changes are made to an element's layout that affect its position or size, triggering a recalculation of the entire page layout.

• Repaint is less resource-intensive than reflow, as it only updates the visual appearance w...read more

Design a communication platform like Slack for team collaboration.

• Allow users to create channels for different topics or teams

• Include features like direct messaging, file sharing, and integrations with other tools

• Implement real-time messaging and notifications

• Provide customization options for user profiles and channel settings