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];
}
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!");
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
, orapply
:this
is explicitly set. Deep dive intothis
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:
- Multi-line strings.
- Embedding variables or expressions using
${}
. Example:`Hello, ${name}!`
. Learn more about template literals here.
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)