Cars24 SDE-2 Frontend Interview Experience

Overview

This document outlines a candidate's experience during a frontend SDE-2 interview at Cars24. The interview process was structured into multiple rounds, assessing the candidate's technical skills, problem-solving abilities, and understanding of frontend development principles.

Interview Rounds

The interview process consisted of three rounds:

Round 1: Technical Interview

This round focused on core JavaScript concepts and problem-solving skills. The candidate was asked the following questions:

Closure: The candidate was questioned on JavaScript closures, providing an explanation and code example:

function closure() {
    let count = 0;
    return function test() {
        count++;
        return count;
    }
}

const closuredTest = closure();

console.log(closuredTest());
console.log(closuredTest());
console.log(closuredTest());

Currying: The candidate was asked to explain currying and create a curried version of the given function:

function sum(a, b, c){ return a + b + c; }
function curry(fn){
  return function curriedFn(...params){
    if(params.length >= fn.length){
      return fn(...params);
    }
    else{
      return function(...next){
        return curriedFn(...params,...next);
      }
    }
  }
}

let curriedSum = curry(sum);

console.log(curriedSum(1, 2, 3));
console.log(curriedSum(1)(2,3));
console.log(curriedSum(1)(2)(3));

Task Queue & Event Loop: The candidate explained the concepts of the Task Queue and Event Loop, supplementing the explanation with the following code snippet:

console.log('start');

setTimeout(() => {
    console.log('mid');
}, 0);

for (let i = 0; i < 100000; i++) {
    console.log('thread blocking code');
}
console.log('end');

Output-Based Question: The candidate was presented with an output-based question involving async/await and Promises:

async function async1() {
    console.log("async1 start");
    const data = await async2();
    console.log(data);
    console.log("async1 end");
}

async function async2() {
    console.log("async2");
    return "async2 completed";
}

console.log("script start");

setTimeout(function () {
    console.log("setTimeout");
}, 0);

async1();

new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("promise2");
});

console.log("script end");

this Keyword: The candidate explained the this keyword and methods to forcefully change its context, providing code examples using call, apply, and bind:

let obj = {
    name: 'prikshit',
    myName(city, birthPlace) {
        console.log(this.name + ' i live in ' + city + ' my birthplace is ' + birthPlace);
    }
}

let obj2 = {
    name: 'sohail',
}

// obj.myName.call(obj2,'blr');
// obj.myName.apply(obj2,['blr']);

const bindedFn = obj.myName.bind(obj2);

bindedFn('blr', 'delhi');

obj.myName(); // this keyword here is obj

Round 2: Machine Coding

This round involved two coding challenges:

Custom Hook for Online/Offline Status: The candidate was tasked with creating a custom React hook to detect and display the online/offline status of the user.
Grid Lights: The candidate was challenged to implement a grid lights problem.

Round 3: Techno-Managerial Round

In this round, the interviewer asked the candidate to design and describe the implementation of an e-commerce filter component.

Key Takeaways