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
= Likelet
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);
}
}
๐ 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. ๐๏ธ
- Call Stack: Runs sync code first.
-
Task Queue: Holds async callbacks (like
setTimeout
). - 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
๐ 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!
๐ 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! ๐)
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)
๐ 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
9๏ธโฃ Whatโs up with this
? ๐คจ
this
is the most confusing keyword in JavaScript.
- Global =
window
(orundefined
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
๐ 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);
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
๐ฅ Thatโs a wrap! If you found this useful, share it with your dev friends! ๐ Letโs ace those interviews! ๐ผ
Top comments (0)