60+ Front end Engineer Interview Questions and Answers

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

Promises in JavaScript handle asynchronous operations, allowing for cleaner code and better error handling.

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

• Example: const myPromise = new Promise((resolve, reject) => { /* async code */ });

• Use .then() to handle fulfilled promises: myPromise.then(result => console.log(result));

• Use .catch() to handle rejected promises: myPromise.catch(error => console.error(error));

• Chaining promises allows for sequential a...read more

Design a real-time stock dashboard for monitoring stock prices and trends.

• Use WebSockets for real-time data updates to ensure users see live stock prices.

• Implement a responsive UI using frameworks like React or Vue.js for better user experience.

• Incorporate charts (e.g., using Chart.js or D3.js) to visualize stock trends over time.

• Allow users to customize their dashboard by adding/removing stocks they want to track.

• Implement a search feature to quickly find specific stocks by ...read more

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

Discussing recursion in data structures and algorithms for a front-end engineer role.

• Recursion is a method where the solution to a problem depends on solutions to smaller instances of the same problem.

• Example: Calculating factorial of a number n using recursion: factorial(n) = n * factorial(n-1).

• Base case is crucial to prevent infinite recursion; e.g., factorial(0) = 1.

• Recursion can be less efficient than iteration due to function call overhead and stack space.

• Common use case...read more

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.

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

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

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

Calculate the median of an array of numbers in JavaScript.

• Sort the array in ascending order.

• If the array length is odd, return the middle element.

• If the array length is even, return the average of the two middle elements.

• Example: For [3, 1, 2], sorted is [1, 2, 3], median is 2.

• Example: For [3, 1, 2, 4], sorted is [1, 2, 3, 4], median is (2 + 3) / 2 = 2.5.

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

A React login form with validation and conditional rendering for user feedback.

• Use controlled components for form inputs to manage state effectively.

• Implement validation to check for empty fields and valid email format.

• Display error messages conditionally based on validation results.

• Use hooks like useState for managing form data and error states.

• Example: <input type='email' value={email} onChange={handleEmailChange} />

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

Design a reusable custom Form Component for efficient data handling and validation in frontend applications.

• Component Structure: Use functional components with hooks for state management.

• Props: Accept props for form fields, validation rules, and submission handlers.

• State Management: Utilize useState for form data and useEffect for validation.

• Validation: Implement custom validation logic or integrate libraries like Yup.

• Styling: Use CSS modules or styled-components for scoped s...read more

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.

Design an AI-powered parking lot system for efficient space management and user convenience.

• Utilize sensors and cameras to monitor parking space availability in real-time.

• Implement a mobile app for users to find, reserve, and pay for parking spots.

• Use machine learning algorithms to predict peak parking times and optimize space allocation.

• Integrate with navigation systems to guide users to the nearest available parking spot.

• Consider features like dynamic pricing based on deman...read more

Live coding tests a candidate's problem-solving skills and coding proficiency in real-time.

• Understand the problem statement clearly before coding.

• Break down the problem into smaller, manageable parts.

• Write clean and readable code with proper naming conventions.

• Test your code with different inputs to ensure it works as expected.

• Communicate your thought process while coding to engage the interviewer.

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

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.

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

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

Finding the median of two sorted arrays efficiently using binary search.

• Use two pointers to track the current position in each array.

• If the total length of both arrays is odd, the median is the middle element.

• If even, the median is the average of the two middle elements.

• Example: For arrays [1, 3] and [2], the median is 2.

• Example: For arrays [1, 2] and [3, 4], the median is (2 + 3) / 2 = 2.5.

A polyfill for Promise.all allows handling multiple promises concurrently, returning a single promise that resolves when all are fulfilled.

• Promise.all takes an iterable of promises and returns a single promise.

• If any promise rejects, the returned promise rejects with that reason.

• Example: Promise.all([Promise.resolve(1), Promise.resolve(2)]) resolves to [1, 2].

• If one promise rejects: Promise.all([Promise.resolve(1), Promise.reject('error')]) rejects with 'error'.

• Useful for run...read more

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