Front end Engineer

50+ Front end Engineer Interview Questions and Answers

Updated 21 Feb 2025
search-icon

Q1. Pair Sum Problem Statement

You are given an integer array 'ARR' of size 'N' and an integer 'S'. Your task is to find and return a list of all pairs of elements where each sum of a pair equals 'S'.

Note:

Each pa...read more

Ans.

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.

Q2. Can you explain the concepts of deep and shallow copy in JavaScript with examples?
Ans.

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

Q3. What is the difference between absolute and fixed positioning in CSS?
Ans.

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.

Q4. Write a code to find if the input date is today or tomorrow based on the current date. If it's not today or tomorrow, output the no of days difference between the input date and the current date.

Ans.

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

Are these interview questions helpful?

Q5. Explain box model in css, and what is specificity in CSS. What are render-blocking statements?

Ans.

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

Q6. What is a callback? How is it accompanied with asynchronous programming

Ans.

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.

Share interview questions and help millions of jobseekers 🌟

man-with-laptop

Q7. What is event bubbling, event capturing and its use?

Ans.

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

Q8. How will you implement infinite scrolling in react js?

Ans.

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.

Front end Engineer Jobs

Frontend Engineer II, IES Latency 0-7 years
Amazon India Software Dev Centre Pvt Ltd
4.1
Bangalore / Bengaluru
Front End Engineer 2-4 years
Verizon Data Services India Pvt.Ltd
4.1
Bangalore / Bengaluru
Senior Frontend Engineer, Send To Amazon Team 7-10 years
Amazon India Software Dev Centre Pvt Ltd
4.1
Bangalore / Bengaluru
Q9. Can you write a polyfill for event delegation in JavaScript?
Ans.

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.

Q10. Tell about Saas( Syntactically Awesome Style Sheets)

Ans.

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

Q11. Write code to find if two objects are equal or not in javascript

Ans.

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

Q12. Implement Traffic Light Functionality using HTML+CSS+ Vanilla Javascript (Initially Light should be RED, after 60 second it should turn into GREEN, then after 5 second YELLOW, and after 3 second turn it back to...

read more
Ans.

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

Q13. What is bind in javascript and write its polyfill

Ans.

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.

Q14. How does a browser render a webpage?
Ans.

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

Q15. what is the difference between async and defer

Ans.

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

Q16. Have you worked on PWA and explain the benefits of using one?

Ans.

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.

Q17. How can you applied a certain css on three div element?

Ans.

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

Q18. Explain DOM and Virtual DOM. Difference between them.

Ans.

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

Q19. What is useCallback()? Explain in depth

Ans.

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

Q20. What are closures in JavaScript?
Ans.

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

Q21. How you will architect logging events for your project?

Ans.

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

Q22. Write a program to reserve a string without using any inbuilt method in javascript. (Two-pointer and One-pointer)

Ans.

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'

Q23. How event loop work in js, hoisting, closure, find second largest in array and other code snippets.

Ans.

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

Q24. Find second highest number in an array. Find whether linkedlist contains a loop, if so tell the starting node

Ans.

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

Q25. how you define that reactJS is good for UI development?

Ans.

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

Q26. what's the benefit of using sematic HTML?

Ans.

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

Q27. Tic-tac-toe game using any JS framework(react)

Ans.

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.

Q28. Difference between useState() vs useRef()

Ans.

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.

Q29. What is specificity ? What are semantic tags ? Promises and Async await . useMemo vs useCallback

Ans.

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

Q30. What is webpack?
Ans.

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.

Q31. Create a tic tac toe game taking number of boards as a parameter

Ans.

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

Q32. What are promises?

Ans.

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.

Q33. 3 SUM, return array elements which sum to a target

Ans.

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

Q34. What is React? and React Reconcilation.

Ans.

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

Q35. Create a HOF that makes any function as curry function

Ans.

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

Q36. Functional Programming vs. Object-oriented programming

Ans.

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

Q37. What tech stack do you know?

Ans.

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

  • HTML

  • CSS

  • JavaScript

  • React

  • Angular

  • Node.js

Q38. How will you implement multiselect

Ans.

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

Q39. What are CDNs? How they work?

Ans.

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

Q40. How to fetch data from api

Ans.

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

Q41. What are pure components

Ans.

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.

Q42. Create a feature flag component

Ans.

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

Q43. Recursive search in Javascript Object.

Ans.

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

Q44. What is Span Tag?

Ans.

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

Q45. How does v8 work?

Ans.

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

Q46. Min cost to buy and sell

Ans.

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.

Q47. LLD for autoComplete component

Ans.

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

Q48. Trapping rainwater problem

Ans.

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

Q49. Develop Chess UI

Ans.

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

Q50. repaint vs reflow

Ans.

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

1
2
Next
Interview Tips & Stories
Ace your next interview with expert advice and inspiring stories

Top Interview Questions for Front end Engineer Related Skills

Interview experiences of popular companies

4.1
 • 5k Interviews
4.0
 • 1.3k Interviews
4.0
 • 759 Interviews
3.8
 • 75 Interviews
3.7
 • 70 Interviews
3.8
 • 38 Interviews
4.2
 • 6 Interviews
4.2
 • 4 Interviews
5.0
 • 2 Interviews
View all

Calculate your in-hand salary

Confused about how your in-hand salary is calculated? Enter your annual salary (CTC) and get your in-hand salary

Front end Engineer Interview Questions
Share an Interview
Stay ahead in your career. Get AmbitionBox app
qr-code
Helping over 1 Crore job seekers every month in choosing their right fit company
65 L+

Reviews

4 L+

Interviews

4 Cr+

Salaries

1 Cr+

Users/Month

Contribute to help millions

Made with ❤️ in India. Trademarks belong to their respective owners. All rights reserved © 2024 Info Edge (India) Ltd.

Follow us
  • Youtube
  • Instagram
  • LinkedIn
  • Facebook
  • Twitter