Front end Developer
100+ Front end Developer Interview Questions and Answers for Freshers
Popular Companies
Q1. Check If Linked List Is Palindrome
Given a singly linked list of integers, determine if the linked list is a palindrome.
Explanation:
A linked list is considered a palindrome if it reads the same forwards and b...read more
Check if a given singly linked list of integers is a palindrome or not.
Create a function to reverse the linked list.
Use two pointers to find the middle of the linked list.
Compare the first half of the linked list with the reversed second half to determine if it's a palindrome.
Q2. Allocate Books Problem Statement
Given an array of integers arr
, where arr[i]
represents the number of pages in the i-th
book, and an integer m
representing the number of students, allocate all the books in suc...read more
Allocate books to students in a way that minimizes the maximum number of pages assigned to a student.
Iterate through possible allocations and calculate the maximum pages assigned to a student.
Find the minimum of these maximums to get the optimal allocation.
Return the minimum pages allocated in each test case, or -1 if not possible.
Q3. Segregate Odd-Even Problem Statement
In a wedding ceremony at NinjaLand, attendees are blindfolded. People from the bride’s side hold odd numbers, while people from the groom’s side hold even numbers. For the g...read more
Rearrange a linked list such that odd numbers appear before even numbers while preserving the order.
Create two separate linked lists for odd and even numbers
Traverse the original list and append nodes to respective odd/even lists
Combine the odd and even lists while maintaining the order
Return the rearranged linked list
Q4. Find Magic Index in Sorted Array
Given a sorted array A consisting of N integers, your task is to find the magic index in the given array, where the magic index is defined as an index i such that A[i] = i.
Exam...read more
Find the magic index in a sorted array where A[i] = i.
Iterate through the array and check if A[i] = i for each index i.
Since the array is sorted, you can optimize the search using binary search.
Return the index if found, else return -1.
Q5. Triplets with Given Sum Problem
Given an array or list ARR
consisting of N
integers, your task is to identify all distinct triplets within the array that sum up to a specified number K
.
Explanation:
A triplet i...read more
The task is to identify all distinct triplets within an array that sum up to a specified number.
Iterate through the array and use nested loops to find all possible triplets.
Check if the sum of the triplet equals the specified number.
Print the valid triplets or return -1 if no such triplet exists.
Q6. Most Frequent Non-Banned Word Problem Statement
Given a paragraph consisting of letters in both lowercase and uppercase, spaces, and punctuation, along with a list of banned words, your task is to find the most...read more
Find the most frequent word in a paragraph that is not in a list of banned words.
Split the paragraph into words and convert them to uppercase for case-insensitivity.
Count the frequency of each word, excluding banned words.
Return the word with the highest frequency in uppercase.
Share interview questions and help millions of jobseekers 🌟
Q7. Matching Prefix Problem Statement
Given an integer N
representing the number of strings in an array Arr
composed of lowercase English alphabets, determine a string S
of length N
such that it can be used to dele...read more
Given an array of strings, find the lexicographically smallest string that can be used as a prefix to minimize the total cost of deleting prefixes from the strings.
Iterate through the array to find the common prefix among all strings
Choose the lexicographically smallest common prefix
Delete the common prefix from each string in the array to minimize the total cost
Q8. Alien Dictionary Problem Statement
You are provided with a sorted dictionary (by lexical order) in an alien language. Your task is to determine the character order of the alien language from this dictionary. Th...read more
Given a sorted alien dictionary in an array of strings, determine the character order of the alien language.
Iterate through the words in the dictionary to build a graph of character dependencies.
Perform a topological sort on the graph to determine the character order.
Return the character array representing the order of characters in the alien language.
Front end Developer Jobs
Q9. Palindrome String Validation
Determine if a given string 'S' is a palindrome, considering only alphanumeric characters and ignoring spaces and symbols.
Note:
The string 'S' should be evaluated in a case-insensi...read more
Validate if a given string is a palindrome after removing special characters, spaces, and converting to lowercase.
Remove special characters and spaces from the input string
Convert the string to lowercase
Check if the modified string is equal to its reverse to determine if it's a palindrome
Q10. Postorder Successor Problem Statement
You are provided with a binary tree consisting of 'N' distinct nodes and an integer 'M'. Your task is to find and return the postorder successor of 'M'.
Note:
The postorder...read more
Find the postorder successor of a node in a binary tree.
Traverse the binary tree in postorder to get the sequence.
Find the index of the node 'M' in the postorder sequence.
Return the element at the next index as the postorder successor.
If 'M' is the last element in the sequence, return -1 as there is no successor.
Q11. Jumping Numbers Problem Statement
Given a positive integer N
, your goal is to find all the Jumping Numbers that are smaller than or equal to N
.
A Jumping Number is one where every adjacent digit has an absolute...read more
Find all Jumping Numbers smaller than or equal to a given positive integer N.
Iterate through numbers from 0 to N and check if each number is a Jumping Number.
For each number, check if the absolute difference between adjacent digits is 1.
Include all single-digit numbers as Jumping Numbers.
Output the list of Jumping Numbers that are smaller than or equal to N.
Q12. Is Javascript single thread or multithread?
Javascript is single-threaded.
Javascript runs on a single thread called the event loop.
This means that it can only execute one task at a time.
However, it can delegate tasks to other threads using web workers.
This allows for parallel processing without blocking the main thread.
Q13. how would you optimize the api call on input change(Debouncing)
Debounce the API call on input change to optimize performance.
Implement a debounce function to delay the API call until the user has finished typing.
Set a time interval for the debounce function to wait before making the API call.
Cancel the previous API call if a new input change occurs before the time interval is up.
Use a loading spinner to indicate to the user that the API call is in progress.
Consider using a caching mechanism to store the API response for future use.
Q14. Is functional components and class components both are same or not?
Functional components and class components are not the same in React. Functional components are simpler and more lightweight, while class components have additional features like state and lifecycle methods.
Functional components are stateless and are just JavaScript functions that return JSX.
Class components have access to state and lifecycle methods like componentDidMount and componentDidUpdate.
Functional components are easier to read and test, while class components can be ...read more
The process of building a front-end project involves planning, designing, coding, testing, and deploying.
Gather requirements and create a project plan
Design the user interface using tools like Figma or Sketch
Code the front-end using HTML, CSS, and JavaScript
Test the project for bugs and usability
Deploy the project to a web server or hosting platform
Q16. What is "this" operator?
The 'this' operator refers to the object that is currently executing the code.
The value of 'this' depends on how a function is called.
In a method, 'this' refers to the object that owns the method.
In a regular function, 'this' refers to the global object (window in a browser).
In an event handler, 'this' refers to the element that received the event.
The value of 'this' can be explicitly set using call(), apply(), or bind() methods.
Q17. How to centre 3 div vertically and horizontally using css
To center 3 divs vertically and horizontally, use flexbox and align-items/justify-content properties.
Wrap the 3 divs in a parent container
Set the parent container's display property to flex
Set the parent container's align-items and justify-content properties to center
Q18. what are React lifecycle Method
React lifecycle methods are functions that are called at different stages of a component's life.
Mounting: constructor(), render(), componentDidMount()
Updating: render(), componentDidUpdate()
Unmounting: componentWillUnmount()
Error Handling: componentDidCatch()
Q19. count the number of words in given strings of array using higher order function?
Count the number of words in given strings of array using higher order function.
Use the map function to transform each string into an array of words
Use the reduce function to count the total number of words in all strings
Handle edge cases such as empty strings or strings with leading/trailing spaces
I built a responsive web application for managing tasks and deadlines.
Used HTML, CSS, and JavaScript to create the frontend
Implemented drag and drop functionality for task organization
Integrated a calendar API for deadline tracking
Q21. If we give both id and class to an element which one's style will apply first
The style of the id will apply first before the style of the class.
IDs have higher specificity than classes, so the style of the id will take precedence over the style of the class.
If both id and class have conflicting styles, the style of the id will be applied.
Example: <div id='uniqueId' class='commonClass'>...</div> - the style of 'uniqueId' will be applied.
Q22. What is interceptor and where using and how to add interceptor for only selected requests?
Interceptors are middleware functions that can be used to intercept and modify HTTP requests and responses.
Interceptors can be used in Angular to modify requests before they are sent to the server or responses before they are delivered to the application.
To add an interceptor for only selected requests, you can create a custom interceptor class that implements the HttpInterceptor interface and then provide it in the HTTP_INTERCEPTORS multi-provider array.
You can then use cond...read more
Q23. Fetch the API with proper error handling and async await?
To fetch an API with proper error handling and async await, use try-catch block and await keyword.
Use the fetch() function to make the API request.
Wrap the fetch() call in a try-catch block to handle errors.
Use the await keyword before the fetch() call to wait for the response.
Check the response status code to handle different scenarios.
Handle any errors or exceptions that may occur during the API request.
Q24. In html span is a tag or not
Yes, span is a tag in HTML used to apply styles to inline elements.
Span is an inline element used to apply styles to a specific section of text or content.
It does not add any extra space or line breaks.
Example: <span style='color: red;'>This text will be red</span>
Q25. what is the full form of WWW?
World Wide Web
Stands for World Wide Web
A system of interlinked hypertext documents accessed via the Internet
Commonly used to browse websites and access information
Q26. without media query how to make responsive a website
Using flexible units like percentages and viewport units, along with fluid layouts and max-width properties.
Use percentages for widths instead of fixed pixels
Use viewport units like vw and vh for font sizes and container dimensions
Implement fluid layouts that adjust based on screen size
Set max-width properties to prevent content from becoming too wide on larger screens
Q27. why is the mobile number 10 digits?
Mobile numbers are typically 10 digits long to ensure uniqueness and standardization for easy identification and communication.
Standardization: Having a fixed length of 10 digits makes it easier for systems to validate and process mobile numbers.
Uniqueness: With 10 digits, there are a large number of possible combinations, reducing the likelihood of duplicate numbers.
International compatibility: Many countries have adopted 10-digit mobile numbers as a standard format for easy...read more
Q28. what is the difference between padding and spacing
Padding is the space inside an element, while spacing is the space around an element.
Padding is the space inside an element, between the content and the border.
Spacing refers to the space around an element, including margins and borders.
Padding can be adjusted using CSS properties like padding-top, padding-bottom, etc.
Spacing can be adjusted using CSS properties like margin-top, margin-bottom, etc.
Q29. Introduce yourself, write sql query to list out employees above age of 23
Experienced front end developer with SQL skills. SQL query to list employees above age 23.
Use SELECT statement to retrieve data from employees table
Use WHERE clause to filter employees above age 23
Example: SELECT * FROM employees WHERE age > 23;
Q30. What is Components in React?
Components in React are reusable, independent pieces of code that manage their own state and can be composed together to build complex user interfaces.
Components are the building blocks of React applications
They can be class components or functional components
Components can have their own state and lifecycle methods
Components can be reused throughout the application
Example:
, ,
Q31. Why React is reusable?
React is reusable because it allows developers to create components that can be easily reused throughout an application.
React components can be easily reused in different parts of an application, saving time and effort.
Components can be composed together to build complex UIs, promoting reusability.
React's virtual DOM efficiently updates only the components that have changed, improving performance and reusability.
Q32. how to center an item without flex and grid
To center an item without flex and grid, use text-align center for inline elements and margin auto for block elements.
For inline elements, use text-align: center on the parent element
For block elements, use margin: 0 auto on the element you want to center
For inline-block elements, set text-align: center on the parent and display: inline-block on the child
Q33. What is the use of this keyword?
The 'this' keyword refers to the current object and is used to access its properties and methods.
Used to refer to the current object in a method or constructor
Can be used to call another constructor in the same class
Can be used to call a method of the same object
Can be used to call a method of a parent object
Can be used to bind a function to a specific object
Q34. How to pass data between component in angular
Data can be passed between components in Angular using input properties, output properties, services, and state management libraries like NgRx.
Use input properties to pass data from parent to child components
Use output properties to emit events from child to parent components
Use services to create a shared data service that can be injected into multiple components
Use state management libraries like NgRx for managing application state and sharing data between components
Q35. Who you can make button disabled on click
You can make a button disabled on click by adding a click event listener and setting the 'disabled' attribute.
Add a click event listener to the button element
Inside the event listener function, set the 'disabled' attribute of the button to true
Q36. 1. What is the background position in CSS? 2. Write a code for nested code for the unordered list?
Background position in CSS is used to specify the starting position of a background image.
Background position can be set using keywords like top, bottom, left, right, center, or using specific pixel or percentage values.
Example: background-position: top right;
Example: background-position: 50% 50%;
Q37. What is event bubbling?
Event bubbling is the process in which an event triggered on a nested element is also triggered on its parent elements.
Events in JavaScript propagate from the innermost element to the outermost element.
During event bubbling, the event is first handled by the innermost element and then propagated to its parent elements.
This allows for event delegation, where a single event handler can be used to handle events on multiple elements.
Event.stopPropagation() can be used to stop the...read more
Q38. Explain about web development to 5 year old child?
Web development is like building a house on the internet where people can visit and do things.
Web development is creating websites and web applications using programming languages like HTML, CSS, and JavaScript.
It involves designing how the website looks and works, and making sure it works well on different devices like computers and phones.
Examples of web development include creating a website for a business, an online store, or a social media platform.
Q39. Javascript typeof() method
The typeof() method in JavaScript returns the data type of a variable or expression.
typeof() returns a string indicating the type of the operand.
It can be used with variables, literals, or expressions.
Common return values include 'number', 'string', 'boolean', 'object', 'function', and 'undefined'.
Q40. What are the version of HTML and CSS ?
HTML has versions like HTML4, HTML5, XHTML. CSS has versions like CSS1, CSS2, CSS3.
HTML versions include HTML4, HTML5, and XHTML
CSS versions include CSS1, CSS2, and CSS3
HTML5 is the latest version with new features like semantic elements and multimedia support
CSS3 introduced new features like animations, transitions, and media queries
Q41. What is the difference between angular and react ?
Angular is a full-fledged framework while React is a library for building UI components.
Angular is a complete solution for building web applications while React is focused on building UI components.
Angular uses two-way data binding while React uses one-way data flow.
Angular has a steeper learning curve while React is easier to learn.
Angular has a larger file size while React has a smaller file size.
Angular has a more opinionated approach while React is more flexible.
Angular h...read more
Q42. Difference between block and inline- block
Block elements take up the full width available, while inline-block elements only take up as much width as necessary.
Block elements start on a new line and take up the full width available (e.g. <div>).
Inline-block elements do not start on a new line and only take up as much width as necessary (e.g. <span>).
Block elements can have margins and padding applied to all four sides, while inline-block elements only have horizontal margins and padding.
Q43. What is the difference between props and state
Props are used to pass data from a parent component to a child component, while state is used to manage data within a component.
Props are read-only and cannot be modified by the child component
State is mutable and can be updated using setState()
Props are passed down from parent to child components
State is managed within a component and can be changed based on user interactions or other events
Q44. what is usememo hook
useMemo is a hook in React that memoizes the result of a function and returns the cached value when the inputs don't change.
useMemo is used to optimize performance by avoiding unnecessary re-renders.
It takes two arguments: a function that returns a value and an array of dependencies.
If any of the dependencies change, the function is re-executed and the new value is cached.
Example: useMemo(() => expensiveFunction(a, b), [a, b])
Useful for expensive calculations or when passing ...read more
Q45. In css box module or components
The CSS box model is a design concept that describes how elements are rendered on a web page.
The box model consists of content, padding, border, and margin.
The content area is where the actual content of the element is displayed.
Padding is the space between the content and the border.
Border is a line that surrounds the padding and content.
Margin is the space outside the border, separating the element from other elements.
The box model allows for precise control over the layout...read more
Q46. Fallback in lazy loading,optimization techniques/for API call
Fallback in lazy loading is important for optimizing API calls to ensure a smooth user experience.
Implementing a loading spinner or placeholder while content is being loaded asynchronously
Using a default value or cached data if the API call fails
Implementing error handling to gracefully handle any issues with the API call
Q47. How You Will Manage The Work Load Pressure
I manage work load pressure by prioritizing tasks, setting realistic deadlines, and taking breaks to avoid burnout.
Prioritize tasks based on deadlines and importance
Break down tasks into smaller, manageable chunks
Set realistic deadlines and communicate with team members if needed
Take short breaks to avoid burnout and maintain productivity
Q48. Where we used async await and promises
Async await is used for handling asynchronous operations in JavaScript. Promises are used for handling asynchronous tasks and managing their results.
Async await is used to handle asynchronous operations in JavaScript by allowing code to wait until a promise is resolved.
Promises are used to handle asynchronous tasks and manage their results by providing a way to handle success and failure.
Async await can be used with promises to make asynchronous code more readable and easier ...read more
Q49. create hide and show kinda features
Use CSS and JavaScript to create hide and show functionality on elements.
Use CSS display property to hide and show elements
Toggle classes with JavaScript to control visibility
Utilize event listeners to trigger hide and show actions
Q50. what is a promise? in javascript
A promise in JavaScript represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
Promises are objects that represent the eventual completion (or failure) of an asynchronous operation.
They can be in one of three states: pending, fulfilled, or rejected.
Promises can be chained using .then() to handle success and failure.
Example: new Promise((resolve, reject) => { ... }).then(result => { ... }).catch(error => { ... });
Interview Questions of Similar Designations
Top Interview Questions for Front end Developer Related Skills
Interview experiences of popular companies
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
Reviews
Interviews
Salaries
Users/Month