Software Engineer

Code 1 - Outputs 2 and 12. Since, even though let variables are not hoisted, due to the async nature of javascript, the complete function code runs before the setTimeout function. Therefore, it has access to both x and y.
Code 2 - Outputs 3, three times since the variable declared with the var keyword does not have block scope. Also, inside the for loop, the variable i is incremented first and then checked.
Code 3 - Output in the following order:
2
4
3
1 // After two seconds

Output is NaN.

random() function has functional scope since x is declared and hoisted in the functional scope.

inserting new components dynamically 

function addNode () { var newP = document. createElement("p"); 
var textNode = document.createTextNode(" This is other node"); 
newP.appendChild(textNode); document.getElementById("parent1").appendChild(newP); } 


firstP 
 

const findVowels = str => {
let count = 0
const vowels = ['a', 'e', 'i', 'o', 'u']
for(let char of str.toLowerCase()) {
if(vowels.includes(char)) {
count++
}
}
return count
}

Using useMemo( ) -
It is a React hook that is used for caching CPU-Expensive functions.
Sometimes in a React app, a CPU-Expensive function gets called repeatedly due to re-renders of a component, which can lead to slow rendering.
useMemo( ) hook can be used to cache such functions. By using useMemo( ), the CPU-Expensive function gets called only when it is needed.
Using React.PureComponent -
It is a base component class that checks the state and props of a component to know whether the component should be updated.
Instead of using the simple React.Component, we can use React.PureComponent to reduce the re-renders of a component unnecessarily.
Maintaining State Colocation -
This is a process of moving the state as close to where you need it as possible.
Sometimes in React app, we have a lot of unnecessary states inside the parent component which makes the code less readable and harder to maintain. Not to forget, having many states inside a single component leads to unnecessary re-renders for the component.
It is better to shift states which are less valuable to the parent component, to a separate component.
Lazy Loading -
It is a technique used to reduce the load time of a React app. Lazy loading helps reduce the risk of web app performance to a minimum.

It is up to the developer's decision, i.e., it is developer's job to determine what kinds of state make up your application, and where each piece of state should live. Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state.

Below are the thumb rules to determine what kind of data should be put into Redux

Do other parts of the application care about this data?
Do you need to be able to create further derived data based on this original data?
Is the same data being used to drive multiple components?
Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
Do you want to cache the data (i.e, use what's in state if it's already there instead of re-requesting it)?

Tip 1: Focus on describing a problem that was related to your work using the STAR approach.
Tip 2: Do not answer negatively or bad-mouth any supervisor or any company.
Tip 3:Focus on the learnings of the problem rather than dwelling too much on the damage.