All the interview questions asked in front end interviews.

Javascript:

  • What are closures. can you explain where closures are helpful in javascript
  • look at the following code and check whether anything wrong in this code. 
function isSomethisWrong() {
    let arrayList = new Array(1000000).fill("*");

    return function xyz() {
        console.log('closure funciton ')
    }
}

const somethingWentWrong = isSomethisWrong();
  • Web Services
  • Input validation
  • Make an array empty
  • Array methods
  • String methods
  • Number methods
  • Date methods
  • Array.sort
  • Asynchronous awaits
  • Promises
  • Es5 and Es6
  • Let const var
  • Scope
  • closure in JS
  • Variable Hoisting , function Hoisting, arrow functions,
  • Call, apply and bind
  • Convert date
  • Window methods
  • Document methods
  • Exponential in ES6
  • Event bubbling
  • Event capturing
  • Stop propagation
  • Stop immediate propagation
  • Type conversion
  • Math methods
  • Session storage and local storage and cookies
  • async await
  • Promises
  • Prototype chaining
  • Prototype
  • Callbacks
  • Callback hell

  • What are closures

  • What are event propogations, how to avoid it
    q. Diff between stopPropogation and stopImmediatePropogation

  • What is the diff between array and array Map
    q. Why should we use ArrayMap instead of an object

  • Why do we need to use forin and for each and when to use them instead of for loop

  • What is currying and why should I use it.

  • Difference between Array.prototype and __.prototype

  • What are premitive and non primitive data types

  • a. Why are they called primitive

  • What are constructors in javasceipt

  • a. How do you implement a constructor

  • We want to print a content of normal array, what loops will you use and why

  • When to for each, for in , for of and map looping ways

  • What are rest and spread operators

  • a. First array has simple numbers, If I create a second array using spread of first array. Is it shallow copy or deep copy? And why

  • What are promise Chains in javascript

  • input array is [1,2,3,4,5] , need output of 1,3,6,10,15

  • What is debouncing.

  • What is the diff between array and array Map Why should we use ArrayMap instead of an object

  • Why do we need to use forin and for each and when to use them instead of for loop

  • Difference between Array.prototype and __.prototype

function hoist() {
  let x = 100;
  if (true) {
    var x = 300;
  }
  console.log(x);
}
hoist();

What is the output of the following code snippet

function func2(){
  for(let i = 0; i < 3; i++){
    setTimeout(()=> console.log(i),2000);
} 
}

What should we modify if we want to print 1,2,3

what should be output of the following code snippet

const name = "sai";
age = 25
console.log(delete name)
console.log(delete age)

Modify the value of x in below snippet so that hello will be printed ( hint: x will be an object )

let x;


if(x==1 && x==2 && x==3){
  console.log("Hello");
}

TypeScript:

  • which file should we touch to modify settings of typescript
  • what can we modify in tsconfig file
  • How typescript help us?

HTML

  • HTML form input elements
  • Semantics HTML elements
  • Block , inline block , inline difference
  • what is the difference between div and section
  • Given an HTML , how to modify style of a particular element using pure javascripta) and by any chance modify the second text of the content.

CSS:

  • Different types of position
  • Explain position absolute vs relative
  • What is media query
  • Margin: 0 auto
  • Pseudo classes
  • Links modifications link ,visited,over,active
  • Box modal
  • Padding negative not able to give
  • how to remove sharp corner
  • Css3 different
  • Less and sass
  • Center align a div in HTML
  • Pre tag to give proper space
  • What are pseudo classes / pseudo elements
  • How does flexbox and grid help us
  • How we implement responsive ness in css
  • Any idea of tailwind css
  • what are mixins in css. how to use it

GIT:

  • how do you create a PR
  • what are the best practices you in your day to day work activities

  • What is the difference between git pull and git fetch
    a) Doesn't git pull takes the latest changes on parent branch? then

  • what is the need of taking git fetch

Rest APIs

  • What are the Rest API implementations you have done
  • How do you implement REST API integration in react application
  • Difference between axios and fetch
  • How do you cancel the ongoing request
  • How do you make multiple API request at a time
  • How do you make repeated API request
  • How do you implement real time data handling like fetching stocks related real time data
  • interceptor
  • How to implement geting freqeunt changes to the front end

React JS:

  • Have you worked on react grids.
  • What are the REST API implementations you have done
  • There are thousands of records with nested data. How do you implement displaying the data in react grid with less loading time
  • Have you used Implementing Suspense

  • How do you implement error boundaries in React

  • What is useEffect Hook and what will happen
    a ) if you dont pass any dependency list
    b) if you pass empty dependency list
    c) If you pass any dependencies

  • If you face any issues in data fetching using any API, How do you convey the same to the user in a smooth way.

  • what are session based authentication and token based authentications and when should we choose them.

  • Can we use POST insted of PUT to update any data.

  • How do you do debugging in react

  • what are state and props

  • what are hooks

  • Server side rendering in react

  • how to update state in react

  • what is context in react

  • How do you implement error boundaries

  • Have you implemented suspense in react

  • What are session based authentication and token based authentications

  • Router

  • Controlled router

  • In what scenarios components will re render

  • What is a synthetic event in react

  • Browser cache and application cache

  • React service handlers

  • What are controlled and uncontrolled components

  • How do you pass data from parent to child

  • What will happen if you pass any function handlers from parent to child

  • What are error boundaries
    a. How do you implement them

  • How to implement life cycle methods in functional components

  • For memorising props what key word should we use3. For memorising function handlers

  • There are huge records and how would you implement to show only few records at a time and fetch remaining records on scroll. a) event throttling. The concept is event throttling. How would you implement.

  • what are custom hooks, what is the necessity of creating a custom hook

  • what are the differences between useEffect , useMemo and useCallback

  • what is architecture of react? have you heard of FLUX?

  • how do you handle errors while performing APIs in your application?

  • what are different routing patterns

  • How does useContext works
    What are the life cycle methods of class based components

  • Implement a star rating implementation

  • what are the different ways to handle asynchronous operations

  • if you want to develop an application, what would you keep in mind while developing

  • what are the design patters we follow in developing application

  • how will you analyse whether any application has broken

  • How would you implement an error boundary . if the same can be implemented by a loader, why should we go for error boundary
    React DOM

  • When should we use functional components and when should we use class based components

  • what are the differences between functional and class based components

  • when should we use ref

  • React.comp nd react.purecomp

  • React service handlers

  • Is React an imperative or declarative framework.

  • What is difference between React Element and React Component

  • How do you write a custom React Element

  • How to implement Protected routes in React JS.

  • What are memory leaks in React JS

What is the output of the following jsx.

let user = {
  name: "React",
  version: "16"
}
function App(){
    return {user.name && `Welcome ${user.name}` && 'Hello' };
}

Redux

  • What is Redux
  • Principles of Redux
  • Explain Redux flow
  • how can we write lifecycle methods in react
  • context vs redux
  • why cant we use context instead of redux

Redux saga

  • What is redux thunk
  • What is redux saga
  • where does middle ware fits in state management
  • what will happen if we don't use middleware

Useful Resources

https://github.com/sudheerj/javascript-interview-questions

https://github.com/cheatsheet1999/FrontEndCollection?tab=readme-ov-file

https://learnersbucket.com/

https://javascript.plainenglish.io/front-end-system-design-guide-9a11381f5e81

https://www.patterns.dev/