There are various types of questions asked a lot in an interview based on which how to approach the answer will stand you out from the crowd.
So there are 3 types of questions asked in an interview
Type 1: Comparison
Why X over Y?
Compare X and Y
Advantages and disadvantages of X
Type 2: How to
How can you do X?
How to overcome issue X?
Type 3: Generic answer
What is X?
Explain X.
Let's start with the Question
1. Need for it
To make accessing dom elements and using its properties and methods directly easier (eg: to control focus on an input field based on a button click)
To create values that persist between re-renders but updating it shouldn't trigger a re-render (for example to store previous state value to compare it with the latest value for taking actions in a functional component)
What is it?
useRef is a hook used to create a reference to an HTML element or to a value that persists across component renders.
How is it used?
Store value/reference returned from using the useRef hook in a variable. We can set an initial value also if needed
To set the reference on a DOM element, set the "ref" attribute to the useRef reference
To access the DOM element or the value stored, we use the .current property
2. What is a prototype in JavaScript?
2. Need of it:
Prototypes in JavaScript solve the problem of code reuse and inheritance by providing a way to share properties and methods between objects.
What it is:
Prototypes allow to implementation of inheritance in JavaScript and create complex object hierarchies.
Every object in JavaScript has a prototype property, which can be used to define properties and methods that are shared between objects.
How it is used :
To define a prototype, add properties and methods to the prototype property of a constructor function.
To create a new object from a prototype, use the new keyword and call the constructor function.
To check if an object has a specific property, use the hasOwnProperty() method to check if the property is defined on the object itself or on its prototype chain.
To create a prototype chain, set the prototype of one object to another object using the Object.create() method.
3. What is Hoisting( vanilla JS concept) ?
3. Need of it:
Allows you to use variables and functions before they are declared in your code. This way we can hide function implementation farther down in the file and let the reader focus on what the code is doing.
What is it?
JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, before execution of the code.
The JS code interpretation performed in two passes
- During the first pass, the interpreter processes variable and function declarations.
- The second pass is the actual code execution step. The interpreter processes function expressions and undeclared variables.
Thus, we can use the "hoisting" concept to describe such behavior.
How is it used?
JavaScript hoisting occurs during the creation phase of the execution context that moves the variable and function declarations to the top of the script.
The JavaScript engine hoists variables declared with var or functions declared with normal functional declaration syntax (function fnName(){}).
The JavaScript engine doesn’t hoist variables that are declared with let/const or functions defined with the function expressions and arrow functions, instead, you get “Uncaught ReferenceError: <function-name> not defined”.