Whatfix Lead Front End Developer Interview Questions and Answers

Q1. Polyfill for bind Closures Call apply bind let const var lexical environment scope output questions
Add your answer

Q1. Create a pagination
Ans. 
Pagination component to display a list of items with page navigation.
• Create a Pagination component with props for total number of items, items per page, and current page.

• Calculate total number of pages based on total items and items per page.

• Display page numbers with previous and next buttons to navigate through pages.

• Update the list of items displayed based on current page.

• Handle click events on page numbers and previ
Answered by AI
Add your answer

Q1. Write a polyfill of JS promise
Ans. 
A polyfill for JS promise is a piece of code that provides support for promises in older browsers.
• Create a Promise class with resolve, reject, then, and catch methods

• Implement the executor function to handle the asynchronous operation

• Use setTimeout to simulate asynchronous behavior

• Handle chaining of then and catch methods
Answered by AI
Add your answer

Aptitude is generally ask some MCQ choice questions like time, speed, distance etc

Front end developer have some knowledge in HTML CSS javascript php so ask this language

GD is nothing but it's testing our community and quality of thought in your opinion

Q1. What is denbouncer and throttle
Ans. 
Debouncer and throttle are techniques used to limit the frequency of function calls.
• Debouncing delays the execution of a function until a certain amount of time has passed without the function being called again.

• Throttling limits the frequency of function calls to a certain rate, executing the function at fixed intervals.

• Debouncing is useful for events that may be triggered multiple times in quick succession, such as r...read more
Answered by AI
View 1 more answer
Q2. What is curry function
Ans. 
Currying is a technique of transforming a function that takes multiple arguments into a sequence of functions that each take a single argument.
• Currying allows partial application of a function

• It helps in creating reusable functions

• Curried functions are easier to compose and chain

• Example: const add = (a) => (b) => a + b; add(2)(3) returns 5
Answered by AI
Add your answer
Q3. Implement curry function
Ans. 
Curry function is a higher-order function that allows partial application of arguments.
• Currying transforms a function that takes multiple arguments into a series of functions that take one argument each.

• It returns a new function until all the arguments are received and then executes the original function.

• Example: const add = (a, b) => a + b; const curriedAdd = curry(add); curriedAdd(2)(3) returns 5.
Answered by AI
Add your answer
Q4. What is promise.all()
Ans. 
promise.all() is a method that takes an array of promises and returns a new promise that resolves when all promises in the array have resolved.
• It is used to handle multiple asynchronous operations simultaneously.

• If any of the promises in the array rejects, the returned promise will be rejected with the reason of the first rejected promise.

• The resolved values of the promises are returned as an array in the same order as
Answered by AI
View 1 more answer
Q5. What is memoization?
Ans. 
Memoization is a technique of caching the results of a function to improve performance.
• Memoization is used to avoid redundant calculations by storing the results of a function and returning the cached result when the same inputs occur again.

• It is commonly used in recursive functions and functions with expensive computations.

• Memoization can be implemented manually or by using libraries like Lodash or Memoizee.

• Example: M...read more
Answered by AI
Add your answer
Q6. What is closure in javascript
Ans. 
Closure is a function that has access to its parent scope even after the parent function has returned.
• Closure allows for private variables and functions in JavaScript.

• It is created when a function returns another function.

• The inner function has access to the outer function's variables and parameters.

• Example: function outer() { let x = 10; return function inner() { console.log(x); } }

• The inner function can access and mo...read more
Answered by AI
Add your answer
Q7. What is the problem with colosures
Ans. 
Closures can cause memory leaks if not handled properly.
• Closures can hold references to variables outside of their scope, preventing them from being garbage collected.

• If closures are used excessively or not released properly, they can cause memory leaks.

• To avoid memory leaks, make sure to release closures when they are no longer needed.
Answered by AI
Add your answer
Q8. Some output questions on SetTimeout to check closure knowledge
Add your answer
Q9. React lifecycle events
Add your answer
Q10. Major difference between class based components and class based components
Ans. 
There is no difference between class based components and class based components.
• There seems to be a typo in the question.

• Assuming the question is about functional components vs class components, the major difference is that class components use a class to define the component while functional components are defined as functions.

• Class components have access to lifecycle methods while functional components do not.

• Functi...read more
Answered by AI
View 3 more answers
Q11. Shallow copy vs deep copy
Ans. 
Shallow copy only copies the reference to an object while deep copy creates a new object with a new memory address.
• Shallow copy is faster and uses less memory than deep copy.

• In shallow copy, changes made to the original object will reflect in the copied object as well.

• Deep copy creates a completely new object with its own memory space.

• In JavaScript, arrays and objects are assigned by reference, so a shallow copy will o...read more
Answered by AI
Add your answer
Q12. How to do deep copy ?
Ans. 
Deep copy creates a new object with the same values as the original object.
• Use Object.assign() method to create a deep copy of an object.

• For nested objects, use recursion to copy all levels.

• For arrays, use slice() method to create a new array with the same values.

• Avoid using spread operator for deep copy as it only creates a shallow copy.
Answered by AI
Add your answer
Q13. What is hoisting? Some questions on it
Add your answer

Q1. Max sum path in tree
Ans. 
Find the maximum sum path in a tree from root to leaf node.
• Start from the root node and traverse down to leaf nodes, keeping track of the sum at each node.

• At each node, compare the sum of the current path with the maximum sum found so far.

• Choose the path with the maximum sum as the final result.
Answered by AI
Add your answer
Q2. Array 2 sum problem
Add your answer

Q1. React: Create a Timer
Ans. 
Create a simple timer using React
• Use state to store the timer value

• Use setInterval to update the timer every second

• Display the timer value in the component's render method
Answered by AI
Add your answer
Q2. Javascript: implement Debounce
Add your answer

Q1. What do you know about the company + common behaviour question
Add your answer
Q2. About roles in previous org
Add your answer

Round duration - 60 Minutes
Round difficulty - Medium

Mostly focused on Data Structure & Algorithm

Q1. Rotate Linked List
You have been given a Linked List having ‘N’ nodes and an integer ‘K’. You have to rotate the Linked List by ‘K’ positions in a clockwise direction.
Example :
 Given Linked List : 1 2...read more
Ans. Brute Force
Find the length of the Linked List to check whether the ‘K’ is greater than the Length of the Linked List or not. Take a modulo of ‘K’ with its length if it is greater than the length. Reach the (‘K’+1)th node from last and change the pointers of nodes to get a rotated Linked List.
 
Here is the algorithm:
 
1. Base Condition : If ‘HEAD’ is equal to ‘NULL’ or ‘K’ is equal to 0, then return ‘HEAD’ of the L...read more
Answered Anonymously
Add your answer
Q2. Reverse the order of words in a string
You are given a string ‘STR’ containing space-separated words. A word is a sequence of non-space characters. Your task is to reverse the order of words in ‘STR’.
No...read more
Ans. Convert to an array of words
Use an array ‘ARR’ to store the words in ‘STR’. Traverse the string ‘STR’ and append each word at the end of ‘ARR’. Use the string ‘RES’ to store the answer. Traverse the array ‘ARR’ in reverse and append the words in ‘ARR’ to ‘RES’ followed by a whitespace character.
 
• Create an empty array of string ‘ARR’.
• Initialize an empty string ‘CUR_STR’. Use it to store a single word from ‘STR’.
• Run...read more
Answered Anonymously
Add your answer

Round duration - 50 Minutes
Round difficulty - Medium

JavaScript core concepts with some examples and problem discussion

Round duration - 30 Minutes
Round difficulty - Easy