60+ 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

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

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

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.

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

A circular linked list is ideal for navigating songs in a music player, allowing seamless next and previous song access.

• Use a circular linked list to store songs, enabling easy traversal to the next and previous songs.

• Each node in the list can represent a song, containing the song data and pointers to the next and previous nodes.

• Example: If the current song is 'Song A', the next pointer leads to 'Song B', and the previous pointer leads back to 'Song C'.

• This structure allows f...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

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

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

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.

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.