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. These are topics I have been asked or ask during my 10 years in tech🤗.
1. Execution Context & Hoisting
Level: Very common. I have been asked about hoisting so much during all my years of experience.
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;
Enter fullscreen mode Exit fullscreen mode
Resources
2. Closures
Level: Common. Mostly asked to mid FE.
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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
Resources
3. The Event Loop
Level: Very common. Asked at every level. Usually as questions “predict the output” like the one below.
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
Enter fullscreen mode Exit fullscreen mode
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
Level: Very common. Understandably, there is no way to not have async behaviour in an app in 2026.
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();
}
Enter fullscreen mode Exit fullscreen mode
Resources
5. this Keyword
Level: Common. Mostly junior to mid FE.
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
Enter fullscreen mode Exit fullscreen mode
Resources
6. Objects & Recursion
Level: Less common as trivia, but shows up in live coding (deep clone, tree traversal, flattening nested objects).
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);
}
Enter fullscreen mode Exit fullscreen mode
Resources
7. Arrays & Data Manipulation
Level: Very common. You need to know how to manipulate data.
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);
Enter fullscreen mode Exit fullscreen mode
Resources
- MDN —
Array.prototype.map() - MDN —
Array.prototype.filter() - MDN —
Array.prototype.reduce() - MDN — Array methods overview
8. Browser Rendering & Performance
Level: Less common. Mostly senior or performance-focused roles.
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)";
});
Enter fullscreen mode Exit fullscreen mode
Resources
- web.dev — Rendering Performance
- MDN — Populating the page: how browsers work
- web.dev — Avoid large, complex layouts and layout thrashing
9. Event Propagation
Level: Common. Mid FE and up.
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);
});
Enter fullscreen mode Exit fullscreen mode
Resources
- MDN — Event bubbling and capture
- javascript.info — Bubbling and capturing
- javascript.info — Event delegation
10. Memory Management
Level: Less common as a direct question, but senior interviews may have a “why is this leaking?” scenario.
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);
Enter fullscreen mode Exit fullscreen mode
Resources
- MDN — Memory management
- Chrome DevTools — Fix memory problems (hands-on: heap snapshots, detached DOM nodes)
- web.dev — Memory leaks in web apps
답글 남기기