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. 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 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 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 MDN — Using promises MDN — async function javascript.info — Async/await this Keyword this refers to the object that is calling the function. Its value 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() Recursion is when a function calls itself. It's useful for traversing Example function countDown(n) { if (n === 0) return; console.log(n); countDown(n - 1); } Resources MDN — Recursion (Glossary) javascript.info — Recursion and stack 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 The browser converts HTML, CSS, and JavaScript into pixels on the 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 Events travel through the DOM. They first capture down the tree, then 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 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