Recently I gave an interview at Zepto for front end developer role and Interviewer asked me questions related to coding, an In-depth discussion on core javascript concepts, and then a question related to React and optimizations. So Let's discuss the questions here.

1.) Implement a generic compare function in javascript to compare two values and values can be nested objects, arrays, strings, and can be a mix of all data types.

I implemented it with recursion and you need to handle all edge cases carefully including error handling. and I was able to implement this (though missed a few edge cases that time)

// compare two objects
function compare(a, b) {
  if (
    (typeof a == "object" && !Array.isArray(b) && typeof b == "object") ||
    (typeof b == "object" && !Array.isArray(a) && typeof a == "object")
  ) {
    console.log("inside compare", a, b);
    let alen = Object.keys(a);
    let blen = Object.keys(b);
    if (alen.length !== blen.length) return false;
    for (let i = 0; i < alen.length; i++) {
      let key = alen[i];
      if (!b[key]) return false;
      if (!compare(a[key], b[key])) return false;
    }
    return true;
  } else {
    console.log("inside else", a, b);
    if (Array.isArray(a) && Array.isArray(b)) {
      if (a.length !== b.length) return false;
      for (let i = 0; i < a.length; i++) {
        if (!compare(a[i], b[i])) return false;
      }
      return true;
    }
    return a === b;
  }
}
let a = {
  "object": [1, 2, 3, 4, 5, {
    "inside": [1, 2, 3, 4, 5],
  }, "23234", "23423", undefined],
  "string": 'stringe',
  [123.67]: [[],[],[undefined]]
}
let b = {
  "object": [1, 2, 3, 4, 5, {
    "inside": [1, 2, 3, 4, 5],
  }, "23234", "23423", undefined],
  "string": 'stringe',
  [123.67]: [[],[],[null]]
};
console.log(compare(a, b));

then She asked me questions on JavaScript core concepts and some on React, Redux, and NextJS. So the questions asked were:

1. debounce and throttling - given events occurring at certain time intervals and time out provided, Need to tell how many events will trigger in a given time duration.

2. How to improve the Front end application performance? need to explain what tools and techniques we can use for this purpose.

3. Hoisting and closure, Execution context

4. How to implement memoization in JavaScript

5. let vs var vs const variables, are they hoisted? What is Temopraral dead zone(TDZ).

6. JS is single threaded but how it handles the async operations?? Event loop

7. How to handle multiple async tasks and Their error handling? use Promise.allSettled.

8. Why choose to React for the Front end? Life cycle methods and order of execution?

9. useCallback vs useMemo?

10. Implement a custom react hook which will always return the previous value -
    you can use the useRef hook for this purpose- due to the async nature of react state, the prev ref will be updated before the next render cycle and It will return the previously stored reference.

const usePrevious = (state) => {
  const prev = useRef();
  useEffect(() => {
    prev.current = state;
    // can use the above line in clean up function also,
  }, [state]);
  return prev;
};

I cleared the interview but I didn't go forward with the offer because I was not willing to relocate to Bangalore and they weren't providing any remote opportunities.

if you learned something from this blog, Share it with others, and Reach out to me if you need an organized and planned roadmap to crack front-end interviews.