Code Snippet interview questions I faced in my 2026 Interviews || Frontend || React || JavaScript

During JavaScript interviews, you may come across code snippets that look simple at first but test your understanding of how JavaScript works internally.

In my interviews, I encountered a few such snippets covering React optimization, array mutation, Promises, and variable hoisting.

Here are the code snippets, along with the concepts they test.

1. React: Sorting Arrays With and Without a Shallow Copy

This example demonstrates the difference between sorting an array with a shallow copy and sorting the original array directly.

Code

import React, { useMemo, useState } from "react";

const SortedListWithCopy = ({ data }) => {
  console.log("Before sorting WITH copy:", data);

  const sortedList = useMemo(() => {
    console.log("Sorting WITH shallow copy...");
    return [...data].sort((a, b) => a.rank - b.rank);
  }, [data]);

  console.log("After sorting WITH copy:", data);

  return (
    <div style={{ border: "1px solid green", padding: "10px", margin: "10px" }}>
      <h3>With Shallow Copy</h3>
      {sortedList.map((item) => (
        <span key={item.name} style={{ marginRight: "10px" }}>
          {item.name}
        </span>
      ))}
    </div>
  );
};

const SortedListWithoutCopy = ({ data }) => {
  console.log("Before sorting WITHOUT copy:", data);

  const sortedList = useMemo(() => {
    console.log("Sorting WITHOUT shallow copy...");
    return data.sort((a, b) => a.rank - b.rank); // ❌ mutates
  }, [data]);

  console.log("After sorting WITHOUT copy:", data);

  return (
    <div style={{ border: "1px solid red", padding: "10px", margin: "10px" }}>
      <h3>Without Shallow Copy</h3>
      {sortedList.map((item) => (
        <span key={item.name} style={{ marginRight: "10px" }}>
          {item.name}
        </span>
      ))}
    </div>
  );
};

export default function App() {
  const [data, setData] = useState([
    { name: "Apple", rank: 2 },
    { name: "Banana", rank: 1 },
    { name: "Mango", rank: 3 },
  ]);

  return (
    <div style={{ padding: "20px" }}>
      <button
        onClick={() =>
          setData((prev) => [...prev, { name: "Orange", rank: 0 }])
        }
      >
        Add Orange
      </button>

      <SortedListWithCopy data={data} />
      <SortedListWithoutCopy data={data} />

      {data.map((item) => (
        <span key={item.name} style={{ marginRight: "10px" }}>
          {item.name}
        </span>
      ))}
    </div>
  );
}

Key concepts

useMemo

useMemo ensures sorting only runs when data changes (good ✅).

The problem with sort()

Array.prototype.sort() mutates the original array in place. That means:

• You are mutating the data prop (which should be immutable).
• If the parent component reuses data, it might see its array reordered unexpectedly, leading to side effects or bugs.

Why is a shallow copy better?

• [...data] creates a new shallow copy of data.
• sort() mutates only the copy, not the original.
• There are no accidental side effects on the original array.

Further optimizations

• If data is already guaranteed to be stable and sorted in the parent, you might not need useMemo at all.
• If sorting is expensive, useMemo is justified.
• Always clone arrays before sorting or mutating them in React.

2. JavaScript Promises and Async/Await

This snippet tests your understanding of synchronous execution, Promise resolution, and the behavior of await.

Code

var a = new Promise((resolve, reject) => {
  console.log("hello —");
  var d = 5;
  console.log("hello world", d);
  resolve("done");
});

(async function fun() {
  console.log("first");
  const c = await a;
  console.log(c);
  console.log("second");
})();

What to observe

The code creates a Promise and logs messages inside its executor. It then runs an asynchronous function that awaits the Promise and logs the resolved value.

Get Ritambrayadav’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Pay attention to:

• When the Promise executor runs.
• What gets logged before await.
• How await handles the resolved value.
• When the remaining statements inside the asynchronous function execute.

These are important concepts when working with asynchronous JavaScript.

3. JavaScript Hoisting: Accessing Variables Before Declaration

This snippet tests your understanding of var hoisting and the behavior of variables that are assigned without being declared.

Code

function a() {
  console.log(y);
  y = 9;
  console.log(x);
  var x = 10;
  console.log(x);
}

a();
console.log(y);

What to observe

Focus on the following:

• What happens when y is accessed before it is assigned?
• What happens when x is accessed before its declaration?
• How does var behave inside a function?
• What happens when y is accessed outside the function?

This example helps test your understanding of variable declarations, hoisting, and assignments.

4. JavaScript Hoisting: A Variable Declared Inside a Function

This snippet looks similar to the previous one, but the variable x is explicitly declared inside the function.

Code

function a() {
  console.log(x);
  x = 9;
  console.log(x);
  var x = 10;
  console.log(x);
}

a();
console.log(x);

What to observe

Consider these questions:

• What value does x have when it is logged before its declaration?
• What happens when x is assigned the value 9?
• What happens when x is subsequently assigned the value 10?
• Is x accessible outside the function?

This example highlights the importance of understanding function scope and var hoisting.

Final Thoughts

These interview snippets cover a few fundamental JavaScript concepts that are easy to overlook when focusing only on writing code.

The key areas to revise are:

• React array immutability and useMemo.
• JavaScript Promises and async/await.
• Variable hoisting with var.
• Function scope and variable assignment.

Understanding these concepts will help you reason through similar interview questions instead of relying on memorized answers.