🚀 React Interview Experience (August 2025): Airtel (Part- 1)

Overview

This document outlines a React developer interview experience, providing insights into the types of questions asked and expected solutions. The interview focused on core JavaScript concepts, React component creation, and problem-solving abilities. This serves as a guide for developers preparing for frontend interviews.

Interview Rounds

The interview process included questions covering various aspects of JavaScript and React. Below are some of the key questions and their solutions:

Q1: Implement a flipping card component in React.

The candidate was asked to create a React component that displays a card with a front and back side, flipping on click to reveal different content. The provided solution uses React's useState hook to manage the flipped state and CSS transitions for the flipping animation.

import { useState } from "react";
import "./styles.css";

const Card = () => {
  const [flipped, setFlipped] = useState(false);

  const handleFlip = () => {
    setFlipped(!flipped);
  };

  return (
    <div className={`card ${flipped ? "flipped" : ""}`} onClick={handleFlip}>
      <div className="card-inner">
        <div className="card-front">
          <h2>Card Title</h2>
          <p>Click to see offer!</p>
        </div>
        <div className="card-back">
          <h2>Special Offer</h2>
          <p>Get 50% off!</p>
        </div>
      </div>
    </div>
  );
};

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        height: "100vh",
        backgroundColor: "#f8f9fa",
      }}
    >
      <Card />
    </div>
  );
}

// styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.card {
  width: 200px;
  height: 200px;
  cursor: pointer;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  border: 1px solid black;
  border-radius: 20px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: rgb(3, 3, 3);
}

.card-front {
  background-color: rgb(228, 203, 173);
}

.card-back {
  background-color: rgb(241, 174, 74);
  transform: rotateY(180deg);
}

Q2: Write polyfills for reduce.

The candidate was asked to implement a polyfill for the Array.prototype.reduce method. The provided solution checks if the method already exists and, if not, defines a custom implementation.

// Polyfill for Array.prototype.reduce
if (!Array.prototype.myReduce) {
  Array.prototype.myReduce = function (callback, initialValue) {
    // Check if 'this' is null or undefined
    if (this == null) {
      throw new TypeError("Array.prototype.reduce called on null or undefined");
    }

    // Check if callback is a function
    if (typeof callback !== "function") {
      throw new TypeError(callback + " is not a function");
    }

    const arr = Object(this);
    const len = arr.length >>> 0; // Ensure length is a positive integer

    let accumulator;
    let startIndex = 0;

    // If initialValue is provided, use it as accumulator
    if (arguments.length > 1) {
      accumulator = initialValue;
    } else {
      // If array is empty and no initial value, throw error
      if (len === 0) {
        throw new TypeError("Reduce of empty array with no initial value");
      }
      // Take the first element as initial accumulator
      accumulator = arr[0];
      startIndex = 1;
    }

    // Loop through the array
    for (let i = startIndex; i < len; i++) {
      if (i in arr) {
        accumulator = callback(accumulator, arr[i], i, arr);
      }
    }

    return accumulator;
  };
}

Q3: What will be the order of execution?

The candidate was presented with a code snippet involving setTimeout and asked to determine the order of execution. The interviewer assessed understanding of the event loop and asynchronous JavaScript.

let a = 10;
console.log(a);
setTimeOut(()=>{console.log('hello')},2000);
console.log('Hello 2');
setTimeOut(()=>{console.log('hello 3')},0);

Output: 10 → Hello 2 → hello 3 → hello

Q4: What will be the output?

The candidate was tested on their understanding of shallow copies and reference types in JavaScript.

const obj1 = { name: ["A"] };
const obj2 = { ...obj1 };
obj2.name[0] = "B";
console.log(obj1.name[0], obj2.name[0]);

Output: B B

Q5: What will be the output?

This question explored the difference between shallow copying primitive values versus reference types.

const obj1 = { name: "A" };
const obj2 = { ...obj1 };
obj2.name = "B";
console.log(obj1.name, obj2.name);

Output: A B

Q6: What will be the output?

This question assessed the candidate's knowledge of the typeof operator and its return values.

console.log(typeof(typeof(1)));

Output: "string"

Q7: What will be the output?

This question tests the candidate's understanding of var scoping and asynchronous behavior.

for (var index = 0; index < 10; index++) {
 setTimeout(() => {
     console.log(index);
 }, 1000);   
}

Output:

10
10
10
10
10
10
10
10
10
10

Q8: What will be the output?

This question assessed understanding of let scoping and asynchronous operations.

for(let i =0; i <= 10; i++) {
setTimeout(() => console.log(i), i * 1000)
}

Output:

0  (after 0s)
1  (after 1s)
2  (after 2s)
3  (after 3s)
4  (after 4s)
5  (after 5s)
6  (after 6s)
7  (after 7s)
8  (after 8s)
9  (after 9s)
10 (after 10s)

Q9: What will be the output?

This question tests the candidate's knowledge of Immediately Invoked Function Expressions (IIFEs) and closures.

for(var i =0; i <= 10; i++) {
(function(i){
setTimeout(() => console.log(i), i * 1000)
})(i);

Output:

0  (after 0s)
1  (after 1s)
2  (after 2s)
3  (after 3s)
4  (after 4s)
5  (after 5s)
6  (after 6s)
7  (after 7s)
8  (after 8s)
9  (after 9s)
10 (after 10s)

Q10: Flatten this array

The candidate was asked to flatten a nested array. Two solutions were provided: one using recursion and the other using the flat method.

const arr = [1, 2, [3, 4, [5, 6, [7, [8, 9, 10]]]]];

function flattenArray(input) {
  let result = [];
  for (let item of input) {
    if (Array.isArray(item)) {
      result = result.concat(flattenArray(item));
    } else {
      result.push(item);
    }
  }
  return result;
}

console.log(flattenArray(arr));
// Output: [1,2,3,4,5,6,7,8,9,10]

const arr = [1, 2, [3, 4, [5, 6, [7, [8, 9, 10]]]]];
const flattened = arr.flat(Infinity);
console.log(flattened);
// Output: [1,2,3,4,5,6,7,8,9,10]

Key Takeaways

• A strong understanding of core JavaScript concepts like closures, scope (var vs let), and the event loop is crucial.
• Familiarity with React fundamentals, including component creation, state management (useState), and event handling, is essential.
• Knowledge of array manipulation techniques, such as flattening nested arrays, is beneficial.
• Understanding of shallow vs deep copies and their implications in JavaScript is important.
• Being able to write polyfills demonstrates a deep understanding of the language and its features.