Maybe AI is THE "hot" topic, but interviews are as old as ever. As i am studying for that said interviews, I compiled a list of 10 JS topics I think that are very crucial to prove the understanding of.
1. Execution Context & Hoisting
Before JS runs your code, it creates an execution context. A new context is created when a program starts or when a new function is executed. During this phase it allocates memory for variables and functions. var variables are hoisted and initialised as undefined, while let and const are hoisted but remain in the Temporal Dead Zone until their declaration.
Example
console.log(a); // undefined
var a = 5;
Resources
2. Closures
A closure happens when a function remembers variables from the scope where it was created, even after that outer function has finished executing.
Example
function counter() {
let count = 0;
return function () {
count++;
return count;
};
}
const increment = counter();
increment(); // 1
increment(); // 2
Classic interview example :
let result = [];
for (var i=0; i<10; i++) {
result[i] = function() {
console.log(i,);
}
}
result[0](); // 10
result[1](); // 10
let result = [];
for (let i=0; i<10; i++) {
result[i] = function() {
console.log(i,);
}
}
result[0](); // 0
result[1](); // 1
Resources
3. The Event Loop
JS is single threaded, meaning it runs one line of code at a time. The Event Loop decides when callbacks (macrotasks, think timers) or promises (microtasks) are allowed to run after the current code (executed in the call stack) has finished.
Example
console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// Output:
// 1
// 4
// 3
// 2
Resources
- MDN — Concurrency model and the event loop
- Video: Philip Roberts — "What the heck is the event loop anyway?" (JSConf)
- Interactive: Loupe — visualize the event loop in real time
4. Promises & Async/Await
Promises represent work that will finish later. async and await is syntactic sugar for promises that let you write asynchronous code that looks like synchronous code.
Example
async function getUser() {
const response = await fetch("/api/user");
return response.json();
}
Resources
5. this Keyword
this refers to the object that is calling the function. Its value
depends on how the function is invoked.
Example
const user = {
name: "Alex",
greet() {
console.log(this.name);
}
};
user.greet(); // Alex
Resources
6. Objects & Recursion
Recursion is when a function calls itself. It's useful for traversing
nested objects or tree-like structures.
Example
function countDown(n) {
if (n === 0) return;
console.log(n);
countDown(n - 1);
}
Resources
7. Arrays & Data Manipulation
Frontend applications constantly read and manipulate API data. Methods like map, filter, and reduce make this easier.
Example
const users = [
{ name: "Alice", active: true },
{ name: "Bob", active: false }
];
const activeUsers = users.filter(user => user.active);
Resources
- MDN —
Array.prototype.map() - MDN —
Array.prototype.filter() - MDN —
Array.prototype.reduce() - MDN — Array methods overview
8. Browser Rendering & Performance
The browser converts HTML, CSS, and JavaScript into pixels on the
screen. Efficient updates reduce unnecessary layout and painting work.
Example
requestAnimationFrame(() => {
element.style.transform = "translateX(100px)";
});
Resources
- web.dev — Rendering Performance
- MDN — Populating the page: how browsers work
- web.dev — Avoid large, complex layouts and layout thrashing
9. Event Propagation
Events travel through the DOM. They first capture down the tree, then
bubble back up. Event delegation uses bubbling to handle many events with one listener.
Example
document.body.addEventListener("click", (event) => {
console.log(event.target);
});
Resources
- MDN — Event bubbling and capture
- javascript.info — Bubbling and capturing
- javascript.info — Event delegation
10. Memory Management
JavaScript automatically frees unused memory, but objects can stay alive if something still references them, such as an event listener or timer.
Example
button.addEventListener("click", handleClick);
// Later when no longer needed
button.removeEventListener("click", handleClick);
Resources
- MDN — Memory management
- Chrome DevTools — Fix memory problems (hands-on: heap snapshots, detached DOM nodes)
- web.dev — Memory leaks in web apps
Top comments (2)
The diagrams made the concept of event propagation especially easy to understand. Lately, I’ve been relying on AI to write code and had started to forget some of these fundamentals. Thanks for the helpful reminder!
I'm curious if you included module patterns or bundler basics in your "10 topics."