50+ Front end Engineer Interview Questions and Answers

Find pairs of elements in an array that sum up to a given value, sorted in a specific order.

• Iterate through the array and use a hashmap to store the difference between the target sum and each element.

• Check if the difference exists in the hashmap, if so, add the pair to the result list.

• Sort the result list based on the criteria mentioned in the question.

• Return the sorted list of pairs.

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.

Deep copy creates a new copy of an object/array with all nested values copied, while shallow copy creates a new object/array with references to the original nested values.

• Deep copy creates a completely new copy of an object/array, including all nested values, while shallow copy only creates a new object/array with references to the original nested values.

• In JavaScript, deep copy can be achieved using methods like JSON.parse(JSON.stringify(obj)) or libraries like Lodash's _.cl...read more

Absolute positioning is relative to the nearest positioned ancestor, while fixed positioning is relative to the viewport.

• Absolute positioning is relative to the nearest positioned ancestor.

• Fixed positioning is relative to the viewport.

• Absolute positioned elements are removed from the normal document flow.

• Fixed positioned elements stay in the same position even when the page is scrolled.

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

Implement infinite scrolling in React JS using Intersection Observer API.

• Use Intersection Observer API to detect when the user has scrolled to the bottom of the page.

• Fetch new data and append it to the existing data using setState.

• Use a loading spinner to indicate that new data is being fetched.

• Add a debounce function to prevent multiple API calls while scrolling.

• Use a key prop when rendering the list of data to avoid re-rendering of existing elements.

Yes, event delegation can be achieved by attaching an event listener to a parent element and then checking the target element of the event.

• Attach an event listener to a parent element that contains the child elements you want to delegate events to.

• Check the target element of the event to determine if it matches the desired child element.

• Perform the appropriate action based on the target element.

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

Implement Traffic Light functionality using HTML+CSS+Vanilla Javascript

• Create HTML elements for the traffic light

• Use CSS to style the elements to represent the different lights (red, green, yellow)

• Use Vanilla Javascript to toggle the lights based on the specified time intervals

A browser renders a webpage by parsing HTML, CSS, and JavaScript, constructing the DOM tree, rendering the layout, and painting the pixels on the screen.

• Browser requests the HTML file from the server

• Browser parses the HTML and constructs the DOM tree

• Browser fetches external resources like CSS and JavaScript files

• Browser applies CSS styles to the DOM elements and constructs the render tree

• Browser executes JavaScript code and updates the DOM accordingly

• Browser calculates the la...read more

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

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

Closures in JavaScript are functions that have access to variables from their outer scope even after the outer function has finished executing.

• Closures allow functions to access variables from their parent function's scope

• They are created whenever a function is defined within another function

• Closures can be used to create private variables and functions in JavaScript

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

Program to reserve a string without using inbuilt methods in JavaScript

• Use two pointers to swap characters at the beginning and end of the string until they meet in the middle

• Create a function that takes a string as input and returns the reversed string

• Example: Input 'hello', Output 'olleh'

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

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.

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

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

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.

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

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

Webpack is a module bundler for JavaScript applications.

• Webpack takes modules with dependencies and generates static assets representing those modules.

• It can handle various types of assets like JavaScript, CSS, and images.

• Webpack allows for code splitting, lazy loading, and hot module replacement.

• Common configuration options include entry, output, loaders, and plugins.

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.

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

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

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

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

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

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

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

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

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