Frontend Engineer

function foo() {
   const arr = [];
   arr.push({ bar: 1 });
   return {
       arr: [1], 
       getArr: () => {
           return this.arr;  // `this` may not behave as expected
       },
       updateArr: (value) => {
           this.arr.push(value);  // Issue with `this` context
       }
   };
}

const obj = foo();
console.log(obj.getArr());  // Unintended result due to incorrect `this` binding
obj.updateArr(2);
console.log(obj.arr);

Additionally, conceptual questions on closures were asked, including practical implementations like function currying.
Example-> sum(1)(2)(3) write a function sum which return sum as 6

What is function currying? Write a function sum(1)(2)(3) that returns the sum as 6 using function currying.

What are promises and async event loops?

Create a UI that does the following:

• The UI should look exactly like the image above, featuring 7 boxes arranged in a C shape.
• When a box is clicked, its colour should change to green.
• When all the boxes are green, they should revert to their previous colour (white) one by one, with a 1-second delay, in the same order in which they were first clicked.

The round with the hiring manager was one of the toughest interviews.

The topics covered included:

• Cookies vs. Local Storage: Their advantages, disadvantages, and appropriate use cases. (Learn)
• Cross-Site Scripting (XSS): How it works and its potential impacts. (Learn)
• Request Validation: How browsers determine whether a request is valid.
• CORS (Cross-Origin Resource Sharing): What it is and when it applies.
• Preflight Requests: What they do and why they are needed.
• Error Handling in React: How to prevent a component crash from affecting the entire page.
• Error Boundary: What is it and how does it help contain errors in React? (Learn)
• Error Element: Its role in error handling and fallback UI rendering.