DEV Community

Cover image for 50 Must-Know JavaScript Topics to Master Your Next Interview 🥷
Mathias Falci
Mathias Falci

Posted on

50 Must-Know JavaScript Topics to Master Your Next Interview 🥷

Introduction

A carefully curated list of topics that are commonly covered in JavaScript technical interviews. Due to the quantity, we won’t dive deep into each topic, but the goal here is to present them, so you can explore more on your own. Without further ado, let’s dive into the content!

1. compose() and pipe() Polyfill

Both are higher-order functions that allow you to combine multiple functions into one. compose(): Composes functions from right to left, meaning the rightmost function is executed first. pipe(): Composes functions from left to right, meaning the leftmost function is executed first. Check the implementation here.

2. Promises and Their Helper Methods

Promises are fundamental for handling asynchronous operations in JavaScript. Understanding how to implement polyfills for Promise.all(), Promise.race(), and Promise.allSettled() demonstrates deep knowledge of promise mechanics and common async patterns.

  • Promise.all(): Waits for all promises to resolve or fails if any reject
  • Promise.race(): Resolves/rejects as soon as the first promise settles
  • Promise.allSettled(): Waits for all promises to settle, regardless of outcome

3. Implement the .map, .filter, .reduce, and .forEach polyfills

Creating these polyfills highlights your grasp of array iteration methods and how to work with JavaScript's Array.prototype. Each method serves a unique purpose, such as transforming, filtering, or reducing data. Explore practical examples.

4. Implement the Function.bind, call, and apply Methods

These methods are fundamental for controlling the execution context this of functions. Implementing them requires a solid understanding of how this behaves in JavaScript. Learn more.

5. Implement Async.parallel and Async.series for Executing Async Tasks

These are utility methods to manage asynchronous workflows. While parallel runs tasks concurrently, series executes them sequentially, making it crucial for managing complex async operations. Check code examples here.

6. Build a Promise from Scratch

Creating a promise from scratch demonstrates your understanding of the promise lifecycle, including states (pending, fulfilled, rejected) and chaining. Here's a good example.

7. Implement a Retry API

Retry APIs are used to handle transient failures in async operations. Implementing one showcases your problem-solving skills for error recovery in unreliable systems. Retry logic like a PRO.

8. Implement Memoization

Memoization optimizes performance by caching the results of expensive function calls. This technique is commonly used in recursive problems like Fibonacci sequence calculations.

// Fibonacci with Memoization
function fibonacci(n, memo = {}) {
  if (n <= 1) return n;

  // Check if the result is already cached
  if (memo[n]) return memo[n];

  // Compute and store the result in the cache
  memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
  return memo[n];
}
Enter fullscreen mode Exit fullscreen mode

9. Currying

Currying transforms a function with multiple arguments into a sequence of functions, each taking one argument. It’s a powerful functional programming concept often used for partial application. An excellent practical example of currying.

10. String.prototype.repeat

The repeat method repeats a string a specified number of times. Understanding this showcases your grasp of string manipulation and built-in methods.

11. Design Patterns

Design patterns are essential tools in software development, offering reusable and proven solutions to common design challenges. They promote best practices, improve code maintainability, and foster collaboration by providing a shared vocabulary for developers. Definitely is a must-know topic. A comprehensive guide.

12. Implement the Publisher-Subscriber Pattern

The Publisher-Subscriber (Pub-Sub) pattern is a way to let different parts of your application communicate without knowing about each other. In this pattern, "publishers" send out events, and "subscribers" listen for those events and react. This makes your app more scalable (you can add or remove parts easily), modular (components work independently), and flexible (you can handle events dynamically). More detailed explanation.

const pubsub = {
  events: {},
  subscribe(event, callback) {
    this.events[event] = this.events[event] || [];
    this.events[event].push(callback);
  },
  publish(event, data) {
    (this.events[event] || []).forEach((callback) => callback(data));
  },
};

pubsub.subscribe("message", (data) => console.log("Received:", data));
pubsub.publish("message", "Hello, Pub-Sub!");
Enter fullscreen mode Exit fullscreen mode

13. Prototype and Prototype Inheritance

In JavaScript, every object has a hidden "prototype" that it can inherit properties and methods from. This is called prototypal inheritance, and it’s a key feature of how JavaScript handles object-oriented programming. Instead of creating classes (like in other languages), JavaScript uses prototypes to share functionality between objects. This makes your code more efficient and flexible, as objects can reuse behavior from their prototypes.

14. How Rendering Works in the Browser

When you load a webpage, the browser goes through several steps to display it: it reads the HTML to build the structure (DOM), processes the CSS to create styles (CSSOM), combines them into a "render tree," and finally paints the page on the screen. Understanding this process helps you identify and fix performance issues, like slow-loading pages or janky animations. A detailed explanation here.

15. Event Delegation and Event Propagation

Event delegation is a technique where you add a single event listener to a parent element instead of multiple listeners to individual child elements. This improves performance, especially for dynamic content. Event propagation describes how events move through the DOM: first "capturing" (top-down) and then "bubbling" (bottom-up). Understanding these concepts helps you handle DOM events more efficiently and avoid common pitfalls. Learn more about event delegation and propagation here.

16. Progressive Web Applications (PWAs)

PWAs are web apps that feel like native apps. They work offline, send push notifications, and can be installed on your device. They use service workers (for offline functionality) and app manifests (for app-like behavior). Deep dive into PWAs.

17. Clone an Object

Cloning an object means creating a copy. A shallow copy duplicates only the top-level properties, while a deep copy duplicates nested objects too. Use Object.assign for shallow copies and structuredClone or libraries for deep copies. See more about object cloning here.

18. Debouncing and Throttling

Both techniques improve performance in apps with frequent events (like scrolling or typing). Debouncing delays execution until after a pause, while throttling limits execution to once every set time interval. Learn more about debouncing and throttling here.

19. Implement clearAllTimeout()

This function clears all active setTimeout timers. It’s useful for managing multiple timers and preventing unwanted executions. Code example.

20. How Does "this" Work in Different Scenarios?

The value of this changes based on how a function is called:

  • In global scope: this refers to the global object (e.g., window in browsers).
  • In object methods: this refers to the object.
  • With bind, call, or apply: this is explicitly set. Deep dive into this binding here.

21. Difference Between Synchronous and Asynchronous Code

  • Synchronous code runs line-by-line, blocking other operations until it finishes.
  • Asynchronous code runs in the background, allowing other tasks to continue. It uses callbacks, promises, or async/await. Learn more about async vs. sync here.

22. Explain the Concept of "Truthy" and "Falsy" Values

In JavaScript, some values are treated as false (falsy) in conditions, like 0, "", null, undefined, and false. Everything else is true (truthy). This helps avoid bugs in conditionals. See the official docs for truthy and falsy.

23. What Are Template Literals in ES6?

Template literals are strings wrapped in backticks (`) that allow:

24. How Do You Handle Errors in JavaScript?

Use try-catch blocks to catch errors and prevent crashes. You can also throw custom errors using the Error object and handle them gracefully. Deep dive into error handling here.

25. Implement a Function to Flatten a Nested Array

Flattening turns a multi-dimensional array (like [1, [2, [3]]]) into a single-level array ([1, 2, 3]). Use Array.prototype.flat() or recursion. Code example and explanation here.

26. Implement an LRU Cache

An LRU (Least Recently Used) cache removes the least accessed items when it reaches its size limit. It’s useful for optimizing memory in apps. Learn more about LRU cache implementation here.

27. What Are Closures in JavaScript?

Closures are functions that "remember" the environment where they were created. They’re useful for creating private variables or encapsulating logic. Deep dive into closures here.

28. Explain the Event Loop in JavaScript

The event loop handles asynchronous tasks. It checks the call stack and task queues (like the callback queue or microtask queue) to decide what to run next, ensuring non-blocking execution. Learn more about the event loop here.

29. What is the Difference Between var, let, and const?

  • var: Function-scoped, can be redeclared, and is hoisted.
  • let: Block-scoped, cannot be redeclared, and is hoisted but not initialized.
  • const: Block-scoped, cannot be redeclared or reassigned, and is hoisted but not initialized.

See more about var, let, and const here.

30. How Does Hoisting Work in JavaScript?

Hoisting moves variable and function declarations to the top of their scope during compilation. However, only the declaration is hoisted, not the initialization. For example, var x; is hoisted, but x = 5; is not. Learn more about hoisting here.

31. What is the Purpose of setTimeout and setInterval?

setTimeout delays the execution of a function by a specified time, while setInterval repeatedly executes a function at regular intervals. Both are used for scheduling tasks in JavaScript. Deep dive into timers here.

32. Explain How to Use the Fetch API

The fetch() method is used to make network requests. It returns a promise that resolves to a Response object, which can be parsed as JSON, text, or other formats. Learn more about the Fetch API here.

33. What is a Service Worker in the Context of PWAs?

A service worker is a script that runs in the background, enabling features like offline access, caching, and push notifications in Progressive Web Apps (PWAs). Deep dive into service workers here.

34. Describe How to Implement Deep Cloning of an Object

Deep cloning creates a copy of an object, including nested objects. Use structuredClone() for modern browsers or write a recursive function to copy all properties. Learn more about deep cloning here.

35. What Are Modules in JavaScript? How Do You Use Them?

Modules let you split code into reusable files. Use export to share functions or variables and import to use them in other files. Deep dive into JavaScript modules here.

36. Explain the Concept of this Binding with Examples

The value of this depends on how a function is called. Arrow functions inherit this from their parent scope, while regular functions depend on the calling context. Learn more about this binding here.

37. What is a Closure? Provide an Example

A closure is a function that remembers its outer scope, even after the outer function has finished running. For example, a function inside another function can access its parent’s variables. Deep dive into closures here.

38. How Do You Prevent Default Behavior of an Event?

Use event.preventDefault() to stop the default action of an event, like preventing a form from submitting or a link from navigating. Learn more about event prevention here.

39. What Are Arrow Functions, and How Do They Differ from Regular Functions?

Arrow functions are a shorter syntax for writing functions. Unlike regular functions, they don’t have their own this and are great for callbacks. See more about arrow functions here.

40. Explain the Concept of Promise Chaining

Promise chaining links multiple .then() calls, where each promise resolves and passes its result to the next. This creates a sequence of asynchronous operations. Learn more about chained promises here.

41. What is the Purpose of Object.create()?

Object.create() creates a new object with a specified prototype. It’s useful for implementing inheritance without using classes. Code example here.

42. How Can You Check if an Object is an Array?

Use Array.isArray() to check if a value is an array. It works reliably across different contexts.

43. What Are IIFE (Immediately Invoked Function Expressions)?

IIFEs are functions that run immediately after they’re defined. They’re used to create private scopes and avoid polluting the global namespace. Oficial documentation.

44. Explain How to Create a Custom Event in JavaScript

Custom events are created using the CustomEvent constructor and dispatched with element.dispatchEvent(). They’re useful for communication between components. CustomEvent documentation.

45. What is JSON, and How Do You Parse It?

JSON (JavaScript Object Notation) is a lightweight data format. Use JSON.parse() to convert a JSON string into an object and JSON.stringify() to convert an object into a JSON string. Working with JSON.

46. Describe How to Implement a Simple Event Emitter

An event emitter is a utility for managing events. It allows you to register listeners and emit events, often implemented using an object to store event callbacks. Building a Simple Event Emitter.

47. What Are Weak References in JavaScript?

Weak references allow access to objects without preventing them from being garbage collected. They’re useful for managing memory in caches or maps.

48. How Do You Optimize Performance in Large-Scale Applications?

Optimization techniques include debouncing, throttling, lazy loading, code splitting, reducing DOM operations...

49. Explain How to Use localStorage and sessionStorage

localStorage and sessionStorage are key-value storage mechanisms in the browser. localStorage persists data across sessions, while sessionStorage clears data when the tab or window is closed.

50. What Are Some Common Security Issues in JavaScript Applications?

Common issues include XSS (Cross-Site Scripting), CSRF (Cross-Site Request Forgery), and insecure input handling. Mitigate them using content security policies, input sanitization, and secure coding practices. Check the top 9 JavaScript Security Vulnerabilities in 2025.

Top comments (0)