The top 10 questions asked to me in Front-end mock interview
1 . What is Event in JavaScript?
Answer: Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user clicks a button on a webpage you might want to respond to that action by displaying an information box.
2 . How does Event Handler work in JavaScript?
Answer: Each available event has an event handler, which is a block of code that will be run when the event fires. When any event fires that go into 3 phases:
Capturing phase — the event goes down from the window to the element.
Target phase — the event reached the target element.
Bubbling phase — the event bubbles up from the element to the window object.
3 . What is the meaning of ES6.
Answer: ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript, and version 6 is the next version after version 5, which was released in 2015.
4 . Tell me some new features of ES6 that do not exist before.
Answer: Well there are some mind-blowing features that are new in ES6. Like :
We got a new keyword let and const for variable declaration, that supports block scope.
We got Arrow function which is a nice and shorter way to write function.
We got some extended parameter handling, like default parameter, rest parameter …
We got the ability to Destructuring, now we can extract data from arrays or objects into variables.
We got the class keyword, which is just syntactic sugar for the old prototypal pattern.
Yeah .. there are some more …
5 . What is the difference between the Regular function and Arrow function?
Answer: Well the difference that I would like to mention first is the difference of this value binding.
Arrow function has its own value binding, here regular function has his win this binding.
And there is some other difference like the Arrow function can’t use as a constructor, and the arrow function does not have an argument object too, etc.
6 . Explain Prototype Chaining in JavaScript?
Answer: In JavaScript, every object has a prototype and we also know that the prototype of an object is also an object, thus creating nesting of prototypes.
So, JavaScript uses a similar concept for creating an inheritance by chaining multiple instances to prototypes and creating nested prototypes. I will say the level of nesting prototype as is a Prototype chain.
7 . What is a pure function in functional programming?
Answer: If a function gives the same output for the same input and the function does not create any side effect in the program, then the function can be called a pure function.
8 . Explain the Virtual DOM.
Answer: Virtual DOM is an in-memory representation of Browser DOM. There is also a new virtual DOM is being created when any change happens or when a component gets re-rendered, when any change happens react will not update the Original browser DOM immediately instead it will compare between new virtual DOM with the previous one By its Diffing algorithm to find out the exact change of element object, then the minimal change will be updated in the Browser DOM.
9 . What does the Higher component function return?
Answer: Actually Higher-order component is a function that takes a component as an argument and returns a component at the end before them in the function that could be some modification happen to the input component.
10 . When do we need to use context API?
Answer: When we need to pass props in multiple levels of the component tree in such case we can use Context API, Context API is a way to enable components to share some data without explicitly passing via each component manually. Hence we can go for alternative solutions like Redux or useReducer Hook.