The 10 JS Topics Every Frontend Engineer Should Know

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;

Resources

• MDN — Hoisting
• MDN — let and the Temporal Dead Zone
• javascript.info — Variable scope, closure

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

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

• MDN — Closures
• javascript.info — Closure
• Video: Closures in JavaScript — Fun Fun Function

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

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();
}

Resources

• MDN — Using promises
• MDN — async function
• javascript.info — Async/await

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

Resources

• MDN — this
• javascript.info — Object methods, "this"
• MDN — Function.prototype.bind()

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);
}

Resources

• MDN — Recursion (Glossary)
• javascript.info — Recursion and stack

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);

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)";
});

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);
});

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);

Resources

• MDN — Memory management
• Chrome DevTools — Fix memory problems (hands-on: heap snapshots, detached DOM nodes)
• web.dev — Memory leaks in web apps