Top 50 MERN Stack Interview Questions With Example

<h1>Welcome</h1><p>This is a paragraph.</p>

<video controls>  <source src="video.mp4"></video>

<header><nav><section><article><footer>

• Better SEO
• Better Accessibility
• Cleaner Code
  
  

<h1 id="logo">SkedGroup</h1>
<p class="text">Hello</p><p class="text">World</p>

• Content
• Padding
• Border
• Margin
  
  

div{  padding:20px;  border:2px solid black;  margin:15px;}

.container{  display:flex;  justify-content:center;  align-items:center;}

• Navigation bars
• Cards
• Buttons
• Responsive layouts
  
  

.container{  display:grid;  grid-template-columns:1fr 1fr 1fr;}

• Flexbox: One-dimensional layout
• Grid: Two-dimensional layout
  
  

• static: Default position.
• relative: Moves relative to its original position.
• absolute: Moves relative to the nearest positioned parent.
• fixed: Stays fixed on the screen while scrolling.
• sticky: Acts like a relative until a scroll position is reached.
  
  

.box{  position:fixed;  bottom:20px;  right:20px;}

@media(max-width:768px){  .menu{    flex-direction:column;  }}

<link rel="stylesheet" href="style.css">

function greet() {  alert("Welcome to SkedGroup!");}
greet();

var name = "John";let age = 25;const country = "India";
age = 26;// country = "USA"; // Error

console.log(a);
var a = 10;
Output

undefined
Because JavaScript internally treats it as:

var a;
console.log(a);
a = 10;

• Global Scope
• Function Scope
• Block Scope
  
  

let name = "SkedGroup";
function showName() {    let city = "Indore";    console.log(name);}
showName();

function outer() {
    let count = 0;
    return function () {
        count++;
        console.log(count);
    };
}
const counter = outer();
counter();
counter();
Output

12

<div onclick="alert('Parent')">    <button onclick="alert('Button')">Click</button></div>
Clicking the button triggers:

Button
Parent

element.addEventListener("click", handler, true);
The third parameter truly enables capturing.

document.getElementById("list").addEventListener("click", function(event){
    if(event.target.tagName==="LI"){
        console.log(event.target.innerText);
    }
});

• Better performance
• Less memory usage
• Works with dynamically added elements
  
  

5 == "5";   // true
5 === "5";  // false

function add(a,b){
    return a+b;
}

const add = (a,b) => a+b;

• Shorter syntax
• Cleaner code
• No own this
• Commonly used in React
  
  

const person = {  name: "John",  greet() {    console.log(this.name);  }};
person.greet();

function greet(name, callback) {  console.log("Hello " + name);  callback();}
function sayBye() {  console.log("Goodbye!");}
greet("John", sayBye);

const promise = new Promise((resolve, reject) => {  resolve("Success");});
promise.then(result => console.log(result));

async function getData() {  return "Hello";}
getData().then(console.log);
OR

async function fetchData() {  const result = await Promise.resolve("Success");  console.log(result);}
fetchData();

console.log("Start");
setTimeout(() => {  console.log("Timer");}, 0);
console.log("End");
Output

StartEndTimer

function one() {  two();}
function two() {  console.log("Hello");}
one();

const user = {  name: "John",  age: 25};
The object is stored in the Memory Heap, while its reference is stored in the Call Stack.

const numbers = [1,2,3];
const result = numbers.map(num => num * 2);
console.log(result);
Output

[2,4,6]

const numbers = [10,20,30,40];
const result = numbers.filter(num => num > 20);
console.log(result);
Output

[30,40]

const numbers = [1,2,3,4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);
Output

10

• Sum of numbers
• Product calculation
• Counting values
• Flattening arrays
• Grouping objects
  
  

array.reduce((accumulator, currentValue) => {  // logic}, initialValue);

<h1 id="title">Hello World</h1>
<button onclick="changeText()">Click Me</button>function changeText() {  document.getElementById("title").innerHTML = "Welcome to MERN!";}

console.log(window.innerWidth);
console.log(location.href);

const colors = ["Red", "Blue", "Green"];
const [first, second] = colors;
console.log(first);
Object Example

const user = {  name: "John",  age: 25};
const { name, age } = user;

const arr1 = [1,2];
const arr2 = [...arr1,3,4];
console.log(arr2);
Output

[1,2,3,4]
Example (Object)

const user = {  name:"John"};
const updated = {  ...user,  age:25};

function sum(...numbers){
console.log(numbers);
}
sum(10,20,30);
Output

[10,20,30]

const name = "John";
console.log(`Welcome ${name}`);
Output

Welcome John

• String interpolation
• Multi-line strings
• Cleaner syntax
  
  

function greet(name = "Guest"){
console.log(name);
}
greet();
Output

Guest

const user = {
name:"John"
};
console.log(user.address?.city);
Output

undefined
Without Optional Chaining

console.log(user.address.city);
This throws an error.

const username = null;
console.log(username ?? "Guest");
Output

Guest

math.js

export function add(a,b){
return a+b;
}
app.js

import { add } from "./math.js";
console.log(add(5,3));

• Reusable code
• Better organization
• Easy maintenance
• Faster development
  
  

• 
  DOM is used to manipulate HTML elements.
• BOM provides access to browser features.
• Destructuring extracts values from arrays and objects.
• Spread (...) expands arrays or objects.
• Rest (...) collects multiple values.
• Template Literals simplify string creation.
• Default Parameters assign fallback values.
• Optional Chaining (?.) safely accesses nested properties.
• Nullish Coalescing (??) handles null and undefined.
• Modules organize code using import and export.
  
  

let name = "John";
function greet() {    console.log(name);}
greet();

let company = "SkedGroup";
function outer() {
    let city = "Indore";
    function inner() {        console.log(company);        console.log(city);    }
    inner();
}
outer();
Output

SkedGroupIndore

(function () {
    console.log("Executed");
})();
Output

Executed

• Avoids global variables
• Creates a private scope
• Executes immediately
  
  

function multiply(a) {
    return function (b) {
        return a * b;
    }
}
console.log(multiply(5)(10));
Output

50

• Search box
• Auto-suggestions
• Form validation
• Resize events
  
  

function debounce(func, delay){
let timer;
return function(){
clearTimeout(timer);
timer = setTimeout(func, delay);
}

• Infinite scrolling
• Window resize
• Mouse movement
• Scroll events
  
  

function throttle(func, delay){
let lastCall = 0;
return function(){
const now = Date.now();
if(now - lastCall >= delay){
lastCall = now;
func();
}

Shallow Copy Example

const user = {name:"John"};
const copy = {...user};
Deep Copy Example

const copy = structuredClone(user);

function Person(name){
this.name = name;
}
Person.prototype.sayHello = function(){
console.log("Hello");
};
const user = new Person("John");
user.sayHello();
Output

Hello

const animal = {
eat(){
console.log("Eating");
}
};
const dog = Object.create(animal);
dog.eat();
Output

Eating

• Code reuse
• Reduced memory usage
• Flexible inheritance
  
  

let user = {
name:"John"
};
user = null;
The original object becomes eligible for garbage collection because no variable references it anymore.

• Automatic memory management
• Prevents most memory leaks
• Improves application performance
  
  

• 
  Execution Context controls how code runs.
• Lexical Scope allows inner functions to access outer variables.
• IIFE executes immediately after definition.
• Currying transforms a function into multiple single-argument functions.
• Debouncing delays execution until activity stops.
• Throttling limits execution frequency.
• Shallow Copy copies only the first level.
• Deep Copy duplicates nested objects.
• Prototypes enable shared methods.
• JavaScript uses Garbage Collection for automatic memory management.
  
  

 In the next part, we'll explore React.js interview questions with simple explanations, practical examples, and interview-ready answers to help you prepare with confidence.