DEV Community

Mahdi Hosseini
Mahdi Hosseini

Posted on

๐Ÿš€ 12 JavaScript Interview Questions You NEED to Know (2025 Edition) ๐ŸŽฏ

Hey fellow devs! ๐Ÿ‘‹ If you're prepping for a frontend interview in 2025, buckle up! Youโ€™re gonna face JavaScript fundamentals, tricky async stuff, and some brain-teasing real-world problems. Let's get you ready with 12 must-know questions (and answers) so you can crush your next interview! ๐Ÿ’ช๐Ÿ”ฅ


1๏ธโƒฃ var vs. let vs. const โ€“ Whatโ€™s the deal? ๐Ÿค”

  • var = Function scope, hoisted like a magic trick ๐Ÿช„ (but can be messy).
  • let = Block scope, no redeclaration, safer!
  • const = Like let but locked in (you canโ€™t reassign it, but you can mutate objects!).

๐Ÿ‘‰ Rule of thumb: Use const by default, let when needed, and avoid var like itโ€™s a memory leak.


2๏ธโƒฃ How does JavaScript handle async operations? ๐Ÿคฏ

JavaScript is single-threaded but deals with async stuff using:

  • Callbacks (old-school, hello callback hell ๐Ÿ‘ฟ)
  • Promises (.then() & .catch() make life easier)
  • Async/Await (the cleanest way to handle async code)
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Use async/await. Your future self will thank you. ๐Ÿ˜Ž


3๏ธโƒฃ Explain the Event Loop like Iโ€™m 5 ๐ŸŽก

The Event Loop is what keeps JavaScript non-blocking and fast. ๐ŸŽ๏ธ

  1. Call Stack: Runs sync code first.
  2. Task Queue: Holds async callbacks (like setTimeout).
  3. Microtask Queue: Holds promises, gets priority over Task Queue.

๐Ÿ‘‰ Ever wondered why setTimeout(() => console.log(โ€˜Hiโ€™), 0) doesnโ€™t run immediately? Because promises cut the line! โณ


4๏ธโƒฃ Closures: What, why, and when? ๐Ÿง

A closure is a function that remembers variables from its outer scope even when the outer function has finished executing. ๐Ÿง 

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

const counter = outer();
counter(); // 1
counter(); // 2
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Closures are ๐Ÿ”ฅ for data encapsulation, private variables, and function factories.


5๏ธโƒฃ Prototypal Inheritance โ€“ Whatโ€™s the magic? โœจ

JavaScript doesnโ€™t use classical OOP inheritance (like Java or C#). Instead, it uses prototypes. Every object has a hidden __proto__ that links to another object. ๐Ÿงฌ

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, Iโ€™m ${this.name}!`);
};

const user = new Person('Alice');
user.sayHello(); // Hello, Iโ€™m Alice!
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Prototypes are the backbone of JavaScript's object system! Modern syntax? Use class!


6๏ธโƒฃ Shallow vs. Deep Copy โ€“ Clone Wars ๐Ÿดโ€โ˜ ๏ธ

  • Shallow Copy = Only copies the first level, deeper objects are still referenced.
  • Deep Copy = Fully clones an object, including nested structures.
const obj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj };
shallowCopy.b.c = 42;
console.log(obj.b.c); // 42 (Oops! ๐Ÿ˜ฑ)

const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 100;
console.log(obj.b.c); // 42 (Phew! ๐ŸŽ‰)
Enter fullscreen mode Exit fullscreen mode

7๏ธโƒฃ == vs. === โ€“ The Battle of Equality โš”๏ธ

  • == does type coercion (sometimes useful, mostly dangerous).
  • === is strict (always prefer it!).
console.log(5 == '5'); // true (๐Ÿ˜ฌ weird but true)
console.log(5 === '5'); // false (๐Ÿ‘ expected behavior)
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Just use ===. Unless you enjoy debugging nightmares. ๐Ÿ˜†


8๏ธโƒฃ Generators โ€“ The Pause Button โธ๏ธ

Generators are functions that can pause and resume execution. Perfect for iterators and async flows!

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
Enter fullscreen mode Exit fullscreen mode

9๏ธโƒฃ Whatโ€™s up with this? ๐Ÿคจ

this is the most confusing keyword in JavaScript.

  • Global = window (or undefined in strict mode).
  • Object method = Refers to the calling object.
  • Arrow function = Inherits this from its surrounding scope.
const obj = {
  name: 'Alice',
  sayName() {
    console.log(this.name);
  },
};
obj.sayName(); // Alice
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Pro tip: If this is acting weird, check how the function is called! ๐Ÿง


๐Ÿ”Ÿ Debouncing & Throttling โ€“ The Speed Limit ๐Ÿšฆ

  • Debouncing = Delays function execution until after a certain time has passed.
  • Throttling = Ensures a function runs at most once in a given period.
function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const handleResize = debounce(() => console.log('Resized!'), 300);
window.addEventListener('resize', handleResize);
Enter fullscreen mode Exit fullscreen mode

1๏ธโƒฃ1๏ธโƒฃ Memory Leaks โ€“ Avoiding JavaScript Hoarding ๐Ÿ—‘๏ธ

Common memory leak causes:

  • Uncleared event listeners ๐Ÿ›‘
  • Global variables hanging around ๐ŸŽญ
  • Detached DOM elements ๐Ÿ‘ป
  • Closures holding onto large objects ๐ŸŽ’

โœ… Fix: Use WeakMap, remove event listeners, and clean up DOM nodes properly!


1๏ธโƒฃ2๏ธโƒฃ map(), forEach(), or reduce()? ๐Ÿคทโ€โ™‚๏ธ

  • map() โ†’ Returns a new array.
  • forEach() โ†’ Loops, but doesnโ€™t return a new array.
  • reduce() โ†’ Reduces an array to a single value.
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]
const sum = nums.reduce((acc, n) => acc + n, 0); // 6
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”ฅ Thatโ€™s a wrap! If you found this useful, share it with your dev friends! ๐Ÿš€ Letโ€™s ace those interviews! ๐Ÿ’ผ

frontend #javascript #js #reactjs #interview

Top comments (0)